섹션7: 선택자
Selector
선택자
스타일을 적용할 요소를 선택하는 몇가지 방법
Element Selector
Class Selector
ID Selector
Descendent Selector
CSS Specificity: 우선순위
selector {
property: value;
}selector: 선택자. 적용할 대상을 선택하는 것.
Universal selector : 전부다 선택하기
* {
color: black;
}Element selector : 요소 선택자
img {
width: 100px;
height: 200px;
}이미지, 버튼 등 요소를 선택
Seletor List: 여러개 선택
h1,h2 {
color: magenta;
}h1과 h2 둘다 적용
ID Selector
<label for="search">Search</label>
<input type="text" id="search">id는 label과 input을 연결할 뿐 아니라 CSS의 모든 요소에 훅을 제공한다. CSS가 하나의 요소를 뽑아내도록 하는 것.
특정 부분만 골라서 CSS 적용할 수 있다.
id는 띄어쓰기가 없어야하고 짧으면서 의미가 담겨있어야한다.
#search {
color: orange;
}css파일에서는 이렇게 #뒤에 id를 써서 id selector를 표현한다.
하나의 id는 페이지 내에 한번만 나와야한다. id는 중복되면 안된다. 고유한 식별자여야 한다. id는 너무 많이 쓰면 안된다. 최소화하는게 좋다. 한 페이지에 열 개 이내로 쓴다.
Class Selector
클래스 선택자
클래스라는 훅을 만들어 선택. 클래스가 요소를 묶어 준다. 몇개의 그룹을 만들어 사용할 수 있다.
<span class="tag">dogs</span>
...
<span class="tag">cats</span>여러개의 요소에 class를 같은 걸 넣어서 그룹화하여 css 적용이 가능하다.
.tag {
background-color: white;
}‘tag’라는 클래스를 가진 모든 요소에 같은 css 적용한다.
클래스를 써서 요소들을 그룹으로 묶을때는 꼭 같은 유형이 아니어도 된다. <span> 끼리가 아닌 <a> 를 섞어도 된다.
클래스는 스티커 같은거다.
Descendant Selector
자손 선택자
li a {
color: teal;
}li 뒤에 한칸 띄우고 a 가 있다면 <li> 태그 안에 <a>태그를 선택함.
클래스 선택자와 섞어 쓸 수도 있다.
.post a {
color: white;
}post 클래스 밑에 있는 앵커 태그를 모두 선택.
꼭 post 바로 밑에 a가 있을 필요는 없다. post 밑에 ul이 있고 그 밑에 li가 있고 그 밑에 a가 있어도 저렇게 쓰면 전부 선택됨.
몇단계 밑에 있어도 자손 요소.
Adjacent Selector
인접 선택자. 결합자라고도 부른다.
<h1>...</h1>
<p>...</p>h1 + p {
color: red;
}h1 태그 다음에 오면서 같은 단계에 있는 p태그를 선택한다.
p가 h1 밑에 있는게 아니라 형제 개념.
Direct child
직계 자손 선택자
div > li {
color: white;
}div 태그 바로 밑에 있는 <li>를 선택. 한단계 아래만 선택하낟.
자주 쓰진 않음. 유용할 때가 있음.
Attribute Selector
속성 선택자. 특정 속성을 가진 요소를 선택함.
주로 <type> 속성에서 <input>요소와 함께 쓰인다.
input[type="text"] {
width: 300px;
color: yellow;
}type이 text인 모든 input을 선택한다.
section[class="post"] {
background-color: red;
}class가 post인 section을 모두 선택.
이렇게도 표현 가능함.
section.post {
background-color: red;
}post라는 class가 있는 section만 선택.
a[href*="google"] {
color: red;
}href 속성에 어디든 google 이 포함된 모든 앵커 태그.
a[href$=".org"] {
font-style: italic;
}href 속성이 .org 로 끝나야 함.
Pseudo Class
가상 클래스
선택자 끝에 붙여 상태를 특정하는 키워드
체크된 체크박스나 커서를 올려둔 요소 등을 선택할 수 있다.
a:hover {
color: red;
}앵커 태그 중 커서를 올려 두었을때 적용됨.
button:active {
color: red;
}버튼이 눌릴때 적용됨.
nth-of-type은 순서마다 적용되게 할 수 있음.
.post:nth-of-type(3n) {
background-color: white;
}post 클래스가 여러개 나열되어 있을때 3개 마다 백그라운드 컬러가 화이트로 적용됨.:
Pseudo Elements
가상 요소
h2::first-letter {
font-size: 50px;
}h2의 첫번째 글자만 폰트 사이즈 50으로.
first-line은 첫 단락.
콜론 두개 써야 되는데 한개만 써도 알아먹음. 가상 클래스도 마찬가지.
p::selection {
background-color: yellow;
}p의 선택된 부분만 백그라운드 컬러 옐로우로 바꿈.
Cascade
캐스케이드
css에서 적용된 스타일의 순서는 위에서 아래로 간다.
폭포처럼. 맨 밑에가 최종적으로 적용됨.
한 대상에 상반되는 스타일이 선언되어 있으면 아래쪽 게 적용됨.
Specificity
특이도
둘 이상의 스타일이 동일한 요소에 적용되거나 적용될 수 있는 경우에 충돌이 발생함.
이 경우 더 구체적인 선택자에 적용된 스타일이 우선함.
button:hover; 보다 .post button:hover; 가 우선함. 더 구체적이기 때문.
id > class > element
id가 가장 구체적임. 그 다음 class고 element는 가장 덜 구체적이다.
id > class > element 순으로 저수가 매겨짐
0 0 0
id가 있으면 100. 100점임. id와 class가 없고 element만 있으면 1점.
각 요소에 여러개가 있으면 점수가 올라감. element가 6개 있으면006 점. 다만 십진법이 아니다. 우선순위가 낮은 쪽 10개가 되어도 그 위 순위의 한개보다 낮다. 특이도 계산기가 있다.
.post button:hover위는 021점이다.
button:hover이건 011점이다.
#signup이건 100점이다. 그러므로 이게 가장 우선 적용된다.
충돌하는 부분만 우선 적용된다. 충돌안되는 부분은 점수가 낮아도 적용됨.
만약 특이도가 동일하면 가장 아래에 있는 게 적용된다.
Chrome 개발자 도구 CSS
개발자 도구의 style 탭을 이용하면 적용되는 css를 살펴볼 수 있다.
Inline Styles
인라인 스타일
html에다 바로 넣어버린다.
<button id="signup" style="color:red">이러면 id로 css를 설정해도 인라인에 넣은 것이 적용된다. 되도록 쓰지 말아야함.
!important
개별 스타일 지정에 사용할 수 있는 선택자.
되도록 안 쓰는게 좋다. 효과적일 때도 있다.
.foo[style="color:red"] {
color: firebrick !important;
}기존 css 뒤에다 추가하면 이게 최고 명시적으로 가장 먼저 적용됨.
특이도를 무시하고 가장 먼저 적용됨.
CSS Inheritance
css상속이란 구체적인 특성을 지정하지 않은 하위 요소에 상위 항목 특성이 적용되는 것.
body 밑에 h1이 있고 body 전체에 css로 적용해주면 h1에도 적용됨.
개발자 도구에서 보면 Inherited from body라고 표시됨.
일부 요소는 상속받지 않도록 기본 설정이 되어 있다. 버튼 같은 경우.
button {
color: inherit;
}이렇게 inherit라고 넣어주면 그때서야 상속받아서 적용된다. 다른 속성도 마찬가지.
테두리 같은건 상속 불가.
