2007/02/14 11:43
CSS Selector에 대해 알아봅시다~ [응용편 #3] 웹표준/접근2007/02/14 11:43
마지막으로 여러 class를 선택하는 방법을 보시겠습니다.
이런 상황이었는데,
새로 올라온것은 볼드를, 인기있는것은 밑줄로 표시를 하고 이 두가지 모두인경우는 볼드, 밑줄 전부 주기로 하겠습니다.
우선 HTML을 수정해야 겠지요?
그리곤 각각에 맞는 CSS를 정의해야겠죠?
자~, 이렇게 하면 우리가 원한대로 되네요..!
드디어 끝~!! 입니다.!!!
하지만, 이러면 왠지 섭섭한 느낌을 지울 수 없습니다
왠지 쓸대없는 코드를 만든것 같은 느낌이라고 해야 할까요..?
자..그럼 어떻게 해야 할까요..?
눈치빠르신 분은 이미 눈치 채셨겠지만..class를 다중으로 선택 할 수 있습니다.!!
CSS는 new 와 hot만 정의하면 됩니다.
그리고 HTML 은
이렇게 class를 선언하면 됩니다.
2개 뿐만 아니라, 여러 다중으로 입력할 수 있습니다.
공백을 구분자로 class명을 기입하면 되지요!!
이로써 응용편은 끝이 났습니다.
어떤가요..? 재미 있으셨나요..?
제가 글재주가 없어, 다소 어렵게 설명되고..재미없는것 같아 안타갑지만..
실제로 코드들을 한번씩 해보신다면, 바로 이해하실 수 있으리라 생각됩니다.
부족한 글 읽느라 고생하셨습니다. ㅎㅎ
감사합니다.
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol><li>b</li>
<li>c</li>
ol {
list-style:none;
margin-left:20px;
}margin-left:20px;
이런 상황이었는데,
새로 올라온것은 볼드를, 인기있는것은 밑줄로 표시를 하고 이 두가지 모두인경우는 볼드, 밑줄 전부 주기로 하겠습니다.
우선 HTML을 수정해야 겠지요?
<ol>
<li class="new">a</li>
<li class="hot">b</li>
<li class="good">c</li>
</ol><li class="hot">b</li>
<li class="good">c</li>
그리곤 각각에 맞는 CSS를 정의해야겠죠?
.new {
.hot {
.good {
font-weight:bold;
}.hot {
text-decoration:underline;
}.good {
font-weight:bold;
text-decoration:underline;
}text-decoration:underline;
자~, 이렇게 하면 우리가 원한대로 되네요..!
드디어 끝~!! 입니다.!!!
하지만, 이러면 왠지 섭섭한 느낌을 지울 수 없습니다
왠지 쓸대없는 코드를 만든것 같은 느낌이라고 해야 할까요..?
자..그럼 어떻게 해야 할까요..?
눈치빠르신 분은 이미 눈치 채셨겠지만..class를 다중으로 선택 할 수 있습니다.!!
CSS는 new 와 hot만 정의하면 됩니다.
.new {
.hot {
font-weight:bold;
}.hot {
text-decoration:underline;
}그리고 HTML 은
<ol>
<li class="new">a</li>
<li class="hot">b</li>
<li class="new hot">c</li>
</ol><li class="hot">b</li>
<li class="new hot">c</li>
이렇게 class를 선언하면 됩니다.
2개 뿐만 아니라, 여러 다중으로 입력할 수 있습니다.
공백을 구분자로 class명을 기입하면 되지요!!
이로써 응용편은 끝이 났습니다.
어떤가요..? 재미 있으셨나요..?
제가 글재주가 없어, 다소 어렵게 설명되고..재미없는것 같아 안타갑지만..
실제로 코드들을 한번씩 해보신다면, 바로 이해하실 수 있으리라 생각됩니다.
부족한 글 읽느라 고생하셨습니다. ㅎㅎ
감사합니다.
'웹표준/접근' 카테고리의 다른 글
| 선입견 (0) | 2007/03/22 |
|---|---|
| 시각장애인들「대법원 두고보자」 (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 |
