HTML Styles - CSS

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

Example

<!DOCTYPE html>
<html>

<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

Styling HTML with CSS

CSS 는 Cascading Style Sheets 을 의미한다.

HTML 요소들에 스타일을 적용하는 방법이 3가지 있다:

인라인(Inline) - HTML 요소 안의 style 속성을 사용
내부(Internal) - <head> 섹션 안의 <style> 요소를 사용
외부(External) - 외부의 CSS 파일을 사용

HTML에 CSS를 추가하는 가장 일반적인 방법은, 외부의 별도 CSS 파일에 CSS 문법을 넣는 것이다. 하지만, 이 HTML 튜토리얼에서는 내부(internal) 스타일링을 사용한다. 이는 설명하기 쉽고, 직접 실험을 쉽게 할 수 있게 해 주기 때문이다.

	You can learn much more about CSS in our CSS Tutorial.

CSS 문법

CSS 스타일링은 다음의 문법을 따른다:

element { property:value ; property:value }

element 는 HTML element name. property 는 CSS property. value 는 CSS value.

다수의 styles 들은 semicolon으로 분리된다.

인라인(Inline) Styling (Inline CSS)

인라인 스타일링(Inline styling)은 하나의 HTML 요소에 독특한 스타일을 적용 할 경우 유용하다.

인라인 스타일링은 style 속성을 사용합니다.

아래의 예는 하나의 제목의 텍스트 색상을 변경한다:

Example

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

Try it Yourself »

내부(Internal) Styling (내부 CSS)

단 하나의 페이지에 공통의 스타일을 정의 하려면 내부(internal) 스타일 시트를 사용할 수 있다.

내부 스타일링(Internal styling)은 HTML 페이지의 <head> 섹션 안에 다음과 같이 <style> 태그를 사용하여 정의된다.:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

External Styling (External CSS)

스타일을 많은 페이지에 적용할 때 외부 스타일 시트(External style sheet)가 이상적이다.

외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.

외부 스타일(External styles)은 페이지의 <head> 섹션 안에 <link> 요소로 정의된다. :

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

CSS Fonts

CSS property color 는 HTML 요소에 사용될 텍스트 컬러를 정의한다.

CSS property font-family 는 HTML 요소에 사용될 폰트를 정의한다.

CSS property font-size 는 HTML 요소에 사용될 텍스트 크기를 정의한다.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »