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
styleHTML 요소 스타일 지정에 속성 사용
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