* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
이번에 배울 건 선택자이다.
아래의 접은 글은 섹션 6 정리글에 언급했던 선택자 관련 글인데, 선택자가 무엇인지 모르겠다면 간단하게 보고 넘어가면 될 것 같다.
선택자에는 여러 종류가 있다.
Universal Selector
*로 모든 개체를 선택할 수 있다. 모든 개체에 해당 특성을 적용시키므로, 자주 쓰이지는 않는다.
Element Selector
특정 요소에 대해 특성을 적용시킨다.
Selector List
요소'들'에 대해 특성을 적용시킨다. 여러 요소를 선택자 자리에 콤마를 사용해 나열하기만 하면 된다.
ID Selector
특정 부분(한 줄)에 특성을 적용시킨다. 태그 안에 id를 이용하며, 선택자를 지정할 때에는 id 앞에 #을 붙인다.
id는 한 페이지에 하나만 있어야하므로, 여러 줄에 특성을 적용시키기 위해 id selector을 사용하지 않도록 주의한다.
그리고 id는 많이 사용하지 않는 게 좋다고 한다. 강사님께서는 한 페이지에 열 개 정도 사용한다고 하니, 이를 기준으로 삼고 내가 20, 30개씩 쓰고 있다면 이를 다른 선택자로 바꾸어 사용할 수는 없을지 고민해보자.
Class Selector
가장 많이 사용되는 선택자 중 하나이다. 같은 양식을 여러번 적용시킬 일이 있을 때 유용하며, 주로 span(div와 비슷하지만 block이 아닌 inline 요소이다.)을 사용해 class를 나눈다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<main>
<h1 class="tag">Hello World</h1>
<button>I'm Button</button>
</main>
</body>
</html>/*code*/
.tag {
color : green;
}
와 같이 사용할 수도 있다. span 안에만 class가 들어가지는 않는다는 것을 알아두자.
Descendant Selector
자손 선택자라는 것이다. 띄어쓰기를 사용하여 표현한다. 예를 들자면, li 태그 안에 있는 a에 대해서만 특정 서식을 적용시키고 싶을 때 자손 선택자를 사용할 수 있다. 참고로 클래스간의 자손을 표현하거나 할 때에도 사용할 수 있다. 굳이 요소간의 자손관계가 아니어도 괜찮다.
Adjacent Selector
한국말로 하면 인접 선택자인데, 그리 자주 사용되지는 않는다고 한다. + 기호를 사용해 두 요소를 묶은 형태인데, A + B라면 그 뜻은 A바로 뒤에 있는 (자손 형태가 아닌 형제 형태의) B에게 서식을 적용시킨다는 뜻이다.
Direct Child
직계 자손 선택자는 손주, 증손주... 같은 애들 다 무시하고 딸이랑 아들한테만 그 서식을 적용시킨다는 선택자이다. 기호로는 >를 쓰며, A > B일 때 A가 부모 B가 자녀이다.
Attribute Selector
속성 선택자는 요소 중에서도 특성한 속성을 가진 애들을 선택할 수 있다. 예를 들어 input[type="text"]라는 선택자가 있다면, 이는 input 중에서도 문자 입력란에 서식을 적용시킬 수 있다. 대괄호를 사용함을 기억하자!
그리고 만약 특성 class를 가진 특정 요소에 서식을 적용시키고 싶다면, (요소이름).(클래스 이름)으로 작성할 수도 있다. section.post 같은 식이다.
Pseudo Classes
유사 클래스라고 한다. 어... 여러 종류가 있는 것 같은데, 일단 한 번 보자. 참고로 유사 클래스를 사용할 때에는 앞에 콜론(:)을 붙인다.
- hover : 마우스 커서를 그 위에 올렸을 때에만 그 서식을 가진다.
- active : 클릭한 동안에 그 서식을 가진다.
- checked : radio button등을 체크했을 때에만 그 서식을 가진다.
- nth-of-type() : n번째 요소만 그 서식을 가진다. 괄호 안에 3n과 같이 정수+n을 작성하면 정수의 배수번째마다 해당 서식을 가지게 할 수 있다. 2n-1을 작성하면 홀수번만 해당 서식을 가지게 할 수도 있다.
Pseudo Elements
이건 유사 요소이다. 콜론 두 개를 연속으로 붙이면 유사 요소를 사용함을 알릴 수 있다. 그러나 대부분은 콜론 하나만 사용해도 큰 상관 없이 작동한다.
- first-letter : 이름에서 알 수 있듯이, 해당 단락의 첫 번째 글자의 서식만 바꿀 수 있다. 보통은 글자를 크게 하는데에 사용하지 않을까 싶다.
- first-line : 이것도 그냥 단락의 첫 줄의 서식을 바꾼다.
- selection : 설명하기 좀 어려운데, 아래와 같이 특정 영역을 선택하면 그 부분의 서식을 바꾼다.
이제 계단식 css와 우선순위 css를 배워보자. 이것만 배우면 오늘 강의는 거의 끝이다.
The Cascade
계단식 css는 css가 폭포처럼 위에서 아래로 흘러가 같은 곳에 대해 서식이 두 번 정의됐다면 아래의 것이 최종 서식이 된다는 것이다.
/*code*/
h1 {
color : red;
background-color : black;
}
h1 {
color : purple;
}
이런 css가 있을 경우, 글자색(color)은 보라색으로 바뀌고 배경색은 그대로 검은색이 된다.
두 개 이상의 style sheet를 사용할 경우에도 호출한 style sheet 순서의 영향을 받는다.
Specificity
같은 속성에 적용된 서식이 있다면, 더 구체적인 것을 적용한다는 css의 특징이다.
예를 들어, 특정 class에 속한 button에 적용한 서식과 모든 button에 대해 적용한 서식이 있다면, 특정 class에 속한 button에 대한 서식이 우선순위를 얻는 것이다.
일반적으로는 ID>class>element순으로 서식이 적용된다. ID와 요소가 같이 적용된다면 ID가 먼저 와도 계단식 css를 무시하고 그냥 ID가 적용된다.
https://specificity.keegan.st/
Specificity Calculator
Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.
specificity.keegan.st
이 사이트를 참고하자.
먼저 맨 위의 것을 비교하고, 그 파란색을 비교하고, 초록색을 비교한다. 초록색이 1000이어도 빨간색이 1인 게 우선순위가 더 높다.
만약 우선순위가 똑같다면 계단식 css를 따라 맨 아래 것이 선택된다.
기본적인 우선순위는 이와 같지만, 서식을 지정하기 전에 세미콜론(;) 앞에 !important를 작성하면 가장 중요한 요소라고 판단된다. 그런데 쓰지 말라고 한다. 인라인 서식도 쓰면 안 된다고 하니, !important와 인라인 서식은 작성하는 걸 피하도록 하자.
기본적으로 css는 서식을 상속받는다. div class="post"안에 p가 있고, post에 color:"red";를 부여하면 p태그 안에 있는 글자의 색이 빨간색으로 바뀐다. 하지만 일부는 서식을 상속받지 않는 것이 기본값인 경우도 있는데, 그럴 때에는 color:inherit;과 같이 작성해 강제로 상속받게 할 수 있다. 하지만 자주 사용되지는 않는다고 한다.
section 7 강의는 여기서 끝이다. 요즘 시간이 많이 남아 블로그 글을 쓸 여유가 있다.
하지만 수능 후에는 면접보느라 2~3주간은 블로그에 신경을 못 쓸테니, 수능 전으로 세이브를 10개 정도는 더 만들어놔야 한다. 참고로 지금 이 글을 포함해서 세이브가 8개 있다.
이번 글은 여기서 마무리. 다들 좋은 하루 보내길