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명을 기입하면 되지요!!

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

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

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

감사합니다.

광고

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

다른 응용방법, 자기 자신에 대한 class를 선택하는 방법(?)을 보시겠습니다.

<ul>

<li>1</li>
<li>2</li>
<li>3</li>

</ul>

<ol>

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

</ol>

 

.list {

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

}

디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.
이렇게 서비스를 하던 어느날, ol 의 list 의 색깔을 바꾸고 볼드체를 주도록 변경이 되었다고 하겠습니다.

그렇다면 위에서 배웠던 하위 선택자를 써서 해보겠습니다.

.list {

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

}

ol .list {

color:red;
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>

인거지

<ol>

<li class=”list”>a</li>
<li>b</li>
<li>c</li>

</ol>

이게 아니니깐요..
이해 하셨죠..? 못하셨다면. 위 예제코드를 한번 더 보시면 도움이 되실꺼에요.

자, 이런 경우는 어떻게 해야하나..

.list {

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

}

ol.list {

color:red;
font-weight:bold;

}

이렇게 하면 됩니다. 공백없이 붙여 쓰는것이지요
좀 더 응용을 하면.

.list {

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

}

ul.list
{

color:blue;
text-decoration:underline;

}

ol.list
{

color:red;
font-weight:bold;

}

이런식으로 선언을 할 수 있겠죠.

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

이번편은 CSS Selector(이하 선택자)의 응용편을 포스팅하도록 하겠습니다.
초급편에서는 대표적인 선택자의 종류에 대해서 배웠는데,
이 선택자를 유용하고 세세하게 쓰기 위해, 정확한 선택을 하기 위한 방법에 대해 알아 보겠습니다.

먼저 하위에 있는것을 선택하는 방법을 보겠습니다.

일반적으로 코딩을 할때

<div id=”body”>

<div id=”content”>

<ul>

<li>1</li>
<li>2</li>
<li>3</li>

</ul>

</div>
<div id=”sidebar”>

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

</div>

</div>

 

.list {

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

}

이런식으로 코딩을 많이 합니다.

그런데 작업을 하다보니, 디쟈인이 변경되었는데
#sidebar > .list 의 글 색깔이 틀리고, 볼드체가 되며, 뷸렛이미지가 추가 되었다고 가정을 하겠습니다.
그렇다면 여러분은 어떻게 하시겠습니까?
방법은 여러가지가 있습니다.

  1. #sidebar > .list 를 다른 class 혹은 id 로 정의하고, 새로운 CSS를 생성한다.
  2. CSS에서 저놈만 콕 찍어내서 CSS를 생성한다.

선자의 경우 HTML 을 수정하고, 그에 맞춰 CSS 수정작업을 해줘야 합니다만
후자의 경우를 이용하면 HTML 을 수정하지않고, 간단하게 CSS만 수정함으로써 일을 마무리 할 수 있습니다.

먼저 선자의 방법으로 한다면..

<div id=”body”>

<div id=”content”>

<ul>

<li>1</li>
<li>2</li>
<li>3</li>

</ul>

</div>
<div id=”sidebar”>

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

</div>

</body>

 

.list {

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

}

.sidebarList {

list-style:none;
margin-left:20px;
color:red;
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 {

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

}

#sidebar .list {

color:red;
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같은 개념인거죠..!!
저는 이걸 “걸린놈만 족쳐” 개념이라고 (우스갯소리) 생각합니다 ㅎㅎ

아, 잡설이 길었군요..
이것과 비슷한 기능을 하는 > 와 + 이 있습니다.
> 는 “Child selector” 즉 “자식 선택자” 라고 하며,
+ 는 “Adjacent sibling selector” 즉 “인접 형제 선택자“(???) 라고 합니다.
하지만, 이 선택자들은 브라우져들이 지원을 안하는 경우가 다반사 이고, 하위 선택자로 거의 해결이 가능하기때문에 잘 쓰지 않기때문에 언급하지 않겠습니다.
자세한 정보를 원하시는 분은, w3c의 자식 선택자인접 형제 선택자 를 확인해 보시길 바랍니다.

CSS Selector에 대해 알아봅시다~ [초급편]

CSS의 시작은 Selector로부터 한다고 말을 해도 과언이 아닙니다.
그 이유는 모두가 알고 있겠지만,
Selector 즉 선택자가 존재하지 않는다면 선언된 CSS가 어떤곳에 적용을 해야 할지 모르기때문이죠.
명령은 했지만, 누구에게 명령을 한건지 모르는것과 비슷하다고 해야 할까요..?
그리고 궁극적으로 CSS을 코딩할려면, Selector부터 코딩해야 하니깐요..ㅎㅎ

물런 inline-Style로 코딩을 한다면 Selector가 필요없을 지 도 모르겠지요.
하지만, 이런 코딩방식은 CSS의 장점을 제대로 활용못한 것이기 때문에, 개발단계 있을때 혹은 디버깅중일때, 즉 임기응변 용으로가 아니면 권고하고 싶지 않은 코딩방식입니다.

그럼 우선 Selector의 종류에 대해서 알아보겠습니다.
Selector는 크게 4종류로 나눌 수 있습니다..

  • 공통 선택자 (Universal Selector)
  • 타입 선택자 (Type Selector) 저는 개인적으로 태그 선택자 혹은 엘레먼트 선택자 라고 하는게 더 직관적이라고 생각합니다. ㅎㅎ
  • ID 선택자 (ID Selector)
  • Class 선택자 (Class Selector)

W3C에서 나온 Selector에는 종류가 훨신 많습니다만, 실제로

  • Type Selector
  • ID Selector
  • Class Selector

이 세가지가 선택자들의 Root 이기 때문입니다.

그래서 이번 포스팅인
초급에선, 대표적인 선택자들과 기본적 사용법에 대해서 알아보겠습니다.
중급에선, 선택자를 좀 더 응용하는 편으로 진행할 계획이며
고급에선, 가상 엘레먼트 접근에 대해 포스팅할 예정입니다.

1. 공통 선택자 (Universal Selector)
공통 선택자는 * 를 말하는 것입니다.
이 녀석이 하는일은, 이 녀석의 이름을 보면 아시겠지만..
모든것을 선택하는 것입니다. DOS 시절에서 쓰던 * 와 마찬가지죠.
정규표현식에서도 조금 틀리지만 비슷한 의미로 사용되죠 ㅎㅎ

간단한 예제를 들면

* {

margin:0px;
padding:0px;

}

이렇게 선언된 HTML 파일의 모든 엘레먼트들은(혹은 태그들은) margin:0px;padding:0px;border:0px;을 선언하게 되는겁니다.

보통, 위의 예제처럼 CSS 초기화할때 많이 사용합니다.
초기화하는 이유는, 크로스브라우징을 위해서 입니다~,
브라우져별로 기본적으로 주어지는 margin 과 padding 값이 틀리거든요..
(IE는 버젼마다 틀리다는 소문이..흠흠 ㅎㅎ)

2. 타입 선택자 (Type Selector)
타입 선택자….??? 이름만 봐선 이놈이 뭐하는 놈인지 모르겠군요..
그럼 어디한번 뭐하는 놈인지 한번 볼까요..?
우선 W3C에서는 뭐라 정의했나 함 보겠습니다.

type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.

흠….뭐라 하는지 아시는분 해석좀 해주세요 -ㅛ-;
아는 단어만 해석하면;;

type selector matches the name of a document language element type
타입 샐렉트는 문서언어 엘레먼트 타입의 이름과 매칭을 한다…

라는군요..뭐래는겨 ㅡ,.ㅡ
뭐라 말하는지 모르겠군요..

그럼 코드를 한번 볼까요?

p {

font-weight:bold;
color:blue;
border:1px dashed red;
background-color:yellow;
}

span {

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

}

이해하셨나요?
문서언어는 HTLM을 말하는것이고
엘레먼트 타입은, HTML 태그를 말하는 것이고
이름은, 태그의 명칭을 말하는 것이죠
즉, p, h1, div, span, table, ul, ol, li, form, legend, fieldset 같은 HTML 태그를 선택하는 선택자 인것이죠.

그래서, 제가 엘레먼트 선택자 혹은 태그 선택자라고 하는게 더 직관적이라고 한거에요 ㅎㅎ

타입 선택자의 사용방법은 위의 예제코드에서 보셨겠지만. 해당되는 태그를 지시어 없이 HTML 태그의 명칭만 선언해주면 됩니다.
간단하죠~?

3. ID 선택자 (ID Selector)
ID 선택자.., 오 이 녀석은 이름만 봐도 뭐하는 놈인지 대충 알 것 같죠?
이런식으로 네이밍 해주면 얼마나 좋아~, 타입 선택자가 모야. ;p

JS를 위해서 엘레먼트에 id 라는 애트리뷰트를 쓰지만, CSS에서도 엄청나게 많이 쓰입니다.

id 애트리뷰트의 롤은

  • CSS 선택자로
  • JS 선택자로
  • 앵커로

입니다~

JS에서는

getElementById(‘SomeElement_ID’);
혹은 prototype이라면
$(‘SomeElement_ID’)

이런식으로 엘레먼트 ID를 이용해, 엘레먼트에 접근을 하죠.
CSS 에서는 # 라는 지시어를 사용합니다.

#SomeElement_ID {

border:1px solid pink;
margin-left:20px;
padding-top:5px;

}

이런식으로 사용을 합니다.

id 라는 애트리뷰트의 값은, document 안에서 유일해야 합니다.
즉, 동일한 id값이 하나의 HTML 문서에 있으면 안된다는거죠.
쉽게 말하면, unique 아이템~? ㅎㅎ

4.Class 선택자 (Class Selector)
자, 이번 포스팅의 마지막챕터까지 왔군요.
Class 선택자.. 이 녀셕도 ID 선택자처럼 이름을 보면 딱 아시겠죠?

class 라는 애트리뷰트는 CSS를 위해 존재하는 애트리뷰트라고 보시면 됩니다.
(물런, 개발자가 어떠한 목적을 가지고도 쓸 수 있죠.)

id와 달리 이녀석은 중복선언되어도 괜찮습니다. CSS를 위해 존재하는 애트리뷰트인데 중복선언이 안되다면, 그 수많은 CSS를 코딩할 생각만 해도..;;;

이 녀석의 지시어는 . 입니다.

.someElement_Class {

color:skyblue;
text-align:center;
vertical-align:middle;
padding-top:5px;

}

이런식으로 사용이 되지요

자, CSS Selector에 대해 알아봅시다~ [초급편]은 끝이 났습니다.
다음편은 예고한대로, 선택자사용 응용편으로 찾아뵙겠습니다~
(하지만, 언제 포스팅될지 모른다는거~)