CSS Selector에 대해 알아봅시다~ [응용편 #1]
페이지 정보
작성자 서방님 댓글 0건 조회 95회 작성일 07-06-23 11:05본문
이번편은 CSS Selector(이하 선택자)의 응용편을 포스팅하도록 하겠습니다.
초급편에서는 대표적인 선택자의 종류에 대해서 배웠는데,
이 선택자를 유용하고 세세하게 쓰기 위해, 정확한 선택을 하기 위한 방법에 대해 알아 보겠습니다.
먼저 하위에 있는것을 선택하는 방법을 보겠습니다.
일반적으로 코딩을 할때
이런식으로 코딩을 많이 합니다.
그런데 작업을 하다보니, 디쟈인이 변경되었는데
#sidebar > .list 의 글 색깔이 틀리고, 볼드체가 되며, 뷸렛이미지가 추가 되었다고 가정을 하겠습니다.
그렇다면 여러분은 어떻게 하시겠습니까?
방법은 여러가지가 있습니다.
후자의 경우를 이용하면 HTML 을 수정하지않고, 간단하게 CSS만 수정함으로써 일을 마무리 할 수 있습니다.
먼저 선자의 방법으로 한다면..
이렇게 되겠죠?
HTML 에서는 list 였던 class명을 sidebarList로 변경이 되었습니다.
그에 맞춰서 CSS도 추가가 되었습니다.
list였을때의 성격을 그대로 유지하기 위해, list와 똑같은 CSS를 선언해주고 CSS와 background를 주었습니다.
후자의 경우로 한다면, HTML코드는 손대지 않고 CSS만 손대게 되겠죠.
이렇게 하면 끝입니다.
이 코드에서 눈여겨 봐야 할 점은 #sidebar .list 입니다.
(지난 초급편을 보셨다면 #sidebar 와 .list가 어떤건지는 아시겠죠..?)
코드가 직관적이기 때문에, 눈치 없으신분들도 이미 다 눈치 채셨겠지만 ㅎㅎ, 설명을 해드리자면
sidebar 라는 id 아래에 list 라는 class를 1Space(공백 즉 " ")으로 선택하는 것이지요.
이걸 "Descendant selector" 즉 "하위 선택자" 라고 합니다
아, 잡설이 길었군요..
이것과 비슷한 기능을 하는 > 와 + 이 있습니다.
> 는 "Child selector" 즉 "자식 선택자" 라고 하며,
+ 는 "Adjacent sibling selector" 즉 "인접 형제 선택자"(???) 라고 합니다.
하지만, 이 선택자들은 브라우져들이 지원을 안하는 경우가 다반사 이고, 하위 선택자로 거의 해결이 가능하기때문에 잘 쓰지 않기때문에 언급하지 않겠습니다.
자세한 정보를 원하시는 분은, w3c의 자식 선택자, 인접 형제 선택자 를 확인해 보시길 바랍니다.
초급편에서는 대표적인 선택자의 종류에 대해서 배웠는데,
이 선택자를 유용하고 세세하게 쓰기 위해, 정확한 선택을 하기 위한 방법에 대해 알아 보겠습니다.
먼저 하위에 있는것을 선택하는 방법을 보겠습니다.
일반적으로 코딩을 할때
<div id="body">
<div id="content">
<div id="sidebar">
</div><ul class="list">
</div><li>1</li>
<li>2</li>
<li>3</li>
</ul><li>2</li>
<li>3</li>
<div id="sidebar">
<ul class="list">
<li>a</li>
<li>b</li>
<li>c</li>
<li>b</li>
<li>c</li>
</ul>
</div>.list {
list-style:none;
margin-left:20px;
}margin-left:20px;
이런식으로 코딩을 많이 합니다.
그런데 작업을 하다보니, 디쟈인이 변경되었는데
#sidebar > .list 의 글 색깔이 틀리고, 볼드체가 되며, 뷸렛이미지가 추가 되었다고 가정을 하겠습니다.
그렇다면 여러분은 어떻게 하시겠습니까?
방법은 여러가지가 있습니다.
- #sidebar > .list 를 다른 class 혹은 id 로 정의하고, 새로운 CSS를 생성한다.
- CSS에서 저놈만 콕 찍어내서 CSS를 생성한다.
후자의 경우를 이용하면 HTML 을 수정하지않고, 간단하게 CSS만 수정함으로써 일을 마무리 할 수 있습니다.
먼저 선자의 방법으로 한다면..
<div id="body">
<div id="content">
<div id="sidebar">
</body><ul class="list">
</div><li>1</li>
<li>2</li>
<li>3</li>
</ul><li>2</li>
<li>3</li>
<div id="sidebar">
<ul class="sidebarList">
<li>a</li>
<li>b</li>
<li>c</li>
<li>b</li>
<li>c</li>
</ul>
</div>.list {
.sidebarList {
list-style:none;
margin-left:20px;
}margin-left:20px;
.sidebarList {
list-style:none;
margin-left:20px;
margin-left:20px;
color:red;
font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
}font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
이렇게 되겠죠?
HTML 에서는 list 였던 class명을 sidebarList로 변경이 되었습니다.
그에 맞춰서 CSS도 추가가 되었습니다.
list였을때의 성격을 그대로 유지하기 위해, list와 똑같은 CSS를 선언해주고 CSS와 background를 주었습니다.
후자의 경우로 한다면, HTML코드는 손대지 않고 CSS만 손대게 되겠죠.
.list {
#sidebar .list {
list-style:none;
margin-left:20px;
}margin-left:20px;
#sidebar .list {
color:red;
font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
}font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
이렇게 하면 끝입니다.
이 코드에서 눈여겨 봐야 할 점은 #sidebar .list 입니다.
(지난 초급편을 보셨다면 #sidebar 와 .list가 어떤건지는 아시겠죠..?)
코드가 직관적이기 때문에, 눈치 없으신분들도 이미 다 눈치 채셨겠지만 ㅎㅎ, 설명을 해드리자면
sidebar 라는 id 아래에 list 라는 class를 1Space(공백 즉 " ")으로 선택하는 것이지요.
이걸 "Descendant selector" 즉 "하위 선택자" 라고 합니다
HTML파일 손 안되도 되고, 새로이 추가되는 속성에 대해서만 정의해주면 끝이죠.!!!
어떻게 이런게 가능하느냐..!!
이게 바로 CSS의 놀라운 기능이니깐요..!
CSS를 풀면 Casecading Stype Sheet 이죠..!!
덮의쓰기..즉 overwrite개념이 아닌...포토샵에서 쓰는 Layer같은 개념인거죠..!!
저는 이걸 "걸린놈만 족쳐" 개념이라고 (우스갯소리) 생각합니다 ㅎㅎ
어떻게 이런게 가능하느냐..!!
이게 바로 CSS의 놀라운 기능이니깐요..!
CSS를 풀면 Casecading Stype Sheet 이죠..!!
덮의쓰기..즉 overwrite개념이 아닌...포토샵에서 쓰는 Layer같은 개념인거죠..!!
저는 이걸 "걸린놈만 족쳐" 개념이라고 (우스갯소리) 생각합니다 ㅎㅎ
아, 잡설이 길었군요..
이것과 비슷한 기능을 하는 > 와 + 이 있습니다.
> 는 "Child selector" 즉 "자식 선택자" 라고 하며,
+ 는 "Adjacent sibling selector" 즉 "인접 형제 선택자"(???) 라고 합니다.
하지만, 이 선택자들은 브라우져들이 지원을 안하는 경우가 다반사 이고, 하위 선택자로 거의 해결이 가능하기때문에 잘 쓰지 않기때문에 언급하지 않겠습니다.
자세한 정보를 원하시는 분은, w3c의 자식 선택자, 인접 형제 선택자 를 확인해 보시길 바랍니다.
댓글목록
등록된 댓글이 없습니다.
