본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕 왕돼지 2014. 3. 11.
반응형


 [기초강좌] 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>


<body style="background-color:yellow;">

<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>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>







Deprecated Tags and Attributes


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


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



다음 강좌 보기 >>






반응형

댓글