CSS 고급 선택자 1 - 연결 선택자

이제 새로운 단원 학습에 들어가본다. 이 단원까지만 학습하면 CSS 공부는 오늘로써 마치고 다음에 하려고 한다. 6일 동안 공부하느라 정말 애썼다. 2주 이상 놀다가 다시 공부하려니 많이 힘들었지만 말이다.

어제 이 부분을 학습하려고 했는데 이상하게도 소스 파일이 없어서 난리만 치다가 하지 못했다. 근데 PC로 받은 것과 노트북으로 받은 파일이 너무나 달랐다. 노트북으로 받았을 때는 소스 파일이 없는 게 너무나 많았다. 뭔가 노트북에 문제가 있는 게 분명했다. 어제 하지 못했던 공부를 오늘까지 이어서 하기로 했다. 자바 학습과 함께..

 

연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. 선택자를 둘 이상 조합하므로 '조합 선택자'라고도 하고 '콤비네이션 선택자',  '콤비네이션 설렉터' 등으로도 부른다.

---

 

 

 

1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다.

 

하위 선택자

하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 자식 요소뿐 아니라 모든 하위 요소까지 적용된다.

상위요소 하위요소

 

section 요소 안에 포함된 p 요소를 모두 선택하려면 section과 p 사이에 공백 한 칸을 두고 나란히 써준다. 그리고 중괄호 안에 스타일 규칙을 써준다.

 

 

 

하위 선택자를 사용하여 글자색 적용하기

 

 

모든 하위 요소가 적용되었음을 확인할 수 있다.

---

 

 

 

 

자식 선택자

자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다.

부모 요소 > 자식 요소

 

자식 선택자는 하위 선택자와 달리 바로 한 단계 아래의 요소 즉 자식 요소에만 스타일이 적용된다는 차이점이 있다.

 

 

자식 선택자를 사용하여 글자색 적용하기

 

---

 

 

 

 

2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

웹 문서에서 부모 요소가 같은 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.

 

 

인접 형제 선택자

형제 요소 중에서 첫번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다. 요소1과 요소2 사이에 '+' 기호를 표시한다. 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택한다.

요소1 + 요소2

 

 

 

---

 

 

형제 선택자

인접 형제 선택자와 달리 모든 형제 요소에 적용된다. 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다.

요소1 ~ 요소2

 

 

모든 형제 요소의 스타일 지정하기

 

 

---

 

 

 

 

DO IT 실습 - 폼에서 레이블 요소 정렬하기

회원 가입 양식의 요소를 연결 선택자로 서용하여 스타일을 지정한다.

 

 

1단계 : 비주얼 스튜디오 코드 열고 HTML 파일 확인하기

 

HTML 파일

 

 

 

 

 

CSS 파일

 

이것이 제공된 기본 문서이고 이제 CSS 파일을 수정해보기로 하자.

---

 

 

 

 

2단계 : CSS 파일 수정하기

레이블 태그를 타입스타일로 지정한다. 그리고 float 속성을 사용해서 레이블을 왼쪽으로 배치하고 너비를 지정한다.

 

 

이제 레이블에 작성을 할 수 있는 칸이 나타났다. 이 문제는 엄밀히 말하면 선택자에 관한 문제는 아니었다. 그냥 레이블의 설정을 하나 바꾸어주는 건데 연결선택자 문제가 있었으면 하는 아쉬움이 들었다.

---

 

 

 

 

학습을 마치고

어제 하지 못했던 공부를 자바 공부를 마친 다음 이어서 진행하고 있다. 속성 선택자까지는 하고 싶었는데 시간이 될지 모르겠다. 다 못하면 점심시간에 와서 진행해보려고 한다. 식사를 하기에도 바쁜 시간이지만 시간을 쪼개면 할 수 있다.