|
HTML(Hyper Text Markup Language) |
|
웹 페이지의 구조를 만드는 언어로 표현하려는 콘텐츠의 제목, 문단, 목록 등을 HTML 태그로 작성하면 웹 브라우저가 이 태그를 해석해서 웹 페이지로 출력한다. HTML 문서를 표준 문법에 따라 의미 있게 작성하면 검색 엔진이 웹 문서를 수집하기 좋고 다양한 접근 환경에서 사용할 수 있다. |
|
CSS(Cascading Style Sheet) |
|
HTML이 웹 페이지의 구조를 담당하는 언어라면 CSS는 표현을 담당하는 언어이다. 웹 브라우저에는 HTML 요소에 대한 기본적인 표현 양식이 있는데, CSS를 사용하여 이 표현 양식을 더 보기 좋게 바꿀 수 있다. 특정 HTML 요소를 선택하고 해당 요소에 CSS 속성을 부여하여 화면에서 배치, 색, 선, 모양, 배경, 이미지 등을 자유롭게 표현할 수 있다. |
HTML은 데이터에 '의미'를 부여해서 무질서한 데이터를 유용한 '정보'로 바꾸는 힘이 있다. HTML문서를 배치하고 꾸미려면 CSS를 사용해야 하는데 데이터의 '의미'와 '표현'을 잘 구별해서 적합한 언어를 사용하여 HTML을 작성하면 다른 사람이 쉽게 이해하고 편집할 수 있다. 문서의 '표현'을 CSS로 분리한다면 디자인을 바꾸기 위해 HTML을 편집해야 하는 수고를 덜 수 있다.
HTML이 웹 문서에 '의미'를 부여해서 데이터를 '정보'로 바꾼다면 CSS는 문서의 '배치와 표현'에 관여하여 콘텐츠를 이해하기 쉽고 보기 좋게 만든다. CSS 문법을 익히면 문서를 보기 좋게 꾸밀 수 있을 뿐만 아니라 HTML을 더 의미 있고 적법하게 사용할 수 있다.
2. 가상요소(Pseudo Elements)
CSS 2.1에서는 가상요소를 사용하여 하나의 HTML element에 대해 3개(CSS 3.0 부터는 3개 이상)의 배경과 다중의 복합적인 테두리를 제공하고 이는 CSS 2.1의 가상요소를 지원하는 모든 브라우저에서 작동된다.
가상요소는 기본적으로 CSS의 가상 요소 선택자 :before 와 :after 를 사용해서 만들고 중첩된 HTML요소와 유사하게 다룬다. 하지만 중첩된 HTML요소와 구별되는 뚜렷한 이점을 가지고 있으며 이는 다중의 배경과 테두리를 제공하며 HTML 문서와는 독립된 내용을 포함하고 있다는 점이다.
이를 이용해서 하나의 요소에 다음과 같은 효과들을 줄 수 있다.
- 하나의 요소에 여러가지 효과를 동시에 적용할 수 있다.
- 다중의 배경색과 배경 그림을 적용할 수 있다.
- 배경 이미지를 자르거나 이미지를 교체할 수 있다.
- 이미지를 이용하여 테두리를 만들 수 있다.
- 유동적인 배경효과를 가진 열들을 만들 수 있다.
- 요소 바깥영역에 이미지를 만들 수 있다.
- 다중 테두리를 표현하거나 그 외에 자주 사용되는 효과들을 연출할 수 있다.
- 생성된 컨텐츠에 추가적인 이미지를 포함할 수 있다.
:before 와 :after 가상 요소(pseudo-elements)
2.1. :before, :after 가상 요소(pseudo-element)
CSS에서는 :before와 :after 가상 요소들로 생성된 내용의 스타일과 위치를 그들의 이름들이 나타내는 바와 같이 엘리먼트의 앞과 뒤로 지정한다. 'content' 속성은 이들 가상 요소들과 조합하여 무엇이 삽입되는가를 지정한다.
예를 들어, 다음 명령은 문자열 "Note: "를 "note" 클래스를 가진("class" attribute 의 값이 "note" 인) 모든 P 엘리먼트의 내용 앞에 삽입한다.
P.note:before { content: "Note: " }
엘리먼트는 가상 요소로 생성된 내용을 포함한다. 따라서 위의 스타일시트를 아래와 같이 변경시키면 녹색의 실선 테두리를 "Note: "를 포함한 문단 주위에 생성하게 된다.
P.note:before { content: "Note: " }
P.note { border: solid green }
Note: [content]
가상 요소들은 따로 정의하지 않는다면 HTML 요소의 속성들을 가지게 된다. 예를 들어, 다음의 명령은 Q 엘리먼트 앞에 따옴표를 삽입한다. 따옴표의 색상은 적색이지만 글꼴의 색상은 HTML 요소의 글꼴 색상과 같다.
Q:before { content: open-quote; color: red }
HTML 요소에도 정의되어 있지 않은 속성은 그 속성의 기본값을 갖는다.
2.2. CSS Content
'content' 속성에 사용할 수 있는 값들은 다음과 같다.
'content'
'content' 속성은 HTML 문서에서 내용을 생성하기 위하여 :before, :after 가상 요소들과 함께 사용된다.
기본값
normal
상속
no
Version
CSS2
적용범위
Value
Description
none
content 속성의 값이 open-quote, close-quote 인 때에도 인용부호를 생성하지 않는다.
normal
내용을 생성하지 않는다.
counter
자동으로 번호를 추가하도록 지정한다. counter() 또는 counters() 의 두 가지 기능들로 지정할 수 있으며 양식은 아래와 같다.
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
name 은 카운터의 이름이며 style 은 list styles 중 하나이다.
list-style-type
attr(attribute)
지정된 HTML 속성값을 문자열로 반환한다. 요소에 속성이 지정되어 있지 않으면 빈 문자열이 반환된다.
string
문자열을 지정한다.
open-quote,
close-quote 인용부호의 시작과 종료를 지정한다.
no-open-quote,
no-close-quote 인용부호를 삽입하지 않고 인용부호의 들여쓰기를 깊게 하거나 얕게 한다.
url(url)
외부자원을 지정하는 URL로, 지원하지 않는 미디어 타입(an image, a sound, a video, etc.)일 경우에 무시된다. HTML 이미지에서 'alt' 또는 'longdesc' 와 같은 속성은 제공하지 않는다.
예제1
| P.note:before { content: "Note: " } |
| "Note: "라는 스트링을 note 클래스가 지정된 모든 문단 앞에 입력합니다. |
예제2
| H1:before { content: url(star_1.gif) } H1:after { content: url(star_2.gif) } |
| H1 요소 앞과 뒤에 지정한 그림을 삽입합니다. |
예제3
| P.numbered:before { counter-increment: para ; content: counter(para, upper-roman) ". " } |
| numbered 클래스가 지정된 문단 앞에 대문자 로마 문자와 마침표로 구성된 카운터가 삽입됩니다. |
예제4
| .q:before { content: open-quote } .q:after { content: close-quote } |
| q 클래스가 지정된 모든 요소 앞과 뒤에 열기와 닫기 인용 문자를 삽입합니다. |
예제5
| .show-id:before { content: "ID: " attr(id) } |
| show-id 클래스가 지정된 요소 앞에 요소의 id 속성값을 삽입합니다. |
2.3. 인용부호
CSS에서는 인용부호들을 어떻게 표현할 지를 지정할 수 있다. 'quotes' 속성은 인용부호의 짝을 지정하고 'content' 속성으로 이들 인용부호에 접근하여 내용의 앞과 뒤에 삽입되게 한다.
| 'quotes' | ||||||||
|
| Value | Description |
| none | content 속성의 open-quote, close-quote 값들은 인용부호를 표시하지 않는다. |
| string string string string | 사용할 인용부호를 지정한다. 처음 두 개의 속성값은 첫 번째 레벨의 인용부호를 지정하고, 다음 두 개의 속성값은 두 번째 레벨의 인용부호를 지정한다. |
예제1
| Q:lang(en) { quotes: '"' '"' "'" "'" } |
| 위 스타일을 아래와 같은 HTML 문서에 적용합니다. |
예제2
| <HTML lang="en"> <HEAD></HEAD> <BODY> <P><Q>This is a <Q>big</Q> tree.</Q></Q> </BODY> </HTML> |
| "This is a 'big' tree." |
2.4. Counter, Numbering
CSS에서 자동으로 번호붙이기는 'counter-increment' 와 'counter-reset' 의 두 속성들에 의해 제어된다. 이 속성들로 정의된 카운터들은 'content' 속성의 counter() 와 counters() 기능들과 함께 사용된다.
| 'counter-reset' 'counter-reset' 속성은 하나 이상의 카운터 이름을 포함하고 각각의 카운터에 하나의 정수를 설정한다. 엘리먼트가 발생할 때에 그 정수로 카운터 값을 설정하며 기본값은 0 이다. | ||||||||
|
| 'counter-increment' 'counter-increment' 속성은 하나 이상의 카운터 이름을 인자로 받고 각각의 카운터에 하나의 정수를 설정한다. 엘리먼트가 발생할 때에 그 정수만큼 카운터가 증가하게 된다. | ||||||||
|
|
H1:before { content: "Section " counter(section) ". "; H2:before { content: counter(section) "." counter(sub-section) " "; |
| 상위 섹션의 변수가 초기화 되어 서브섹션의 번호가 1, 1.1, 1.2와 같이 매겨집니다. |
예제2
| DIV { counter-reset: a b 2 } |
| 각 DIV 요소마다 카운터 "a"는 0으로 지정되고 카운터 "b"는 2로 지정됩니다. |
예제3
| H1:before {content: "Section " counter(section) " "; counter-increment: section; } |
| 변수가 1씩 증가됩니다. |
예제4
| H1:before {content: "Section " counter(section) " "; counter-increment: section 2; } |
| 변수가 2씩 증가됩니다. |
이 밖에 가상 요소들을 이용하여 할 수 있는 일들을 다음 링크를 통해 소개한다.
- http://css-tricks.com/pseudo-element-roundup/
- http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
참고 사이트
- http://trio.co.kr/autocss.html
- http://www.w3schools.com/cssref/
- http://css-tricks.com/css-content/
- http://all9.tistory.com/
'Web' 카테고리의 다른 글
| [jQuery Mobile] 주제를 알자! - 3 - (0) | 2012.12.12 |
|---|---|
| [jQuery Mobile] 주제를 알자! - 2 - (0) | 2012.12.10 |
| [jQuery Mobile] 주제를 알자! - 1 - (0) | 2012.12.01 |
| Flexible Box Layout module (0) | 2012.03.28 |
| 웹 페이지 저작의 기초 (0) | 2012.03.08 |
