CSS Selector에 대해 알아봅시다~ [응용편 #2]
페이지 정보
작성자 서방님 댓글 0건 조회 72회 작성일 07-06-23 11:07본문
다른 응용방법, 자기 자신에 대한 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;
이런식으로 선언을 할 수 있겠죠.
댓글목록
등록된 댓글이 없습니다.
