CSS - 3. 선택자를 좀 더 알아보자
*생활코딩 CSS강좌를 따라가고 있습니다
https://opentutorials.org/course/3086/18329
1. CSS의 선택자에 대한 심화
자 배운 것을 연습할 겸 아래의 연습문제를 풀어보자!
1) 모든 링크의 글자는 검정색
2) 한 번 방문한 적이 있는 링크는 회색(현재 html과 css페이지를 방문한 상태이다.)
3) 현재 방문 중인 페이지는 빨간색으로 만들고 싶다
한 번 풀어볼까? 첫 번째 문제는 쉽다.
1) 모든 링크의 글자는 검정색 = color:black;
음 하지만 이다음 것은... 어떻게 하지?
2. 클래스를 지정한다 - class="이걸콕찝어수정하고싶어"
한 번 방문한 적이 있는 링크라는 부분만 수정해야 하는 상태이다. 특정한 어느 부분만 콕 찝어 수정하고 싶을 때에는 클래스라는 것을 따로 지정해준다.
이번에는 필요한 링크 태크 <a> 안에 클래스라는 선택자를 따로 지정해준다.
class="saw"
내가 봤어!class까지는 html의 용어이다. 하지만 html로 지정한 이 saw라는 클래스에 css에 스타일 적용이 가능하다.
하지만! 그냥은 안된다. css가 <style>태크 안에서 class가 saw인 값을 찾아내게 하려면 반드시 온점(.)하나를 붙여줘야 한다! 이렇게!
. 하나 붙이면 황금색으로 변하는 매직. 웹사이트에도 훌륭히 적용되었음을 볼 수 있다.
자, 기억하자! class를 적용할 때는 . 을 붙인다!
3. 클래스가 도대체 뭐길래?
특정 태그 안에 class라는 속성으로 이들이 하나의 반(class)으로 만들어 주는 것이다. 같은 반 학생들로 만들어버려서 같은 값을 받도록 만드는 것이다. 1반 학생들은 반티셔츠로 모두 빨간 티셔츠를 입게 하는 것처럼.
자 그럼, 다음 문제를 풀어보자.
3) 현재 방문 중인 페이지는 빨간색으로 만들고 싶다.
이럴 경우 "방문 중인 페이지"라는 클래스를 만들어 버리면 편할 것이다. 현재 방문 중인 페이지의 링크에 active라는 클래스를 추가시켜보자. 단순히 띄어쓰기만 하면 된다.
그리고 <style>에 .active를 추가하여 원하는 색깔을 넣어보자
다시 말하지만 .을 빼면 안 된다.
짜잔-
4. 헷갈리지 않니 태그야? - 클래스가 여러 개라면 생기는 문제 - 넌 왜 1반인데 2반이야?
보다시피 우리는 지금 클래스 값에 saw와 active를 두 개를 설정해 놓고, saw면 color:gray, active면 color:red로 하라고 해놓았다. 그러니까, 1반이면 회색 옷을 입고, 2반이면 빨간색 옷을 입으라고 해놓고 CSS한테 넌 1반이면서 2반이야!라고 class를 지정했다.
분명 결과로 볼 때 빨강이 되긴 했지만, 그건 어디까지나 코드상 마지막에 내린 명령이 active{color:red}였기 때문이지 순서가 뒤바뀌면 애써 짜 놓은 코드가 도로 회색이 될 수 있다.
(넌 1반이지만 2반이야!! / 코드 왈, "아, 나는 2반이구나." - 빨간 티를 꺼내 입는다)
(넌 2반이지만 1반이야!! / 코드 왈, "아, 그러니까 나는 1반이구나." - 회색 티를 주섬주섬...)
이 문제를 방지하기 위해 우리는 복수의 클래스가 아닌, id라는 값을 사용해보자.
5. 몇 반(class)인가 보다 중요한 민증(id) 좀 보여주세요 - id는 #으로 > class는 .으로
이렇게 반이 헷갈리는 코드가 있으면 곤란하다. 그럴 땐 혼란스러워하는 코드에게 id 즉, 민증을 들려주자. (이것은 너밖에 없는 거니까 넌 이제 헷갈리지 않을 거야)
class 지정과 동일한 방식으로 id를 지정해보자. 그리고 <style> 태그를 불러올 때 앞에 온점(.)을 붙였던 것처럼 id의 경우는 #을 붙여준다.
짜잔- 이제는 순서를 바꿔도 중복의 위험 없이 잘 적용되는 것을 볼 수 있다.
6. 코드 : 여긴 어딘가 나는 누군가? = 어떤 식별자가 더 강력한가 id > class > a(태그 선택자)
똑같은 선택자들이라고 하더라도 id, class, a 순으로 강함이 다르다.
왜냐하면 a(태그 선택자)가 제일 넓다. 많이 등장한다. 모든 링크들이 저 명령을 따르려고 한다. 하지만 class는 한 반 정도의 인원으로 정해진 인원이다. 마지막으로 id는 우리의 id 카드를 떠올리면 된다. 주민등록번호처럼 중복되서는 안 되는 유일무이한 값이다.
그러니까 모든 사람들<a>에게 하루에 한 번 아이스크림을 먹으라고 한 뒤, 1반<class> 애들에게는 너희는 빙수만 먹으라고 하고, 한 녀석<id>을 붙들고 넌 수박만 먹어. 라고 할 수 있는 것이다.
즉, CSS는 구체적인 것을 포괄적인 것보다 우선순위를 높였다.
포괄적으로 디자인을 잡고, 예외만 id로 잡아서 수정해주는 것이 훨씬 편리하기 때문이다.
7. 다른 선택자는 없나요? - CSS selector 라고 검색해보자
당연히 그럴 리가 없다. 하지만 목마른 사람이 우물 파야하는 법 필요한 것은 검색을 통해 얻어내야 한다.
검색창에 CSS selector 라고 검색해보자
보라, 다양한 선택자들이 바로 튀어나오는 것을 볼 수 있다!
