AND_END

5.HTML style 속성 본문

HTML

5.HTML style 속성

하둉이 2018. 11. 13. 21:33
반응형

5. HTML style 속성



HTML 요소의 스타일 속성은 style 속성을 사용하여 수행 할 수 있습니다.



style 속성의 구문은 다음과 같습니다.


<tagname style="property:value;">


HTML 배경색

 : background-color 속성은 HTML 요소의 배경 색을 정의합니다.



EX)


<!DOCTYPE html>

<html>

<body style="background-color:powderblue;">

<h1>안녕하세요.</h1>
<p>배경색 = powderblue 입니다</p>

</body>

</html>



실행 결과 



HTML 텍스트 색상

: color 속성은 HTML 요소의 텍스트 색상을 정의합니다.

EX)


<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">텍스트</h1>
<p style="color:red;">색상</p>

</body>

</html>


실행 결과


HTML 글꼴

: font-family 속성은 HTML 요소에 사용할 글꼴을 정의합니다.



EX)


<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:verdana;">글꼴: verdana</h1>
<p style="font-family:courier;">이 글꼴은 courier</p>

</body>

</html>


실행 결과



HTML 텍스트 크기

: font-size 속성은 HTML 요소의 크기를 정의합니다.


EX)


<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:300%;">텍스트 크기 300%</h1>
<p style="font-size:160%;">텍스트 크기 160%</p>

</body>

</html>


실행 결과


HTML 텍스트 정렬

: text-align 속성은 HTML 요소의 가로 텍스트 정렬을 정의합니다.



EX)


<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center;">중앙 정렬 h1</h1>
<p style="text-align:center;">중앙 정렬 p</p>

</body>

</html>

실행 결과


<요약>

background-color : 배경 색상

color : 텍스트 색상

font-family : 텍스트 글꼴

font-size : 텍스트 크기

text-align : 텍스트 정렬 













반응형

'HTML' 카테고리의 다른 글

7. HTML 색상  (0) 2018.11.19
6. HTML 서식 / 인용문  (0) 2018.11.14
4. HTML 태그/속성의 상세 설명  (0) 2018.11.06
3. HTML 태그  (0) 2018.11.03
2. HTML 편집기  (0) 2018.11.02
'HTML' Related Articles more