본문 바로가기

HTML

html 8. 스타일

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