다양한 선택자: CSS 리셋,Display:inline-block, :before, :after 등

웹접근성과 웹표준 2013. 7. 24. 00:00

다양한 선택자

1. CSS 리셋 (CSS Reset)

- 각 요소마다 다르게 존재하는 공백들과 불필요한 요소들을 제거하는 것

- 브라우저마다 서로 다른 기본 스타일 차이를 없애기 위해 브라우저의 기본 스타일을 날려야 한다.

- margin: 0, padding:0, boder: 0 등으로 모든 값을 초기화하는 것.

- http://meyerweb.com/eric/tools/css/reset/ 참조

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, small, strike, strong, sub, sup, tttt, , varvar, b, u, , b, u, ii, center, , center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

body { line-height: 1; }

ol, ul{ list-style: none; }

blockquote, q { quotes: none; }

table { border-collapse: collapse; border-spacing: 0; }

- 박스 모델에서도 div로 묶여진 블록과 p로 묶여진 블록은 테두리를 그려보면 차이점이 느껴지는데 p는 문단을 나누는 기능에 걸맞게 위 아래쪽으로 공백이 존재한다. 각 요소마다 존재하는 이런 공백들과 작업시 불필요한 요소들을 제거하기 위해 reset css가 사용된다.

예제) CSS 리셋 실습

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HEAD>

