선택자의 세계
전체 요소 선택자
* {
color: black;
}
요소 선택자
ex) img {
width: 100px;
}
선택자 목록
h1, h2 {
color: magenta;
}
ID 선택자
#id {
background-color: green;
}
하나의 id는 페이지 내에 한 번만 나와야한다.
id 선택자 사용은 최소화하자.
클래스 선택자
.class {
color: green;
}
자손 선택자
li a {
color: teal;
}
li 태그는 선택되지않고, li태그 안에있는 a태그만 선택된다.
.post a {
post라는 클래스에 속한 a태그만 선택된다.
}
인접 선택자
h1 + p {
color: red;
}
h1 태그 다음으로 오면서 같은 단계인 p 태그가 선택된다.
직계 자손 선택자
div > li {
color: white;
}
div 태그의 직계 자손인 li 태그가 선택된다. 즉, 한 단계 아래만 선택한다.
속성 선택자
input[type="text"] {
width: 300px;
}
a[href*="example"] {
font-size: 2em;
}
a 태그들 중에서 href가 example을 포함하고 있다면 선택된다.
a[href$=".org"] {
font-style: italic;
}
a 태그들 중에서 href가 .org로 끝난다면 선택된다.
다른것들도 많은데 MDN을 참고하자.
가상 클래스(PSEUDO CLASS)
가상 클래스는 선택자 끝에 붙여 상태를 특정하는 키워드임.
이것으로 체크된 체크박스나 커서를 올려둔 요소 혹은 각각의 버튼 등을 선택할 수 있다.
또는 아직 버튼 선택중이지만 각각이나 매 5번째나 매 10번째만 선택할 수도 있다.
가상 클래스는 덧붙일 수 있는 모디파이어 혹은 키워드는 :로 시작하는데
가상 클래스를 사용한다는 걸 알리려면 :을 입력해야한다.
hover
a:hover {
color: orange;
}
모든 앵커 태그를 선택한 뒤 커서가 올려져 있는 특정 상황에서의 효과를 설명해준다.
위 코드같은 경우 a태그 위에 마우스를 올리면 text의 색깔이 orange로 바뀐다.
모든 앵커 태그에서 꾸미기를 없앨 수도 있고, text-decoration: none으로 앵커 태그에서 밑줄을 없앨 수도 있다.
active
active는 무언가가 현재 활성화되어 있다는 의미임.
button:active {
background-color: red;
}
버튼을 클릭하고 있는 동안 배경 색이 빨간색으로 바뀐다.
nth-of-type()
형제 그룹 내 위치에 따라 선택할 수 있게 한다.
.post:nth-of-type(3){
color: green;
}
post라는 클래스의 목록들 중에서 3번째의 색을 green으로 바꾼다.
.post:nth-of-type(3n){
color: red;
}
post라는 클래스의 목록들 중에서 매 3번째 마다의 색을 red로 바꾼다.
다른 것들도 많은데 MDN을 참고하자.
가상 요소 (PSEUDO ELEMENT)
가상 요소도 모디파이어나 선택자처럼 덧붙일 수 있는 요소이다.
가상 요소는 선택된 요소의 특정 부분만 선택한다.
보통은 2개의 : 을 사용하고, 1개만 사용해도 브라우저가 인식하긴 한다.
first-letter
특정 선택에서 첫 글자를 선택하는 방법이다.
h2::first-letter {
font-size:30px;
}
모든 h2태그의 첫번째 글자 크기를 30px로 바꾼다.
first-line
특성 선택에서 첫 줄을 선택하는 방법이다.
p::first-line {
color: purple;
}
모든 p 태그의 첫 줄을 보라색으로 바꾼다.
selection
문서의 강조 표시한 부분에 적용된다. 문서의 특정 부분이 아니라 선택한 요소의 일부라도 상관없다.
p::selection {
backgrond-color: yellow;
}
어떤 문장을 마우스로 클릭 드래그하여 강조 표시를 했을 때 해당 부분들의 배경색이 노란색으로 바뀐다.
위 가상 요소들은 가상 클래스와 달리 실질적인 페이지의 요소인 특정 조각만 선택했다.
가상 클래스가 hover, active, checked 같은 상태였다면
가상 요소는 어떤 대상이나 선택한 요소의 일부를 선택한다.
계단식 CSS
CSS는 캐스케이딩 스타일시트(Cascading StyleSheet)의 약자다.
스타일의 최상단부터 출발한 폭포(cascade)가 아래로 쭉 흘러서 스타일시트 최하단이나 다음 스타일 시트로 넘어간다.
h1 {
color: red;
}
h1 {
color: purple;
}
위 예시에선 h1은 처음에 red로 설정 됐다가, 케스케이딩 과정에서 마지막엔 purple로 설정되어 브라우저에선 purple로 나올것이다. 이렇듯 CSS는 순서가 중요하다.
스타일시트를 선언하는 부분에서도 같다.
<link rel="stylesheet" href="1.css">
<link rel="stylesheet" href="2.css">
위 예시에서 1.css에 h1 {color:red;}를 설정하고 2.css에서 h1 {color: purple;}로 설정했다면 캐스케이딩으로 인해 브라우저엔 purple로 나올 것이다.
우선순위 CSS
특이도는 충돌이 생길 경우 브라우저에서 규칙을 적용하는 방법이다.
.post button:hover {
background-color: red;
color: white;
}
button:hover {
background-color: olive;
font-size: 10px;
}
위와 같은 상황에서 브라우저는 주어진 선택자가 얼마나 구체적인지 측정한 뒤 더 구체적인 선택자를 우선적으로 적용한다.
ID > CLASS > ELEMENT
ID의 개수 > CLASS(가상 클래스 포함)의 개수 > ELEMENT(가상 요소 포함)의 개수
id class element
ex) #submit {} 1 0 0
ex) nav a.active{} 0 1 2
ex) .post button:hover {} 0 2 1
ex) button:hover {} 0 1 1
따라서 처음 예시에선 .post button:hover css특성이 적용된다.
하지만 color 특성이나 font-size 특성 같은 경우엔 충돌하지 않으므로 그대로 적용될 것이다.
또 이 계산식이 보편적인 10진법이 아니라서 10개의 클래스가 1개의 ID와 같지 않다.
예를 들어 1개의 클래스는 28개의 요소보다 우선순위가 높다.
위 계산식이 완전히 같다면 캐스케이딩으로 인해 후에 나온 css 특성이 적용될 것이다.
인라인 스타일과 중요도
인라인 스타일은 ID, CLASS, ELEMENT보다 더 명시적인 선택자다.
인라인 스타일은 스타일 시트에서 분리되어 있기 때문에 혼란을 일으킬 수 있다.
!important
p {color:red !important;}
위 예시처럼 !important를 설정해주면 이 css 특성을 가장 우선적으로 설정한다.
엄밀히 말하자면 특이도와 관련없이 무조건적으로 적용된다.
!important 같은 경우는 반드시 통제할 필요가 없는 외부 라이브러리나 도구를 다룰 때나 무언가를 바꾸거나 덮어쓰고 싶을 때 사용한다.
위 둘은 특이도를 무시하고 자동으로 우선시하게 만들기 때문에 되도록이면 지양하자.
상속 CSS
<body>
<h1>the header</h1>
<section>
<h2>sub header</h2>
<p>Lorem</p>
</section>
<section>
<h2>another header</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="username">
<button>do something</button>
</form>
</section>
</body>body {
color: purple;
}
section {
color: aqua;
}
form {
color: greenyellow;
}
button, input {
color: inherit;
}위 css 내용에서 body 특성만 존재한다면 body 안에 상속받지 못하는 요소들을 제외한 요소들은 색이 purple로 상속받는다.
또 body와 section 특성만 존재한다면 body 안에 section 안에 있는 요소들은 색이 aqua로 상속받는다.
button과 input 요소 같은 경우 부모로부터 상속받지 않기 때문에 위에 처럼 설정을 해주면 color을 상속받을 수 있다.
BEM 방식 참고 자료 : https://nykim.work/15