스타일(Style)
HTML에서 스타일은 웹 페이지의 모양과 레이아웃을 지정하는 데 사용되는 속성들의 집합을 말한다. 이러한 스타일을 적용하여 요소의 색상, 크기, 배치 등을 제어할 수 있다.
- 색상 : color:red
- 크기 : font-size:200%
- 문단 정렬 : text-align:center
- 배경색 : background-color:white
HTML에서 스타일을 적용하는 여러 가지 방법이 있지만 가장 일반적인 방법으로는 인라인 스타일, 내부 스타일 시트 와 외부 스타일 시트 방법이 있다.
인라인 스타일: 개별 HTML 요소에 직접 스타일 속성을 지정하는 방법으로 요소의 시작 태그에 ‘ style ‘ 속성을 추가하고, 해당 속성 값으로 스타일 속성을 지정하는 방법이다.
<p style="color: red; font-size: 20px;">This is a red paragraph with font size 20px.</p>
내부 스타일 시트 : HTML 문서 내에서 ‘ <style> ‘ 태그를 사용하여 스타일을 정의하는 방법으로 ‘ <style> ‘ 태그는 ‘ <head> ‘ 태그 내에 위치하며 CSS 규칙을 포함한다.
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a red paragraph with font size 20px.</p>
</body>
외부 스타일 시트: 별도의 CSS 파일에 스타일을 정의하고, HTML 문서에서 해당 CSS 파일을 연결하는 방법이다. CSS 파일은 ‘ .css ‘ 확장자를 가지고 ‘ <link> ‘ 태그를 사용하여 HTML 문서와 연결한다.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a red paragraph with font size 20px.</p>
</body>
<p> 태그 말고도 다양한 예시로는
1, <h1> 태그에 스타일 적용
<h1 style="color: blue; font-size: 24px;">This is a blue heading with font size 24px.</h1>
2. <a> 태그에 스타일 적용 (링크)
<a href="#" style="color: red; text-decoration: underline;">This is a red underlined link.</a>
3.<ul> 및 <li> 태그에 스타일 적용 (목록)
<ul style="list-style-type: circle;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
4.< table 태그에 스타일 적용
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid black; padding: 8px;">Header 1</th>
<th style="border: 1px solid black; padding: 8px;">Header 2</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Cell 1</td>
<td style="border: 1px solid black; padding: 8px;">Cell 2</td>
</tr>
</table>
'웹 > HTML' 카테고리의 다른 글
| HTML - 이미지(Image / <img>) (0) | 2023.06.20 |
|---|---|
| HTML - 색 배경 링크 (0) | 2023.06.19 |
| HTML - 엔티티 와 문자셋 (0) | 2023.06.19 |
| HTML - 서식과 인용 (0) | 2023.06.19 |
| HTML - 제목과 문단 (0) | 2023.06.19 |