/* 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;

}

</style>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

유효성 검사해요

</BODY>

</HTML>

2. 렌더링 모델에 따른 박스 모델

- 표준 모드와 쿼크 모드에서의 박스 모델 차이

- 표준 모드(standards mode) : W3C의 표준을 엄격히 준수한 모드

- 쿼크 모드(quirks mode) : 오래된 웹 브라우저를 위한 하위버전 호환 모드

3. Display 프로퍼티 (block, inline, inline-block, none)

- 박스의 성격을 정의

block : 요소를 block으로

inline : 요소를 inline으로. 문단의 흐름을 따라가며 위치. 좌우의 margin, padding만 지원

inline-block : 문단의 흐름을 따라가며 위치. 나머지는 블록레벨의 요소의 특징을 가짐

none : 요소가 없는 것처럼

4. 가상 요소 :first-line, :first-letter

1) :first-line

- 요소의 첫 번째 줄에 있는 컨텐츠만 선택

- 웹브라우저의 크기에 따라 유동적으로 선택됨

2) :first-letter

- 요소의 첫 글자만 선택

5. 속성 선택자

- 특정 속성명이나 속성값을 가진 경우에 스타일 적용 (IE7 이상만 지원)

6. 가상 요소 :before, :after

- content 프로퍼티와 함께 사용

- IE8 이상 지원

1) :before

- 요소의 앞에 가상컨텐츠 삽입시 사용

2) :after

- 요소의 뒤에 가상컨텐츠 삽입시 사용

※ 최근엔 속성 영향을 클리어시킬 때, 의미없는 <div id="clear">를 본문에 만들어 css에 #clear{clear:both} 넣지 않고 css에 :after를 이용하여 보이지 않는 빈 컨텐츠를 만들어서 클리어 하는 기법을 많이 사용한다.

:after를 이용한 속성 클리어 예)

div.wrap:after{content:"";display:block;clear:both;}

네이버 container의 예

#container:after {

1. display: block;

2. clear: both;

3. content: '';

}

예제) 가상 요소 실습

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body {

padding: 20px;

font-family: 'Nanum Gothic', serif;

color: #333;

font-style: normal;

font-size: 13px;

line-height: 28px;

}

p:first-line{color:#777;font-style:italic;}

p:first-letter{font-size:3em;}

img{border:#ccc solid 5px;}

img[alt=""]{border:0;}

h2:before{ content: "CSS ";}

h2:after{content: " 과정";}

</style>

</head>

<body>

<p>

</p>

<p>웹표준 과정은 XHTML1.0, HTML5를 이용한 웹 사이트 제작시 효율성을 높이고 유지 비용을 줄이는데 도움을 주는 웹 표준에 대한 내용을 다양한 방법으로 교육중에 있습니다.</p>

<p>이 교육 과정에서는 웹접근성을 준수해야 하는 이유에 대해서 학습하고 KWAG의 각 지침에 대해서 실제 사례를 들어 설명하고 있습니다. </p>

<p>HTML5 과정에서는 다양한 API의 탑재로 앱을 쉽게 제작할 수 있는 HTML5의 다양한 기능들에 대해 예제를 이용하여 학습합니다.</p>

<p>집에서나 회사에서도 쉽게 접근하여 학습할 수 있도록 각 교육 과정을 온라인으로 학습할 수 있도록 서비스 중에 있습니다.</p>

</div>

</body>

</html>

예제 결과)

1) 가상요소 :first-line, :first-letter

CSS에서 p 태그에 p:first-line{color:#777;font-style:italic;}을 지정하여 첫번째 줄만 색상은 #777, 폰트스타일은 이텔릭으로 만들고, p:first-letter{font-size:3em;}를 지정하여 첫번째 글자만 사이즈를 3em(현재 요소 글자의 3배 크기)으로 키웠다.

2) 가상요소 :before, :after

css에서 h2 태그에 h2:before{ content: "CSS ";}을 지정하여 모든 h2 태그 앞에는 "CSS "라는 글자를, h2:after{content: " 과정";}를 지정하여 모든 h2 태그의 글자 뒤에는 " 과정"이라는 글자를 삽입하였다.

7. 가상 클래스 :first-child

- 부모요소 안의 첫 자식 요소만 선택

- IE7 이상 지원

8. 자식, 인접 형제 선택자

1) 자식 선택자 >

- ">"를 이용하여 부모요소의 바로 하위에 있는 자식요소만 선택

2) 인접 형제 선택자 +

- "+"를 이용하여 앞에 적은 요소 바로 다음에 오는 뒤에 적은 요소만 선택

예제) 가상 클래스

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body {

padding: 20px;

font-family: 'Nanum Gothic', serif;

color: #333;

font-style: normal;

font-size: 13px;

line-height: 28px;

}

h2+p:first-line{font-style:italic;color:#777;}

h2+p:first-letter{font-size:3em;}

h2+p:first-line,p{color:orange;}

</style>

</head>

<body>

<h1>COMPANY</h1>

<p class="zzz">엘지 전자는 미국 환경 보호청에서 주관하는 ‘에너지스타 올해의 파트너상’을 2년 연속 수상하며 친환경 선도기업으로 인정받고 있습니다.</p>

<p>홈 엔터테인먼트 업계에서 선두업체로 자리잡았습니다. </p>

<p>모바일 커뮤니케이션즈는 혁신적인 기술력과 세련된 디자인을 바탕으로 소비자들에게 한층 강화된 사용자 경험(UX)을 제공하고 있습니다.</p>

<p>홈어플라이언스 사업에서는 전 세계 고객의 문화적 특성과 생활 습관, 가전에 대한 요구를 철저히 분석해 우수한 기술력과 디자인 감각을 바탕으로 예술 같은 친환경 프리미엄 가전제품을 공급하면서 전세계 가전 문화를 새롭게 창조하고 있습니다.</p></div>

</body>

</html>

예제 결과)

인접 형제 선택자 +

CSS에서 h2 태그와 p 태그에, h2+p:first-line{font-style:italic;color:#777;}, h2+p:first-letter{font-size:3em;}, h2+p:first-line,p{color:orange;} 형태로 h2 다음에 오는 p 태그에만 first-line(첫번째줄), first-letter(첫번째 글자)에 해당 요소들을 적용하였다.

9. 속성 선택자

- 특정 속성명이나 속성값을 가진 경우에 스타일 적용

- IE8 이상 지원

1) 요소명[속성명^="값"]

- src 속성의 값이 http://로 시작하는 경우

[src^="http://"]

2) 요소명[속성명*="값"]

- src 속성의 값에 w3가 포함되어 있는 경우

[src*="w3"]

10. 기타 IE8 이상 지원 클래스들

1) :nth-child(n)

- n에 숫자를 넣어서 n번째 자식요소만 선택

- odd를 입력하여 홀수번째 자식요소만 선택

- eveneven을 입력하여 짝수번째 자식 요소만 선택

2) :last-child

- 마지막 자식요소만 선택

3) :empty

- 자식이 없는 요소만 선택

4) ::selection

- 사용자가 선택한 텍스트

11. 우선 순위의 계산

- 인라인 > ID 선택자 > 클래스, 가상클래스 선택자 > 요소 선택자 > 전체 선택자 순

각 선택자의 개별성

선택자	개별성	사용예
타입 선택자	1	div, h1, div, h1, img
가상 요소	1	:first-child, :before, :after
class 선택자	10	.blind , .help
가상 클래스	10	:link,:visited, :hover, :focus
id 선택자	100	header,#wrap
인라인 선택자	1000	divstyle="color:blue;"

12. 선택자별 지원 가능 브라우저 알아보기

http://caniuse.com/

css의 해당 선택자를 어느 브라우저까지 지원 가능한지 체크하는 사이트

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

float와 position: static, relative, absolute, z-index 비교 (0)	2013.07.27
문서 레이아웃: float, position: static, relative, absolute, z-index (0)	2013.07.25
사이트 제작시 웹 접근성 고려 사항 (0)	2013.07.23
폼(FORM)의 웹 접근성 요소 (0)	2013.07.22
테이블(TABLE)의 웹 접근성 요소 (0)	2013.07.21