offfff

HTML 스타일(HTML Styles) 본문

프로그래밍

HTML 스타일(HTML Styles)

offfff 2016. 8. 26. 09:00

HTML 스타일 속성(The HTML Style Attributes)


HTML element의 스타일은 style 속성으로 설정할 수 있다.

HTML스타일 속성은 아래 문법을 따른다.


<태그 이름 style="속성:값;">


속성은 CSS속성이고, 값은 CSS 값인데, CSS에 대해서는 나중에 다룬다.




HTML 배경색(HTML Background Color)


background-color 속성은 HTML element의 배경색을 정의하는데 사용된다.

아래는 페이지의 배경색을 powderblue 색으로 설정하는 예제이다.


<!DOCTYPE html>

<html>

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


<h1>This is a heading</h1>

<p>This is a paragraph</p>


</body>

</html>




HTML 글자 색(HTML Text Color)


color는 HTML element의 글자 색을 정의하는 속성이다.


<!DOCTYPE html>

<html>

<body>


<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph</p>


</body>

</html>




HTML 글자체(HTML Fonts)


font-family는 HTML element 내용의 글씨를 정의하는 속성이다.


<!DOCTYPE html>

<html>

<body>


<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph</p>


</body>

</html>




HTML 글자 크기(HTML Text Size)


font-size는 HTML element의 글자 크기를 정의하는 속성이다.


<!DOCTYPE html>

<html>

<body>


<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph</p>


</body>

</html>




HTML 문단 정렬(HTML Text Alignment)


text-align은 HTML element의 수평 글자 정렬을 정의하는 속성이다.


<!DOCTYPE html>

<html>

<body>


<h1 style="text-align:center;">Centered heading</h1>

<p style="text-align:center;">Centered paragraph</p>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_styles.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 인용(HTML Quotations)  (0) 2016.08.28
HTML 글자 모양 편집(HTML Formatting)  (0) 2016.08.27
HTML 문단(HTML Paragraphs)  (0) 2016.08.25
HTML 제목(HTML Heading)  (0) 2016.08.24
HTML 속성(HTML Attributes)  (0) 2016.08.23
'프로그래밍' Related Articles more