CSS

2023/10/12
css

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>