선택자 총정리

이제 막 웹 제작을 배우는 입장에서 원하는 위치에 요소가 오지 않을 때 점검해보면 다음과 같았다.

1. width, height값이 잘못됨

2. position이 부모와의 관계를 고려하지 않음

3. 선택자를 잘못 지정

여러 웹들을 참고해서 만들다보니 내가 쓰는 선택자들임에도 네이밍이 일관적이지 않고,

가독성이 떨어져서 선택자에 대한 정리를 찾아보다가 너무 유용한 동영상을 발견했다.

 

웹디자인&퍼블리셔를 위한 선택자 총정리

 

요즘 공부하면서 계속해서 느끼는데, 양질의 컨텐츠가 무료로 정말 많이 풀려 있는데

비교적 진입장벽이 있는 분야다보니까(?)  컨텐츠 퀄리티에 비해 조회수나 구독수가 몇 안돼서 매번 놀라고 있다.

여튼 이런 자료 공유해주시는 분들 정말 고맙다.

 

---

 

유형 선택자(Type Selector)

태그에 직접적으로 주는선택자로, 해당 이름을 가진 모든 태그를 선택하게 되므로 다음과 같은 레이아웃 요소에만 제한적으로 사용해야 함

header | nav | section | article | aside | footer

 

 

전체 선택자(Universal Selector)

*{  padding:0; margin:0; }

문서 전체 요소에 스타일 적용

각 브라우저마다 초기 스타일(padding, margin)을 가지기 때문에 이를 초기화하기 위해 주로 사용

 

 

아이디 선택자 (ID Selector)

#id_name{ }

하나의 요소에 하나의 아이디를 중복되지 않게 부여해야 함, 제작 컨텐츠에 맞게 아이디 이름을 생성

 

 

클래스 선택자(Class Selector)

.class_name{}

다른 요소에 같은 클래스 적용 가능

요소에 적용하고 싶은 클래스가 두 개 이상일 때 띄어쓰기로 구분지어 활용 가능

<div class = "box border-gray"> ... </div> <div class = "box"> ... </div>

.box { width:300px; margin-bottom:10px; } .border-gray { border:1px solid #ccc; }

 

---

 

자식 선택자(Child Combinator)

element > element

바로 아래 자식 요소만 선택

최상위 div가 div_box라는 클래스를 가질 때,

그 아래 div 요소들을 선택하기 위해

class를 하나하나 부여할 수도 있지만,

 

div.div_box > div { }로 자식 선택자 >를 사용하면

바로 아래 자식 요소(3개의 div)를 선택할 수 있다

 

코드의 가독성을 높여준다

 

 

---

 

 

자손 선택자(Descendant Combinator)

element element

모든 하위 요소들 중 선택 

 

.div_box p { }

.div_box .list_ul .con li {}

공백으로 구분

 

 

---

 

 

인접(형제) 선택자(Adjacent Sibling Combinator)

element + element

요소끼리 붙어있어 바로 다음 요소를 선택할 때 사용

인풋 다음요소인 label을 선택하기 위해 많이 사용

 

 

	input + label {} .div_box + p { }

 

---

일반(형제) 선택자(General Sibling Combinator)

element ~ element

div ~ p {  }

.div_box > div { } : 자식선택자(>)가 div_box 안에 있는 div 요소를 선택한다면,

.div_box ~ div { } : 일반선택자(~)는 div_box 다음에 있는 div요소가 존재할 때 선택

 

 

<style>

.container { width:800px; margin:0 auto;}  //800 너비의 가운데 정렬 container

.div_box { font-size:0; width:100%; } //세개의 div 요소를 감싸줄 div_box, font-size:0으로 한다

.div_box > div { display:inline-block; font-size:12px; width:33.3%; vertical-align:top; }

//세개의 요소가 부모 요소인 div_box에 꽉차게 들어가게 inline-block + 너비값을 지정한다.

//수직 정렬:top은 부모요소에 inline 혹은 inline-block요소들을 상대적으로 정렬할 때 위에서부터 정렬

//사실 vertical-align은 대충 아는 속성이라 생각대로 작동하지 않을때가 많아 해당 링크 참고

.div_box ~ div { border:1px solid #000; } //div_box 다음에 오는 두 개의 div에 대해 테두리 적용

div.imgbox { text-align:center; } //자식 요소(이미지, 텍스트) 가운데 정렬

div.imgbox > div { max-width:300px; margin:0 auto; }

//imgbox의 자식요소들은 부모의 크기를 따라가기 마련인데, 최대 너비를 지정함

div.imgbox img { width:100% }  //img는 부모인 imgbox 그대로

 

 

 

---

속성 선택자(Attribute Selectors)

속성이란, 요소에 추가적으로 붙는 모든 것 <a href>에서 href는 속성, id, class 모두 속성에 해당한다.

 

가장 많이 사용하는 4가지 속성 선택자

element[attr="value"] { } 

기본

a[href="http//google.com"]

 

element[attr^="value"] { }

"http"로 시작하는 값을 속성으로 가지는 요소에만 적용

a[href^="http"] { ... }

 

element[attr$="value"] { }

a[href$=".pdf"] {  ... }".pdf"로 끝나는 값을 속성으로 가지는 요소에만 적용

 

element[attr* = "value"] { }

a[href*="naver"]{ ... }

"naver"를 포함하는 값을 속성으로 가지는 요소에만 적용

 

 

 

---

구조적 가상요소 선택자(Structural pseudo-classes)

 

① :first-child | :last-child

맨 처음이나 마지막에 위치한 요소 혹은 클래스를 선택

div.box div:first-child { ... } div.box안에 있는 자식 요소 div중 첫번째 요소에만 적용

div.box .item:first-child { ... } div.box안에 있는 자식 클래스(.item) 중 첫번째 클래스에만 적용

 

② :nth-child(n)

n번째 요소를 직접 선택 | 숫자 입력시 직접 선택 | 2n : 2의 배수 | even : 짝수 | odd : 홀수

 

 

 

 

<style>

* { margin:0; padding:0; }

 

.child-ul { font-size:0; width:850px; border:1px solid #ccc;}

.child-ul : after { content:''; clear:both; display:block; float:none;}

.child-ul li {float:right; display:block; width:33.3%; font-size:12px; }

.child-ul li : nth-child(2) { width:66.6% }

.child-ul li : nth-child(2) a { height:310px;}

.child-ul li: nth-child(3) a { height:310px; margin-top:-155px;}

.child-ul li a {display:block; width:auto; margin:5px; background:#ccc; height:150px; transition:1s;}

.child-ul li:nth-child(1) a {background:url('child_01.jpg') center center / 100% no-repeat;}

... 중략 ....

child-ul li:nth-child(5) a {background:url('child_01.jpg') center center / 100% no-repeat;}

.child-ul li a:hover {background-size:110%;}

.child-ul li:nth-child(3) a :hover {background-size: 210%;}

</style>

<ul class="child-ul">

<li><a href='#'></a></li> ...후략(반복) </ul>