<맨 위로>

CSS(cascading style sheets)

  • cascading : 폭포같은, 계속되는, 연속적인

정의 및 특징

  • CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어 HTML과 XHTML에서 주로 쓰이며, XML에서도 사용할 수 있음 CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때, 자유도가 높은언어 웹사이트에서 사용되는 스타일(style)을 지정하기 위한 언어 스타일은 웹의 독창적인 개념이 아닌 웹 이전부터 워드프로세스등에서도 사용되던 개념

연혁

  • 1996년 W3C의 주도하에 첫번째 CSS버전인 CSS Level1이 발표
  • 1998년 CSS Level2가 등장하면서 대부분의 웹브라우저들이 CSS Level2를 지원하기 시작
  • 2006년 CSS Level3가 CSS Level2의 버그를 수정하여 발표
  • 현재 사용되는것은 CSS Level3

CSS사용의 의의

  • 문서의 구조와 표현을 분리할수 있다
  • 문서구조의 수정없이 스타일의 변경만으로 다양한 표현을 할 수 있다
  • 웹문서가 기계적으로 해석될수 있는 가능성이 높아짐 (시맨틱 웹)
  • 실제로 기계적 해석이 되는 부분은 HTML이지만 CSS(표현요소)를 분리 함으로써 더욱 구조화된 HTML을 얻을 수 있음

기본 문법

body {color:#000000; background-color:#000000} 
선택자 {속성명:속성값; 속성명:속성값; }
  • 선택자 (selector) : 스타일을 적용시킬 엘리먼트 : tag명, id, class등을 지정할 수 있다
  • 선언부 (declaration block) : 속성과 속성값을 이용하여 스타일을 선언 : {}사이 내용
  • 속성 (property) : 스타일의 종류를 나타내는 이름
  • 속성 값 (value) : 속성이 가지는 값 : 이 내용으로 형태가 조절됨
  • 선언부 내에서 콜론(:)으로 속성명과 속성값을 구분하고, 세미콜론(;)으로 속성과 속성을 구별함
  • 한 선언부 내에서 동시에 여러가지 속성을 선언 가능

적용 방법

External

  • CSS파일을 외부에서 생성하여 HTML문서에 연결
 <!DOCTYPE html>
 <html lang="ko">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="stylesheet" type="text/css" href="css/style.css" />
 		<style>
 			@import url(css/style.css);
 		</style>
 	</head>
 	<body>
 	</body>
 </html>

body{background-color:blue;}

Embeded

  • 특정 웹에지 내에 CSS코드를 직접 포함하여 스타일이 적용되도록 하는 방법
<!DOCTYPE html> 
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <style> 
            body {color:#000000;} 
            table {backgound-color:#000000;} 
        </style> 
    </head> 
    <body> 

    </body>
</html>

Inline

  • 특정 HTML요소에 style 속성을 사용하여 CSS를 직접 입력하는 방식
<h1 style="color:#000000;">header 1</h1>
<p style="margin:10px 0;">content</p>