[CSS] CSS선택자(셀렉터 조합) 사용하기

1. 과제 회고
2. 과제 FLOW

1.  과제 회고

🦄 과제 회고 🦄
잘한 것은 무엇인가?	- 학습한 선택자를 다양하게 적용해보았다.
잘못한 것은 무엇인가?	- 선택자를 넣겠다는 생각에 코드를 깔끔하게 작성하지 못한 것 같다.
무엇을 배웠는가?	- 다른 선택자들은 친숙하게 사용해 볼 수 있었고 속성 선택자를 새롭게 알게 되었다.
아직도 안풀린 궁금증은 무엇인가?	- .bus_pick::after  적용 하면서 추가한 '추천'글자가  .bus_pick의 백그라운드 색깔에 포함되서 작성이 된다. 그것을 따르지 않고(백그라운드 색상이 안 이어지도록) '추천'글자만 추가하려면 어떤 방법이 있을까?	🧩
이전과는 어떻게 다르게 할 것인가?	- 그동안 CSS를 작성하면서 부모요소와 자식요소간의 관계를 정확히 파악하지 않아 상속을 통한 CSS 적용에 어려움이 있었지만 이제는 html 계층 구조 파악을 보다 깊게 이해하고 CSS상속의 개념을 정확히 이해하고 사용할 수 있도록 할 것이다.

 

2.  과제 FLOW

📌  과제

- 이전 제출 과제인 HTML 페이지의 각 요소를  오늘 배운 선택자를 전부 활용하여 선택하고 꾸미기
- git push 후 Repository주소를 강사에게 DM으로 보내기

 

💬  계획

1. 복합 선택자를 적용하기 위해 HTML에 리스트를 추가로 작성한다.
2. 가상 클래스 적용은 게시판 HTML의 <a>에 적용하기로 한다.
3. 가상 요소 선택자 적용을 위해 <input>을 추가한다. 

 

💾  기술 스택

 

💾  결과 화면

기존 HTML에 선택자 요소 추가

셀렉터 조합 사용

 

 

💾  기본 선택자 

전체 선택자 (Universal Selector)	모든 요소를 선택	*{속성:값;}
태그 선택자 (Type Selector)	태그 이름으로 요소를 선택	태그 이름{속성:값;}
class 선택자 (Class Selector)	HTML class 속성의 값으로 요소를 선택	.클래스이름{속성:값;}
id 선택자 (Id Selector)	HTML id 속성의 값으로 요소를 선택	#아이디이름{속성;값;}

(예시 코드는 과제에 작성한 코드를 기반으로 작성함)

//전체 선택자
* {
  color: black;
}

//태그 선택자
table {
  width: 700px;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}

//class 선택자
.title {
  background-color: rgb(236, 234, 234);
  border-top: 1px solid rgb(196, 192, 192);
  border-bottom: 1px solid rgb(196, 192, 192);
}

//id 선택자
#line_one {
  font-weight: bold;
}

 

💾  복합 선택자 

특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용

일치 선택자 (Basic Combinator)	선택자 AAA와 BBB를 동시에 만족하는 요소 선택	AAABBB{속성:값;}
자식(직계 자손) 선택자 (Child Combinator)	선택자 AAA의 자식 요소 BBB를 선택	AAA > BBB{속성:값;}
하위(후손) 선택자 (Descendent Combinator)	선택자 AAA의 하위 요소 BBB를 선택	AAA(띄어쓰기)BBB{속성:값;}
인접 형제 선택자 (Adjacent Sibling Combinator)	선택자 AAA의 다음 형제 요소 BBB 하나를 선택	AAA + BBB{속성:값;}
일반 형제 선택자 (General Silbling Combinator)	선택자 AAA의 다음 형제 요소 BBB 모두를 선택	AAA ~ BBB{속성:값;}

(예시 코드는 과제에 작성한 코드를 기반으로 작성함)

/* 일치 선택자 */
p.bus_title {
  background-color: coral;
  font-weight: bold;
}

/* 자식 선택자 */
ul > .bus_pick {
  background-color: coral;
}

/* 후손 선택자 */
.subway .line_pick {
  background-color: palegreen;
}

