비전공에서 취업까지!! [14화] CSS 선택자2탄! 조상..조상님이 보여욧!! -입니다.-

안녕못합니다 SsunDev입니다.

바쁘게 살아보려 운동을 시작했습니다.

복싱을 시작했는데 짬프짬프만 2시간하고 종아리에 딱구리가 생겼습니다.

어제에 이어서 오늘도 선택자에 대해서 알아보겠습니다.

 

역시나 시워언하게  css03.html 과 css03.css 를 만드시고 

향상된 뼈대만드시고 

css파일 만드시고 @charset "UTF-8"; 넣는거 잊지 마시구요!

마지막으로 <link rel href> 뙇 넣어주시고!

 

이정도는 이제 아 새로운거 배우겠구나 하면 미리 그냥 뙇 만들어 버리고 글 읽으시죠? 다 알아요~

자 이런식으로 p 테그를 사용해서 음식들을 나열 해볼까요?

각각 food, kor or wes or jap or chi 라고 class를 부여해 줘 보도록 하겠습니다

그리고 제가 좋아하는 봄도다리쑥국에 id="myFav" 하고 id도 하나 줘보겠습니다.

class 와 id 의 특징 다 아시죠?

***어느 테그에나 붙일 수 있고 class는 여러개 id 는 한 파일당 중복없이 단 하나!***

자 이런식으로 class 와 id 를 붙여주었습니다.

 

그 다음 css03.css 파일로 가서

이렇게 한번 정의해 주도록 하겠습니다.

그리고 alt + B!!

다들 요로코롬 알록달록하게 잘 나오나요??

여기까지 잘 따라오셨으면

 

종속 선택자 라는걸 배워보도록 하겠습니다.

일단 정의는 태그, 클래스, 아이디 선택자가 결합된 형태의 선택자에 속성을 지정하는 방식 이라고 합니다

 

정의만 들으면 어려운데 어렵게 생각할건 없고 풀어서 생각해보면 좋습니다.

예를들면

p테그중에서 class가 kor 인것

h1 테그중에서 id 가 title 인것 

이런식으로 태그 클래스 아이디를 조합하여 특정 테그를 골라내는것을 뜻합니다. 쓰는것은 더 쉽습니다.

 

예시를보면 p 테그에 바로 .kor를 붙였습니다. 이렇게 쓰면 p테그중에서 클래스가 kor인녀석들에게 font-size 를 40px로 하겠다 입니다. 쉽죠? 

alt + B!

한식이 커졌습니다! 쉽죠?

이런식으로 섞어서 붙여쓰기만 하면 끝입니다.

다만 잘 쓰이지않고 테그는 연속해서 쓸 순 없습니다.

h1h2pspandiv 이런식으로는 안됩니다.

 

그렇다면 혹시 p테그중에서 kor 클래스를 가진것중에서 id가 myFav 인 테그의 color 를 white 로 바꾸고자 한다면 어떻게 해야할까요??

한번 맞춰보시길 바랍니다.

정답은 : p.kor#myFav{color : white;}입니다!

종속 선택자 쉽죠?

 

두번째로는 

아래에 <div>테그 안에 <ul> 안에 <li> 를 정의해 보도록 하겠습니다.

다 기억 나실거라 믿습니다!

이렇게 작성해 주시면 됩니다.

이번엔 자식 선택자라는걸 배워보도록 하겠습니다.

저희 부모코드 자식코드 관계 기억하시죠?

그것과 똑같습니다.

제가 id="clothes_List" 아래중에서 id="shoes" 를 선택하고자 한다면

이렇게 > 를 사용해주시면 됩니다!

신발이 하얀색 신발이 되었습니다.

 

자식 선택자는 이렇게 바로 아래의 자식관계인 코드일 때만 효과가 있습니다.

 

 

 

만약

 

이렇게 div테그에 id="clothes_area"를 기입하고

이 clothes_area 로부터 자식 자식인 id="shoes"를 선택한다면?

자식 아래 자식 이기 때문에 작동하지 않을겁니다.

 

그래도 혹시 만약 이게 작동한다면 흰색으로 정의했던게 빨간색으로 재 정의되면서 결국 빨간색으로 나와야겠죠?

바로 그럼 alt + B!!

여전히 흰색이군요

이렇게 자식 선택자는 바로 자식관계인 녀석만을 고를 수 있습니다.

 

예시로 들어보자면

id= game 의 자식중에서 p인테그           == #game>p{ }

<tr>  테그 아래의 <th> 테그들                == tr>th{}

이런식으로 사용하면 되겠죠?

 

 

 

이번엔 자손 선택자를 알아보겠습니다

자식 선택자의경우 직계 자식만 선택이 가능했습니다. 

그렇다면 clothes_area 아래 아래에 있는 모든 <li>테그를 선택하고자 한다면 어떻게 해야할까요?

 

이런식으로 아래아래 자손을 선택하고자 하면 띄어쓰기를 사용하면 됩니다!

그렇다면 바로 alt + B!!

이렇게 모든 id="clothes_area" 아래의 <li>테그들이 선택이 되어 배경색이 검은색이 되었습니다! 

검 흰 신발? 이거 완전?

 

그 다음은 그룹 선택자 입니다.

꿔바로우와 모자를 동시에 선택해보겠습니다.

이렇게 , 쉼표를 사용하여 여러개를 선택해주면 ? 바로 alt + B!!

꿔바로우와 모자의 글자 크기가 바뀐것을 볼 수 있습니다.

 

오늘은 이렇게

종속선택자 == 붙여쓰기

자식선택자 == >

자손선택자 == 띄어쓰기

그룹선택자 == ,

에 대해서 배워보았습니다.

 

구분하는게 띄어쓰기나 쉼표 기호 붙여쓰기등등으로 섞어쓰게되면 점점 더 햇갈리게 됩니다.

게다가 선택자가 아직도 몇개 더 남아서 햇갈리지않게 각자 개인적으로 다시한번 정의해두시는걸 추천드립니다.

 

 

그럼 저는 이만 종아리를 문지르러 가야할거 같습니다. 그럼 20000~