HTML 스타일 속성은 색상, 글꼴, 크기 등의 스타일을 요소에 추가하는 데 사용된다.
HTML 스타일 속성
HTML 요소의 스타일 설정은 스타일 속성으로 수행할 수 있다.
HTML 스타일 특성의 구문은 다음과 같다:
| <tagname style="property:value;"> |
property는 CSS 속성이다. value는 CSS 값이다.
추후에 CSS 튜터리얼에서 좀더 배워보자.
배경색(Background color)
CSS background-color 속성은 HTML 요소에 대한 배경색을 정의한다.
| 예제 |
| <body style="background-color:powderblue;"> <h1>이것은 제목이다.</h1> <p>이것은 단락이다.</p> </body> |
또다른 예제는 제목에 배경색과 단락에 배경색을 다르게 설정할 수 있다.
제목에는 powderblue색이 배경색으로 단락 배경에는 tomato색으로 설정한다.
| 예제 |
| <body> <h1 style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph.</p> </body> |
글자색(Text Color)
CSS color 속성은 HTML 요소에 대한 글자색을 정의한다.
| 예제 |
| <h1 style="color:blue;">이것이 제목이다.</h1> <p style="color:red;">이것이 단락이다.</p> |
글꼴(Fonts)
CSS font-family 속성은 HTML 요소에 대한 글자색을 정의한다.
| 예제 |
| <h1 style="font-family:verdana;">이것이 제목이다</h1> <p style="font-family:courier;">이것이 단락이다.</p> |
글자크기(Text Size)
CSS font-size 속성은 HTML 요소에 대한 글자크기를 정의한다.
| 예제 |
| <!DOCTYPE html> <html> <body> <h1 style="font-size:300%;">이것이 제목이다.</h1> <p style="font-size:160%;">이것이 단락이다.</p> </body> </html> |
글자정렬(Text Alignment)
CSS text-align 속성은 HTML 요소에 대한 수평 글자 정렬를 정의한다. 정렬은 왼쪽, 가운데, 오른쪽으로 설정할 수 있다.
| 예제 |
| <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">가운데 제목</h1> <p style="text-align:center;">가운데 단락.</p> </body> </html> |
마무리
HTML 스타일에 대해 아래와 같이 간략히 살펴보았다.
. style
. backgound-color
. color
. font-family
. font-size
. text-align
등의 스타일에 대해 실습을 해보았다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 인용(Quotation)과 인용요소(Citation Elements) (0) | 2023.04.19 |
|---|---|
| HTML 글자 형식(HTML Text Formatting) (0) | 2023.04.17 |
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
| HTML 제목(Headings) (0) | 2023.04.14 |
| HTML 속성(Attributes) (0) | 2023.04.13 |
댓글