2007/02/13 12:16
CSS Selector에 대해 알아봅시다~ [응용편 #2] 웹표준/접근2007/02/13 12:16
다른 응용방법, 자기 자신에 대한 class를 선택하는 방법(?)을 보시겠습니다.
디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.
이렇게 서비스를 하던 어느날, ol 의 list 의 색깔을 바꾸고 볼드체를 주도록 변경이 되었다고 하겠습니다.
그렇다면 위에서 배웠던 하위 선택자를 써서 해보겠습니다.
헙..!! 그런데 이렇게 하니깐 안됩니다..ㅠ,.ㅠ
이유를 아시는 분 계시나요..?
그럼 여기서 잠깐 30초에서 1분동안 왜 안될지 생각을 해 봅시다..!!
30초에서 1분동안 생각해보셨나요..?
어떤가요? 답이 나오셨나요..?
혹시나, 바로 스크롤을 내리신건 아니시죠...오~~~~???
정답은 바로...!!!
이 녀석은 ol 의 하위에 있는 녀석이 아니기 때문입니다.
즉 무슨말이냐 하면. ol 밑에있는 li 라면 하위선택자로 선택을 해야겠지만..
이 ol은 자기 자신이기 때문입니다.
무슨 말인지 이해 하셨나요..?
list라는 class가 li에 있는게 아니고, ol 자신에게 선언된것이란거죠..
아직 아리송 하시다고요..? 일단 코드 보시죠..
인거지
이게 아니니깐요..
이해 하셨죠..? 못하셨다면. 위 예제코드를 한번 더 보시면 도움이 되실꺼에요.
자, 이런 경우는 어떻게 해야하나..
이렇게 하면 됩니다. 공백없이 붙여 쓰는것이지요
좀 더 응용을 하면.
이런식으로 선언을 할 수 있겠죠.
<ul class="list">
<ol class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul><li>2</li>
<li>3</li>
<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol><li>b</li>
<li>c</li>
.list {
list-style:none;
margin-left:20px;
}margin-left:20px;
디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.
이렇게 서비스를 하던 어느날, ol 의 list 의 색깔을 바꾸고 볼드체를 주도록 변경이 되었다고 하겠습니다.
그렇다면 위에서 배웠던 하위 선택자를 써서 해보겠습니다.
.list {
ol .list {
list-style:none;
margin-left:20px;
}margin-left:20px;
ol .list {
color:red;
font-weight:bold;
}font-weight:bold;
헙..!! 그런데 이렇게 하니깐 안됩니다..ㅠ,.ㅠ
이유를 아시는 분 계시나요..?
그럼 여기서 잠깐 30초에서 1분동안 왜 안될지 생각을 해 봅시다..!!
30초에서 1분동안 생각해보셨나요..?
어떤가요? 답이 나오셨나요..?
혹시나, 바로 스크롤을 내리신건 아니시죠...오~~~~???
정답은 바로...!!!
이 녀석은 ol 의 하위에 있는 녀석이 아니기 때문입니다.
즉 무슨말이냐 하면. ol 밑에있는 li 라면 하위선택자로 선택을 해야겠지만..
이 ol은 자기 자신이기 때문입니다.
무슨 말인지 이해 하셨나요..?
list라는 class가 li에 있는게 아니고, ol 자신에게 선언된것이란거죠..
아직 아리송 하시다고요..? 일단 코드 보시죠..
<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol><li>b</li>
<li>c</li>
인거지
<ol>
<li class="list">a</li>
<li>b</li>
<li>c</li>
</ol><li>b</li>
<li>c</li>
이게 아니니깐요..
이해 하셨죠..? 못하셨다면. 위 예제코드를 한번 더 보시면 도움이 되실꺼에요.
자, 이런 경우는 어떻게 해야하나..
.list {
ol.list {
list-style:none;
margin-left:20px;
}margin-left:20px;
ol.list {
color:red;
font-weight:bold;
}font-weight:bold;
이렇게 하면 됩니다. 공백없이 붙여 쓰는것이지요
좀 더 응용을 하면.
.list {
ul.list
{
ol.list
{
list-style:none;
margin-left:20px;
}margin-left:20px;
ul.list
{
color:blue;
text-decoration:underline;
}ol.list
{
color:red;
font-weight:bold;
}font-weight:bold;
이런식으로 선언을 할 수 있겠죠.
'웹표준/접근' 카테고리의 다른 글
| 시각장애인들「대법원 두고보자」 (0) | 2007/03/21 |
|---|---|
| CSS Selector에 대해 알아봅시다~ [응용편 #3] (4) | 2007/02/14 |
| CSS Selector에 대해 알아봅시다~ [응용편 #2] (0) | 2007/02/13 |
| CSS Selector에 대해 알아봅시다~ [응용편 #1] (2) | 2007/02/09 |
| KWAG 7th 워크샵 (2) | 2007/02/08 |
| CSS Selector에 대해 알아봅시다~ [초급편] (6) | 2007/02/07 |
