1. CSS란?

• CSS는 Cascading Style Sheets로 HTML을 꾸며주는 언어이다.
• html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할이다.
• CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지 않으면 CSS는 무용지물이나 마찬가지이다. 표현을 위한 언어인데 마크업 문서가 없으면 표현할 대상이 없다는 뜻이기 때문이다.

2. CSS 문법과 적용

• CSS는 HTML 요소를 꾸며주는 역할을 한다.
• 따라서 어느 요소를 꾸밀건지, 어떻게 꾸밀건지를 적어야 한다.

1) CSS 구문

h1 { color: yellow; font-size:2em; }

• 선택자(selector) - "h1"
• 속성(property) - "color"
• 값(value) - "yellow"
• 선언(declaration) - "color: yellow", "font-size: 2em"
• 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
• 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

2) CSS 주석

/* 주석 내용 */
/*
    주석은 여러 줄로도
    선언 할 수 있습니다.
*/

3) CSS의 적용

CSS와 문서를 연결하는 방법은 4가지가 있다.

(1) Inline

• Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다.
• 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.

<div style="color:red;"> 내용 </div>

Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.

(2) Internal

• Internal은 문서에 style을 활용한 방법이다.
• style은 head내부에 들어가며 style안에 스타일 규칙이 들어간다.

<style> genie {color: red;} </style>

위의 코드로 모든 genie에 같은 스타일을 줄 수 있다.
하지만 많은 페이지가 있는 경우, 모든 페이지에 저마다의 규칙을 선언하는 건 넘나 귀찮은 일이다.

(3) External

• 외부 스타일 시트 파일을 이용하는 방법이다.
• 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이며, 확장자는 .css가 된다.

genie {color: red;}

• 우선 CSS 파일을 하나 만들고 스타일 규칙을 선언한다.
• 그다음 link을 이용해서 CSS 파일을 연결하면 된다.

<link rel="stylesheet" href="css/style.css">

• href 속성을 이용해 CSS 파일의 경로를 적는다.
• rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야

많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있고, CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있다.
외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법이다.

(4) Import

• 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다.

@import url("css/style.css");

style 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않는다.