본문 바로가기
css

CSS란? (HTML과 CSS의 차이, CSS 작성법)

by 지구별에 2014. 2. 26.

 

 

CSS란? (HTML과 CSS의 차이)

 

 

CSS는 Cascading Style Sheets 약자로,


HTML, XHTML, XML 같은 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어입니다.

 

HTML로 문서의 뼈대를 만들면

 

CSS는 이 문서의 화장을 맡고 있는 셈인데요.  

 

글꼴이나, 배경색, 너비와 높이, 위치 등을 지정하거나,

 

웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게  표시될 수 있도록 지정할 수도 있습니다.

 

 

CSS는 1996는 12월 W3C(웹 문서 표준을 만드는 기관)가 도입 했는데

 

그 전엔 HTML언어 하나로 문서의 뼈대도 만들고, 꾸밈도 같이 했습니다.

 

그러다 보니 HTML 문서를 수정할 때 모든 문서를 하나씩 수정해야 하는 번거로움이 있었습니다..

 

CSS는 문서의 내용(content)과 표현(presentation)을 분리하여

 

CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정되는 엄청난 장점이 있습니다~

 

 

[이미지출처:html.net]

 

 

[스타일을 꾸미는 법]

 

스타일을 꾸미는 방법은 세 가지가 있는데요,

 

1.  속성처럼 style 적용

2.  style tag를 사용

3.  css 파일을 별도로 만들어 html 문서에 연결.

 

이중 여러 문서를 수정하기엔 2, 3번이 좋으며, 그 중에서도 3번으로 작성하는 것이

 

제일 좋습니다.

  

 

1. HTML 문서 안에 style 속성을 사용함 (In-line) 

 

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body>

<h1 style="color:blue; text-align:center;">   

CSS 첫번째 강좌</h1>  

 </body>
 </html>

 

 

2. style 태그를 사용함 (Internal)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <style type="text/css">
    h1 {

color: blue;

text-align:center;

}
  </style>

 </head>
 <body>

 <h1>CSS 첫번째 강좌 </h1> 

 </body>
 </html>

 

 

3. css 파일을 별도로 만들어, html 문서에 연결 시킴 (External)

 

㉠확장자  .css로 저장 (예:test.css)


    h1 {

color: blue;

text-align:center;

}

 

㉡확장자 .htm으로 저장(예:main.htm)

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 <body>

  css 첫번째 강좌
 </body>
 </html>

 


[css 실행 화면] 

 

 

 

[CSS 작성법]

 

css 작성법은 다음과 같습니다.

 


selector  {property: value;}
선택자 { 속성:속성값; } 

 

 

예문:


    h1 {

color: blue;

text-align:center;

}


 

html 작성 방법과 다르다는 점 유의해주세요!

열고 닫기는 { } 를 사용하며

하나의 속성값이 끝날 때마다  세미콜론 ; 을 씁니다.

 

중괄호를 연 후 태그를 밑에 쓰는 것은, 코드 작성 시 오류를 줄이기 위해서입니다....

아래 처럼 작성해도 틀린 것은 아닙니다~

 

예문:


    h1 {color: blue;text-align:center;}

 

 

 

 

[HTML, CSS 기초] class, id 선택자

 

[html/css기초] span, div

 

[html기초]  , br, pre, p 태그

 

 HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

[HTML 기초] head 에 들어가는 태그 (title, style, script, meta 태그)

 

css 선택자, 선택자 종류와 사용법

 

반응형

'css' 카테고리의 다른 글

DIV 태그를 이용하여 레이아웃 만들기  (1) 2014.03.19
[css 기초] float 속성에 대하여  (3) 2014.03.18
[html/css] span, div 태그 차이  (1) 2014.03.14
[html/css기초] span, div  (0) 2014.03.11
[HTML, CSS 기초] class, id 선택자  (6) 2014.03.10

댓글