CSS Selector에 대해 알아봅시다~ [응용편 #3]

마지막으로 여러 class를 선택하는 방법을 보시겠습니다.

<ol>

<li>a</li>
<li>b</li>
<li>c</li>

</ol>

ol {

list-style:none;
margin-left:20px;

}

이런 상황이었는데,
새로 올라온것은 볼드를, 인기있는것은 밑줄로 표시를 하고 이 두가지 모두인경우는 볼드, 밑줄 전부 주기로 하겠습니다.
우선 HTML을 수정해야 겠지요?

<ol>

<li>a</li>
<li>b</li>
<li>c</li>

</ol>

그리곤 각각에 맞는 CSS를 정의해야겠죠?

.new {

font-weight:bold;

}

.hot {

text-decoration:underline;

}

.good {

font-weight:bold;
text-decoration:underline;

}

자~, 이렇게 하면 우리가 원한대로 되네요..!
드디어 끝~!! 입니다.!!!

하지만, 이러면 왠지 섭섭한 느낌을 지울 수 없습니다
왠지 쓸대없는 코드를 만든것 같은 느낌이라고 해야 할까요..?
자..그럼 어떻게 해야 할까요..?
눈치빠르신 분은 이미 눈치 채셨겠지만..class를 다중으로 선택 할 수 있습니다.!!
CSS는 new 와 hot만 정의하면 됩니다.

.new {

font-weight:bold;

}

.hot {

text-decoration:underline;

}

그리고 HTML 은

<ol>

<li>a</li>
<li>b</li>
<li class=”new hot”>c</li>

</ol>

이렇게 class를 선언하면 됩니다.
2개 뿐만 아니라, 여러 다중으로 입력할 수 있습니다.
공백을 구분자로 class명을 기입하면 되지요!!

이로써 응용편은 끝이 났습니다.
어떤가요..? 재미 있으셨나요..?

제가 글재주가 없어, 다소 어렵게 설명되고..재미없는것 같아 안타갑지만..
실제로 코드들을 한번씩 해보신다면, 바로 이해하실 수 있으리라 생각됩니다.

부족한 글 읽느라 고생하셨습니다. ㅎㅎ

감사합니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중