6. 선택자 조합
1) 하위 선택자
가장 많이 쓰이는 방법이죠
상위요소가 포함하는 하위요소에 스타일을 지정하고자 할때 쓰이며, 선택자와 선택자 사이에 공백으로 구분합니다.
<style type="text/css">
div p {color:red;}
</style>
<div>
<p>div가 아닌 p요소에 적용됩니다.</p>
</div>
2) 자식 선택자
이방법은 익스6과 구버전에선 지원하지않습니다.
하위선택자와 다른점은 상속이 되질 않는다는것입니다.
<style type="text/css">
.parent > p {color:red;}
</style>
<div class="parent">
<p>자식선택자</p> <- 이곳에만 적용이 되겠죠
<div>
<p 하위선택자</p>
</div>
</div>
3) 인접 선택자
같은레벨에서의 요소중에 첫번째요소 + 두번째요소 라고 생각하시면됩니다.
<style type="text/css">
h1 + h2 {color:gray;} : h2요소에 적용됩니다.
</style>
<h1>첫번째요소</h1>
<h2>두번째요소</h2> <- 이곳에만 적용이 되겠죠
<p></p>
<h2>세번째요소</h2>
<p></p>
h2가 같은레벨에 두군데가있지만, 첫번째요소와 인접한 요소에만 적용이되지요.
7. 선택자 그룹화
다수요소에 동일한 선언을 하고싶을때 콤마(,)로 구분하여 지정할수있지요
div>p, p.note {color:blue;} <- 두가지 다른요소에 색상을 파랑으로 한번에 지정해줄수있어요~
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 4 (2) | 2010/07/09 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
3) first-line, first-letter 가상요소
<style type="text/css">
body {font-size:12px;}
h2 {color:#666;}
.line p:first-line {font-size:12px; font-weight:bold; color:#44C4DF; width:100%;}
.letter p:first-letter {color:#E7963D; font-size:22px; text-indent:4em; font-weight:bold;}
</style>
문자 그대로 이해를 하시면 가장 편할듯 하네요.
first-line은 문단의 첫번째 줄에 적용이 되는 것 이구요,
fist-letter는 첫 글자에 스타일이 적용되는 것 입니다.
문제의 IE6에서도 적용이 되네요~
<h2>first-line 가상요소</h2>
<div class="line">
<h2>first-letter 가상요소</h2>
<div class="letter">
4) before, after가상요소
<style type="text/css">
body {font-size:15px; line-height:150%;}
.cnt p:before {content:"노래시작" ; color:red;}
.cnt p:after {content:"노래끝" ; color:red;}
</style>
<div class="cnt">
<p>옛날에 금잔디 동산에 메기 같이 앉아서 놀던곳 물레방아 소리 들린다 메기야 내 희미한 옛생각 동산 수풀은 우거지고 장미꽃은 피어 만발하였다
물레방아 소리 그쳤다 메기 내 사랑하는 메기야 지금 우리는 늙어지고 메기 머린 백발이 다 되었다 옛날에 노래를 부르자 메기 내 사랑하는 메기야</p>
</div>
문단의 처음과 끝에 가상컨텐츠가 적용되어있는것을 볼수있습니다.
IE6,7은 안되고 IE8부터 인식합니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 4 (2) | 2010/07/09 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
1) first-child가상 클래스
<style type="text/css">
.lyrics {font-size:12px; font-weight:bold; color:#44C4DF; width:500px;}
.lyrics p:first-child{color:#E7963D; font-size:15px; text-indent:1em;}
</style>
lyrics클래스의 자식요소중에 첫 번째 p요소에만 속성이 적용됩니다.
익스6이하버전에선 안되구요.
적절히 쓰면 불필요한 클래스를 사용하지않아도 되는 방법이죠~
<div class="lyrics">
<p>옛날의 금잔디 동산에 메기같이 앉아서 놀던 곳 물레방아 소리 들린다 메기야 희미한 옛생각</p>
<p>동산 수풀은 우거지고 장미화는 피어 만발 하였다 물레방아 소리 그쳤다 메기</p>
</div>
2) 링크 가상 클래스
이 부분은 많이들 쓰는것이니 간단히 정의만 보겠습니다.
<style type="text/css">
.a {text-decoration:none;
a:link {color:blue;} ->방문하지않은 링크
a:visited {color:pink;} ->방문한 링크
a:hover {color:orange;} -> 링크위에 마우스를 올렸을 때
a:active {color:red;} -> 활성화 된 링크
a:focus {background-color:#ffc;} -> 링크위에 포커스 되었을때(키보드 사용자에게 유용한기능입니당.)</style>
선언 순서에 유의해야합니다. link -> visited -> hover -> active -> focus 순으로 지정합니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 4 (2) | 2010/07/09 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
분류해놓으니 오히려 공부할게 생긴듯한 느낌이 드나, 모든 브라우저에서 다 먹이는게 아니다보니(역시 ie가 문제종) 사실 이중에서 지겹게 쓰는건 3~4가지 정도... 하지만, 유용한 기능이 많다보니 알고나 넘어가자는 의미에서~ 분명 언젠가는 모든 브라우저에서 사용할수 있겠죠?
2. 전체 선택자
3. CLASS선택자와 ID선택자 (중요)
4. 속성(Attribute)선택자
5. 가상요소와 가상클래스
1) first-child가상 클래스
2) 링크 가상 클래스
3) first-line, first-letter 가상요소
4) before, after 가상요소
6. 선택자 조합
1) 하위 선택자 (중요)
2) 자식 선택자
3) 인접 선택자
7. 선택자 그룹화
xhtml요소(element)명을 선택자로 사용하는 것을 말합니다.
Type선택자, 요소선택자, 태그선택자 대략 같은말로 이해하심 됩니당.
형식은
요소명 {속성 : 값;} = p {color:red;} = h1 {font-size:20px;}
위와같이 xhtml 모든요소는 선택자로 사용할 수 있습니다.
2. 전체 선택자
선택자에 아스테리스크(*)를 기술하여 모든 요소에 스타일을 지정되게하는것입니다.
모든요소에 적용되는 것인만큼 변동사항이 없을때 쓰면되지만, 로딩속도가 쫌 저하된다고하네욤.
형식은
요소명 {속성 : 값;} = * {margin:0; padding;0;}
3. CLASS선택자와 ID선택자 (중요)
xhtml요소에 class 혹은 id값이 부여된 경우 해당 요소로 바로접근이 가능하지요.
id선택자는 유일한 요소에 접근할때 쓰고, #으로 id값을 나타내조 (#name)
class선택자는 여러번 사용이 가능하고, 여러요소를 한꺼번에 선택하여 일관된 스타일을 지정할때 유용합니다.
.클래스명 (.name)
<style type="text/css">
p.note {color:blue;} = .note {color:blue;}
</style>
<p class="sample">요소(p)를 생략하고 바로 클래스명(.sample)을 써도 됩니다용.</p>
유용하고도 중요한 기능이나 크게 어려운건 없죠~
4. 속성(Attribute)선택자
어떤 표현을 위해 구지 더미태크를 쓰지않고도 표현할 수 있다는 점에서 유용한듯합니다.
하지만, 이 방식은 ie6과 기타 구버전 브라우저에서 지원을 하지않습니다.
요소명[속성명="속성값"] {속성 : 값;}
a[href^="http"] {background-color:red;}
<style type="text/css">
a[href^="http://"] {font-size:22px;}
</style>
a 요소 중에 href 속성의 값이 "http://"로 시작하는 요소만 font-size를 22px로 크게 보여달라는 뜻이예욤.
<ul>
<li><a href="#test.html">속성선택자 테스트</a></li>
<li><a href="http://www.css3.com/">속성선택자 테스트</a></li>
</ul>
위 게시글 중 아래글자만 22px로 커지겠죠.
나머지는 다음페이지로~
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
pt :points(포인트) - 1포인트는 0.72인치
px :pixels(픽셀) - 화면 해상도에 대한 상대크기
% : 퍼센티지 - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기
말로하면 복잡하죠?
아래 표를보면 한눈에 쫙~들어올겁니다.
| Pixels | EMs | Percent | Points |
|---|---|---|---|
| 6px | 0.375em | 37.5% | 5pt |
| 7px | 0.438em | 43.8% | 5pt |
| 8px | 0.5em | 50% | 6pt |
| 9px | 0.563em | 56.3% | 7pt |
| 10px | 0.625em | 62.5% | 8pt |
| 11px | 0.688em | 68.8% | 8pt |
| 12px | 0.75em | 75% | 9pt |
| 13px | 0.813em | 81.3% | 10pt |
| 14px | 0.875em | 87.5% | 11pt |
| 15px | 0.938em | 93.8% | 11pt |
| 16px | 1em | 100% | 12pt |
| 17px | 1.063em | 106.3% | 13pt |
| 18px | 1.125em | 112.5% | 14pt |
| 19px | 1.188em | 118.8% | 14pt |
| 20px | 1.25em | 125% | 15pt |
| 21px | 1.313em | 131.3% | 16pt |
| 22px | 1.375em | 137.5% | 17pt |
| 23px | 1.438em | 143.8% | 17pt |
| 24px | 1.5em | 150% | 18pt |
1em은 16px 이고, 우리가 많이 쓰는 12px은 0.75em 이되죠.
부모 요소에 적용한 스타일이 자식 요소에 계속되는 것을 상속(inherit)라고 합니다. 상속된 값이 "%"나 "em" 등의 상대단위인 때는 일반적으로 부모 요소의 값에 자식 요소의 값을 더한 값이 적용됩니다.
body { font-size:62.5%; color:green;}
div { font-size:2em; }
p { font-size:1.5em; border : 1px solid red ; padding: 1em;}
</style>
<body>
<p>body의 62.5%의 폰트사이에서 p의 1.5em만큼 커진 폰트 사이즈입니다. </p>
<div>
<p>div의 2em사이즈를 한번 더 상속받은 이곳은 폰트가 위의 p태그보다 큽니다.</p>
</div>
</body>
em사이즈를 사용할땐 상속받는 값을 생각하며 계산을 해야해서 쬐끔 복잡하다는 느낌이 들기도 합니다.
다음은 폰트 크기 계산을 도와주는 웹 사이트에요.
- em 단위 계산기: http://riddle.pl/emacalc
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
| DTD선언이란? (0) | 2010/04/12 |
웹페이지에 스타일시트를 연결하는 두가지 형식에 대해 알아보겠습니다.
1. 외부스타일시트
1) html을 이용한 스타일시트의 연결
<link rel="stylesheet" type="text/css" href="web2log.css" />
2) css를 이용한 스타일시트 연결
<style type="text/css">
@import url(web2log.css);
@import url(table.css);
</style>
- 여러개의 스타일시트 파일을 연결할수 있습니다.
- css조직화에 유용합니다.
- 두가지 방법중 취향에 맞게 골라쓰되, @import는 구형브라우저(Netscape Navigator 4)에서 인식못하므로 사이트가 이쁘게 보이진 않지만 정보접근을 못하는것은 아니므로 알아서 판단하셔서 쓰면 될듯 합니다.
2. 내부 스타일 시트
html <head>안에 <style></style>로 구성
<head>
<style type="text/css">
h1 {color:#ddd; font-size:25px;}
p {color:#333; font-size:12px;}
</style>
</head>
- <style>태그는 html이지 css가 아닙니다. 태그 내에 담긴 정보가 css라고 웹브라우저에게 알리는 역할을 합니다.
- 작성이 쉽고 간단하지만, 큰 사이트에는 적당하지 않습니다. 간단한 페이지 작업이 아닌이상 권장하는 방법은 아닙니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
| DTD선언이란? (0) | 2010/04/12 |
HTML과 XHTML의 차이점에 대해 알아보겠습니다.
예) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2. <html> 엘리먼트는 DOCTYPE 다음에 오는 맨 첫 번째 태그가 되어야 하며, </html> 종료 태그는 가장 마지막 태그가 되어야 합니다.
3. 모든 요소와 속성은 소문자로 작성되어야 합니다.
<HTML> X
<html> 0
<PRE> X
<pre> 0
4. 모든 시작 태그들은 종료 태그를 가져야 합니다. 또는 빈 엘리먼트의 경우 하나의 공백 문자와 /> 로 끝나야 합니다.
<p></p>
<br/>
<hr/>
<img src="경로" alt="이미지" />
<tr><td></td></tr>
5. 속성 ‘값’들은 큰 따옴표로 감싸주고, 값을 가져야 합니다.
<p align=center>로 하면 안되고 <p align="center">와 같이 반드시 따옴표를 사용해야 합니다.
6. 속성과 값의 단축표기를 허용하지 않습니다.
HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않는다. <input checked> 는 <input checked="checked"> 와 같이 표기되어야 한다.
7. HTML 콘텐츠에 &를 사용하지 않고 &를 사용합니다. 다른 특수문자들도 엔티티로 변환합니다. (참고: Character Entity)
8. a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않습니다.
id 와 name 을 함께 사용하던 마크업의 name 속성은 모두 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.0 Transitional 버전의 문서까지는 지원하고 있다. 하지만 XHTML 1.0 Strict 버전에서 지원하지 않으며 다음 버전에서는 분명히 폐기된다.
※ 마지막으로 XHTML의 필요성(?) 에 대해 이야기하자면 일단 문법적으로 엄격해진걸 볼 수 있는데요. 이런 엄격함으로 인해 보다 다양한 브라우저에서 정확하게 문서가 표시가 될 수 있다는 장점이 있습니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
| DTD선언이란? (0) | 2010/04/12 |
DTD선언이란? html문서 최상단에 선언되는 DOCTYPE은 문서의 종류를 정의해주는 선언문입니다. (DTD:doc-ument Type Definition)
DTD가 정의되지 않은 문서를 Quirks Mode라 부르는데, Quirks Mode에선 브라우저마다 제각각 랜더링되기 때문에 브라우저 호환성을 기대하기 어렵습니다.
만약에DOCTYPE 선언하지 않는다면 브라우저는 현재 페이지가 어떠한 HTML 버전을 사용하고 있는지 인식할 수 없기 때문에 호환모드(quirks mode)로 변환을 해서 rendering(화면구현)하게 됩니다.
브라우저가 알아서 호환모드로 변환하여 rendering하는 것은 마크업과 스타일시트의 조합으로 멋진 사이트를 제작했다 하더라도 호환모드로 rendering한 브라우저는 매번 똑같은 화면묘사를 보여준다는 보장을 할 수 없기때문에 사용자에게 큰 혼란을 가져다 줄 수도 있습니다.
DOCTYPE은 문서의 목적이나 구조에 따라 필요한 종류를 선언할 수 있습니다.
그 종류에는 엄격한 문법과 구조를 요구하는 strict 버전과
구버전의 속성이나 Tag를 허용하는 transitional 버전
그리고 frame 을 이용해 제작하는 페이지를 위한 frameset 버전이 있습니다.
DTD의 종류는 아래와 같습니다.
| HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org Transitional (권장) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www. Transitional (권장) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://w |
transitional을 권장하는 이유는 strict모두에선 새창 띄우기 같은 사용자에게 익숙한 이벤트를 사용할 수 없기 때문에 호환성이 좋은 transitional 모두를 권장합니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
| DTD선언이란? (0) | 2010/04/12 |
