offfff

HTML CSS 본문

프로그래밍

HTML CSS

offfff 2016. 9. 1. 09:00

Styling HTML with CSS


CSS는 Cascading Style Sheets의 줄임말이다.

CSS는 HTML element들을 화면이나 종이, 혹은 다른 매체에 어떻게 표시할 것인지 서술한다.

CSS는 많은 작업을 저장하는데, 다수의 웹페이지 레이아웃을 한 번에 다룰 수 있게 해준다.

CSS는 아래 3가지 방법을 통해 HTML element에 추가될 수 있다.


- Inline : HTML element에서 style 속성으로써 사용하는 방법

- Internal : <head> 부분에서 <style> element를 이용해 사용하는 방법

- External : 외부 CSS 파일에 따로 저장해서 사용하는 방법


가장 많이 쓰이는 방법은 CSS파일에 스타일을 따로 저장하는 방법이다.




Inline CSS


inline CSS는 하나의 HTML element에 스타일을 적용하는데 사용된다.

inline CSS는 HTML element의 style속성을 사용한다.

아래 예제는 <h1> element의 글자 색을 파란색으로 설정하는 예제에다.


<!DOCTYPE html>

<html>

<body>


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


</body>

</html>




Internal CSS


internal CSS는 하나의 HTML 페이지의 스타일을 정의하는데 사용된다.

internal CSS는 HTML page의 <head> 부분에서 <style>element로 정의한다.


<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>


<h1>This is a Blue Heading</h1>

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


</body>

</html>




External CSS


external CSS는 다수의 HTML 페이지를 정의하는데 사용된다.

external sytle sheet 파일 하나로, 전체 웹 페이지 화면구성을 손쉽게 바꿀수 있다.

external style sheet를 사용하려면, HTML page의 <head>에 해당 링크를 추가해야 한다.


<!--external CSS를 사용하는 HTML 파일-->


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

</head>

<body>


<h1>This is a Blue Heading</h1>

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


</body>

</html>


아래는 styles.css 파일의 내용이다. 메모장 등 어떠한 텍스트 에디터로 작성해도 상관 없다.

파일에는 HTML코드가 포함되선 안되고, .css 확장자로 저장해야한다.


body {

background-color: powderblue;

}

h1 {

color: blue;

}

p {

color: red;

}




CSS Fonts


CSS color 속성은 사용할 텍스트 색을 정의한다.

CSS font-family 속성은 사용할 폰트를 정의한다.

CSS font-size 속성은 사용할 텍스트의 크기를 정의한다.


<!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 Blue Heading</h1>

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


</body>

</html>




CSS Border


CSS border 속성은 HTML element 주변 테두리를 정의한다.

아래 예제는 paragraph(<p>) element 주위로 테두리를 정의하는 소스코드이다.


<!DOCTYPE html>

<html>

<head>

 <style>                                        

 p {                                               

       border: 1px solid powerblue;      

 }                                                  

 </style>                                       

</head>

<body>


<h1>This is a Blue Heading</h1>

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


</body>

</html>




CSS Padding


CSS padding 속성은 텍스트와 테두리(border) 사이의 공백을 정의하는 속성이다.

아래 예제는 텍스트와 테두리 사이의 공백을 30픽셀로 정의하는 소스코드이다.


<!DOCTYPE html>

<html>

<head>

 <style>                                        

 p {                                               

       border: 1px solid powerblue;      

       padding: 30px;                         

 }                                                  

 </style>                                       

</head>

<body>


<h1>This is a Blue Heading</h1>

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


</body>

</html>




CSS Margin


CSS margin 속성은 테두리 바깥의 공백을 정의하는 속성이다.

아래 예제는 왼쪽으로 부터 50픽셀의 공백을 두고 테투리가 있는 paragraph를 정의하는 소스코드이다.


<!DOCTYPE html>

<html>

<head>

 <style>                                        

 p {                                               

       border: 1px solid powerblue;      

       margin: 50px;                           

 }                                                  

 </style>                                       

</head>

<body>


<h1>This is a Blue Heading</h1>

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


</body>

</html>




The id Attribute


한 특별한 element의 style을 정의하려면 element에 id속성을 추가한다.

아래 예제는 한 paragraph에 p01이라는 id를 부여하고, 그 아이디를 가진 element에만

style을 적용하는 소스코드이다.


<!DOCTYPE html>

<html>

<head>

 <style>             

 #p01 {               

       color: blue;   

 }                       

 </style>            

</head>

<body>


<h1>This is a Blue Heading</h1>

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

<p id="p01"> I am different.</p>


</body>

</html>


주의할 점은 id는 한 페이지에서 고유한 값이어야 한다는 것이다.




The class Attribute


id는 하나의 element에 대해서만 스타일을 적용할 수 있다.

비슷한 속성을 가진 element들에 대해 스타일을 적용하려면 class 속성을 정의하여 사용한다.


<!DOCTYPE html>

<html>

<head>

<style>

p.error { color:red; }

</style>

</head>

<body>


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

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

<p class="error"> I am different.</p>

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

<p class="error"> This is a paragraph, too.</p>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

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

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 이미지(HTML Images)  (0) 2016.09.03
HTML 링크(HTML Links)  (0) 2016.09.02
HTML 색 정의(HTML Colors)  (0) 2016.08.31
HTML코멘트(HTML Comments)  (0) 2016.08.30
HTML 컴퓨터 코드(HTML Computercode)  (0) 2016.08.29
'프로그래밍' Related Articles more