1장. CSS 기본문법

[ 목차 ]

1. CSS

2. Selector 선택자

3. Property 속성

4. Value 값

5. HTML과 CSS의 연동

6. Reset CSS

 

1. CSS

1) HTML이나 XML과 같은 구조화된 문서를 화면, 종이에 어떻게 렌더링 할 것인지 정의하기 위한 언어

2) HTML은 정보의 구조화, CSS는 스타일링의 정의라는 별개의 문법을 갖는 별개의 언어

3) HTML없이 단독으로 존재하는 CSS는 의미가 없음

 

2. Selector 선택자

1) 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공되는 수단

2) 아래 구문을 Rule Set이라 하며, 셀렉터에 의해 선택된 HTML요소를 어떻게 렌더링할 것인지 브라우저에 지시

 

3. Property 속성

1) 셀렉터로 HTML 요소를 선택하고 { } 내에 프로퍼티와 값을 지정하는 것으로 다양한 스타일 정의 가능

2) 표준 스펙으로 이미 지정되어 있는 것을 사용해야 하며 사용자가 임의로 정의할 ㅅ ㅜ없음

3) 여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론으로 구분

 

4. Value 값

1) 프로퍼티에 사용할 수 있는 값

2) 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위로 지정

 

5. HTML과 CSS의 연동

1) LINK 스타일

  1] HTML에서 외부에 있는 CSS파일을 로드하는 방식으로 가장 일반적

2)

 

3)

 

 

6. Reset CSS

1) 모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS가 없어도 작동

2) 웹 브라우저마다 디폴트 스타일이 상이하고 지원하는 태그, 스타일도 제각각이기에 주의 필요

3) Resct CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로, 브라우저 별로 제각각인 디폴스 스타일을 통합

4) Eric Meyer's reset과 normalize.css가 있으며 주로 전자가 사용

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }