본문 바로가기

HTML 스타일(HTML Styles)

Example

I am red

I am blue

I am big


Try it Yourself »



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


Try it Yourself »



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


Try it Yourself »



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


Try it Yourself »



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


Try it Yourself »



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


Try it Yourself »



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


'HTML' 카테고리의 다른 글

HTML 인용문 및 인용문 요소(HTML Quotation)  (0) 2018.06.09
HTML 텍스트 서식 지정(HTML Text Formatting)  (0) 2018.06.08
HTML 단락(HTML Paragraphs)  (0) 2018.06.06
HTML 제목(HTML Headings)  (0) 2018.06.05
HTML 속성(HTML Attributes)  (0) 2018.06.04