/* 인접 형제 선택자 */
.bus_pick + li {
  color: teal;
}

/* 일반 형제 선택자 */
.line_pick ~ li {
  color: blueviolet;
}

좌)'753'인접 형제 'N75'만 teal 색상 적용. / 우)'경의중앙선' 일반형제 '6호선/2호선' 모두 blueviolet 색상 적용.

💾  가상 클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택시 사용
hover	선택자 AAA 요소에 마우스 커서가 올라가 있는 동안 선택	AAA:hover{속성:값;}
active	선택자 AAA 요소에 마우스를 클릭하고 있는 동안 선택	AAA:active{속성:값;}
focus	선택자 AAA 요소가 포커스되면 선택	AAA:focus{속성:값;}
특정 요소를 선택하는 가상 클래스 선택자
first-child	선택자 AAA가 형제 요소 중 첫째라면 선택	AAA:first-child{속성:값;}
last-child	선택자 AAA가 형제 요소 중 막내라면 선택	AAA:last-child{속성:값;}
nth-child(n)	선택자 AAA가 형제 요소 중 (n)번째라면 선택	AAA:nth-child(n){속성:값;} AAA:nth-child(2n){속성:값;} 짝수번째 AAA:nth-child(2n+1){속성:값;} 홀수번째 AAA:nth-child(n+N){속성:값;} N번째 요소 이후의 요소들 선택
특정 요소를 부정할 때 사용
not	선택자 BBB가 아닌 AAA 요소 선택	AAA:not(BBB){속성:값;}

(예시 코드는 과제에 작성한 코드를 기반으로 작성함)

/* 가상선택자 - hover */
#td_hover:hover {
  color: darkorange;
}

/* 가상선택자 - active */
#td_active:active {
  font-size: 20px;
}

/* 가상선택자 - focus */
input:focus {
  background-color: palevioletred;
}

/* 가상선택자 first-child */
#bus_line li:first-child {
  color: rgb(97, 134, 60);
}

/* 가상선택자 last-child */
#bus_line li:last-child {
  font-weight: bold;
}

/* 가상선택자 nth-child */
#sub_line li:nth-child(2) {
  color: rgb(241, 83, 26);
}

💾  가상 요소 선택자

선택된 요소의 앞, 뒤에 별도의 Content를 삽입하는 선택자

반드시 Content라는 속성을 사용

빈 값 ("")이라도 넣어 주어야 적용이 됨.

after	선택자 AAA요소의 뒤에 내용 삽입	AAA::after{ content: "내용"; }
before	선택자 AAA요소의 앞에 내용 삽입	AAA::before{ content: "내용"; }

(예시 코드는 과제에 작성한 코드를 기반으로 작성함)

.bus_pick::after {
  content: "추천";
  background-color: red;
  color: white;
}

.bus_night::before {
  content: "심야";
  background-color: black;
  color: yellow;
}

753 뒤에 '추천' / N75 앞에 '심야'

💾  속성 선택자

 지정한 특성 속성을 가지고 있는 태그를 선택하는 선택자

ATTR	속성 AAA를 포험한 요소 선택	[AAA] {속성:값;}
ATTR=VALUE	속성 AAA를 포함하고 값이 BBB인 요소 선택	[AAA="BBB"]{속성:값;}

(예시 코드는 과제에 작성한 코드를 기반으로 작성함)

//HTML
<div>
      <input type="checkbox" value="goto"> 버스
      <input type="checkbox" value="goto"> 지하철
      <input type="checkbox" value="goto"> 기타 교통 수단
      <input type="text" placeholder="추천 이유" disabled>
      <br>
      <span>다른 것도 있나요?</span>
      <input type="text" placeholder="자유롭게 입력해주세요"> 
      <input type="password" placeholder="자유 보장 비밀번호"> 
</div>


/* 속성 선택자 ATTR */
[disabled] {
  background-color: rgb(177, 242, 244);
  border: none;
}

/* 속성 선택자 ATTR=VALUE */
[type="password"] {
  background-color: burlywood;
  border: none;
}

위) 속성 disabled를 가진 input text만 배경색, 경계선 none 적용. / 아래) type이 password인 것만 배경색,경계선 none 적용