HTML 스타일(HTML Styles)
The HTML Style Attribute
HTML 스타일 속성
Setting the style of an HTML element, can be done with the style
attribute.
HTML 요소의 스타일 설정은 style
속성을 사용하여 수행 할 수 있습니다 .
The HTML style
attribute has the following syntax:
HTML style
속성의 구문 은 다음 과 같습니다.
1 | <tagname style="property:value;"> | cs |
The property is a CSS property. The value is a CSS value.
이 속성 은 CSS 속성입니다. 값은 CSS의 값입니다.
You will learn more about CSS later in this tutorial.
이 튜토리얼의 뒷부분에서 CSS에 대해 자세히 배웁니다.
HTML Background Color
HTML 배경색
The background-color
property defines the background color for an HTML element.
이 background-color
속성은 HTML 요소의 배경색을 정의합니다.
This example sets the background color for a page to powderblue:
이 예제에서는 페이지의 배경색을 powderblue로 설정합니다.
Example
1 2 3 4 5 6 | <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> | cs |
HTML Text Color
HTML 텍스트 색상
The color
property defines the text color for an HTML element:
이 color
속성은 HTML 요소의 텍스트 색상을 정의합니다.
Example
1 2 | <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> | cs |
HTML Fonts
HTML 글꼴
The font-family
property defines the font to be used for an HTML element:
이 font-family
속성은 HTML 요소에 사용할 글꼴을 정의합니다.
Example
1 2 | <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> | cs |
HTML Text Size
HTML 텍스트 크기
The font-size
property defines the text size for an HTML element:
이 font-size
속성은 HTML 요소의 텍스트 크기를 정의합니다.
Example
1 2 | <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> | cs |
HTML Text Alignment
HTML 텍스트 정렬
The text-align
property defines the horizontal text alignment for an HTML element:
이 text-align
속성은 HTML 요소의 가로 텍스트 정렬을 정의합니다.
Example
1 2 | <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> | cs |
Chapter Summary
Use the style
attribute for styling HTML elements
style
HTML 요소 스타일 지정에 속성 사용
Use background-color
for background color
사용하여 background-color
배경 색상
Use color
for text colors
사용하여 color
텍스트 색상을
Use font-family
for text fonts
사용하여 font-family
텍스트 글꼴
Use font-size
for text sizes
사용하여 font-size
텍스트 크기에
Use text-align
for text alignment
사용하여 text-align
텍스트 정렬
Test Yourself with Exercises!
출처 : W3School.com