[기초강좌] HTML Styles - CSS

[기초강좌] HTML Styles - CSS - w3schools 번역

[기초강좌] HTML Styles - CSS - w3schools 번역

w3school 의 강좌 내용을 번역한 글입니다.

원문 : http://www.w3schools.com/html/html_css.asp

CSS ( Cascading Style Sheets ) 는 HTML element 들을 스타일링 하는 데 사용된다.

Styling HTML with CSS

CSS 는 HTML 4 와 함께 소개된 것으로, HTML element 들을 더 나은 방법으로 스타일링 하는 데 사용된다.

CSS 는 다음과 같은 방법으로 HTML 에 추가될 수 있다.

* Inline - style 속성을 이용하여 HTML element 에 표기된다.

* Internal - <head> 안의 <style> element 를 사용하여 정의된다.

* External - 외부의 CSS file 을 사용하여 연결된다.

HTML 에 CSS 를 사용하는 가장 선호되는 방법은 CSS syntax 를 별도의 CSS file 을 사용 한 후 연결하는 방법이다.

하지만, 이 HTML 강좌에서는 style 속성을 이용하여 CSS 를 소개할 것이다. 예제를 간단히 제작하여 보여주기 위함이다. 당신이 코드를 수정하여 테스트 하는 데도 훨씬 쉽다.

CSS 에 대한 모든 것은 나중에 나오는 CSS Tutorial 을 통해 배울 수 있다.

Inline Styles

Inline style 은 모든 element 에 대해 한번만 발생하는 style 에 사용하기가 좋다.

inline style 을 사용하기 위해서는 style 을 주고 싶은 element 에 style 속성을 이용하여 정의할 수 있다. 아래 예제는 문단의 글씨 색갈과 왼쪽 여백을 정의하는 것을 보여준다.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

style sheet 에 대해 더 배우려면, 나중에 CSS 강좌도 보도록 하자.

HTML Style Example - Background Color

Background-color 속성은 element 의 배경 색을 지정한다.

<!DOCTYPE html>

<html>

<h2 style="background-color:red;">This is a heading</h2>

<p style="background-color:green;">This is a paragraph.</p>

</body>

</html>

눈으로 직접 보기.

Background-color 속성은 예전의 더 이상 사용 안 하는 ( 원문 : old ) bgcolor 속성을 대체한다.

HTML Style Example - Font, Color and Size

Font-family, color, 그리고 font-size 속성은 글꼴, 글의 색상, 그리고 글씨 크기를 정의한다.

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:verdana;">A heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>

</html>

눈으로 직접 보기.

Font-family, color, 그리고 font-size 속성은 <font> tag 를 대체한다.

HTML Style Example - Text Alignment

Text-align 속성은 element 의 수평 정렬을 명시한다.

<!DOCTYPE html>

<html>

<body>

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

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

</body>

</html>

눈으로 직접 보기.

Text-align 속성은 <center> tag 를 대체한다.

Internal Style Sheet

Internal Style Sheet 은 한 문서에만 국한되는 style 을 정의할 대 사용되면 좋다. Internal style 은 <head> 안에 <style> 태그를 사용하여 아래와 같이 정의된다.

<head>

<style>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

External Style Sheet

External Style Sheet 은 여러 페이지에 적용되는 style 을 적용하기에 좋다. External Style Sheet 을 이용하면, 하나의 파일만 수정하여 웹 사이트의 모든 페이지를 손 쉽게 바꿀 수 잇다. 각 페이지는 link tag 를 이용하여 해당 style sheet 이 연결되어 있어야 한다. <head> 안의 <link>는 다음과 같이 정의된다.

<head>

</head>

Deprecated Tags and Attributes

HTML4 에서는 styling 을 위해 여러가지 tag 와 속성들이 사용되었다. 새 버전의 HTML 에서는 이런 tag 들이 지원되지 않는다.

다음의 element 들의 사용을 피하자 : <font>, <center>, <strike>, 그리고 color, bgcolor 속성.

다음 강좌 보기 >>

저작자표시 비영리 변경금지

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

Bootstrap All Functions #1 (0)	2014.03.13
[기초강좌] HTML Images - w3schools 번역 (0)	2014.03.12
[기초강좌] HTML Head - w3schools 번역 (0)	2014.03.10
[기초강좌] HTML Links - w3schools 번역 (0)	2014.03.05
[기초강좌] HTML Comments - w3schools 번역 (0)	2014.03.04