HTML style속성은 색상, 글꼴, 크기 등과 같은 스타일을 요소에 추가하는 데 사용된다.
나는 빨간색입니다
나는 파란색이에요
나는 크다

HTML 스타일 속성
HTML 요소의 스타일을 설정하는 것은 style속성을 사용하여 수행할 수 있다.
HTML style속성의 구문은 다음과 같다.
<tagname style="property:value;">
해당 속성 은 CSS 속성이다. 해당 값 은 CSS 값이다.
배경색
CSS background-color속성은 HTML 요소의 배경색을 정의한다.
페이지 배경색을 연한 하늘색으로 설정해보기
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

서로 다른 두 요소의 배경색을 설정한다.
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>

텍스트 색상
CSS color속성은 HTML 요소의 텍스트 색상을 정의한다.
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

글꼴
CSS font-family속성은 HTML 요소에 사용할 글꼴을 정의한다.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

글자 크기
CSS font-size속성은 HTML 요소의 텍스트 크기를 정의한다.
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

텍스트 정렬
CSS text-align속성은 HTML 요소의 가로 텍스트 정렬을 정의한다.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
장별 요약
- styleHTML 요소의 스타일을 지정하려면 속성을 사용하기.
- background-color배경색으로 사용
- color텍스트 색상에 사용
- font-family텍스트 글꼴에 사용
- font-size텍스트 크기에 사용
- text-align텍스트 정렬에 사용
'HTML' 카테고리의 다른 글
| html 10. 인용문 (0) | 2026.05.25 |
|---|---|
| html 9. 서식 (0) | 2026.05.25 |
| html 7. 단락, 줄바꿈 차이 <p></p> or <br> (0) | 2026.05.25 |
| html 6. 제목 (0) | 2026.05.25 |
| html 5. 속성 (0) | 2026.05.25 |