[Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector

🔔Crucial : Element, Class, ID, Descendant Selector, CSS Specificity

🔔Important : Adjacent, Direct Decendant, Attribute Selector, Pseudo Elements, Pseudo Classes 

 

CSS Selector 

▪ * : 전체 선택자, 문서의 모든 요소를 전부 선택함 -> 잘 사용하지는 않음

▪ Element Selector(요소 선택자) : img, button, ...  태그의 이름을 사용해서 해당 태그를 사용한 모든 요소들을 선택함 

 

ID Selector

▪ id는 레이블과 입력창을 연결하는 것 뿐만 아니라 CSS의 모든 요소에 훅을 제공함(CSS가 하나의 요소를 뽑아내도록) 

#signup{
    background-color : blue;
}

▪ # id_name 의 형식으로 CSS를 지정할 수 있음(이름 내 띄어쓰기 있으면 안됨) 

▪ 하나의 ID는 페이지 내에서 한 번만 나와야함 (중복 사용 금지, 그러니까 딱 1개만 선택할 수 있음) 

▪ ID를 최소화 하는 것이 좋음 -> 모든 걸 다르게 표현하려고 ID 사용하는 것 반대. (colt 기준 한 페이지에 10개 이내) 

 

Class Selector 

.complete {
    color : green;
}

▪ 클래스는 마크업에 훅을 걸어 CSS와 연결한 다는 점은 유사 -> 하지만 Class는 여러 요소에 작용 가능 

▪ 우리는 모든 요소를 다르게 하지 않을 것이기 때문에, 그룹을 만들어 같은 CSS를 적용하는 Class를 더 자주 사용할 것임 

▪ 클래스는 "스티커"같음. -> 찾고 싶은 어떤 요소에라도 붙일 수 있음

 

Basic Selectors Practice

 

Descenant Selector 

li a{
    color : pink;
}

▪ 자손 선택자 : 띄어쓰기를 이용함, 쉼표는 연결하지만 띄어쓰기가 있으면 그 안에 포함된 태그를 선택하게함(li 안의 a 태그) 

▪ 예를 들어 각 섹션마다 클래스를 부여하고 .class_name img 이런 형식으로 작성하면 특정 부분의 특정 태그만 css 변경이 가능함 

▪ 만약 <footer> <nav> <li> <a> 순으로 속해있다고 했을때 footer a 해도 적용됨(거슬러 올라가면 footer에서 비롯되기 때문) 

 

Descendent Combinator Practice 

 

Adjacent Selector (인접 선택자) 

h1 + p {
    color : red;
}

▪ + : 인접 선택자 전체 선택의 명령을 바꾸는 결합자 역할 

▪ h1 바로 다음에 오는 p를 선택 -> 부모가 아니라 형제 

 

Direct Child Selector (직계 자손 선택자) 

div > li {
    color : white;
}

▪ > : 바로 아래에 있는 자손 선택

▪ <div> 태그 바로 아래있는 <li> 태그만 선택 ( 띄어쓰기는 바로 아래가 아니라 어디에 있든 상관 없이 선택 가능했었음) 

▪ 자주 사용하진 않지만 꼭 사용할 때가 생기곤 함 

 

Attribute Selector (속성 선택자)

input[type="text"] {
    width : 300px;
    color : yellow;
}

▪ 속성 선택자 : 특정 속성(타입)을 가진 요소를 선택할 수 있음, <input>에서 많이 사용됨 

section[class="post"]{ }
section.post{ }

: section 중 class가 post인 요소를 선택하는 방법 2가지 

a[href*="example"]{ }

 

: 이 구문이 더 많이 사용됨. *= 는 href중 example이 포함된 요소들을 선택해줌 (완벽 일치 아니고 포함) 

 

Pseudo Classes (가상 클래스) 

▪ 가상 클래스 : 선택자 끝에 붙여 상태를 특정하는 키워드, : 를 입력해줘야함 

☑️ :hover - 커서가 올라가 있을 경우

☑️ :active - 활성화 되어있는 상태 (ex - 클릭되었을 때) 

☑️ :checked - 체크박스나 라디오버튼이 클릭되었을 때 

☑️ :nth-of-type(n) - n번째마다 적용(n자리에 even이나 odd 가능) 

 

Checkerboard Exercise

 

Pseudo Elements (가상 요소) 

▪ 가상 요소 : 가상 클래스처럼 사용하지만, 선택된 요소의 특정 부분만 선택함 

☑️ ::first-letter - 해당 요소의 첫 글자만 선택 

☑️ ::first-line - 해당 요소의 첫번째 줄만 선택(문장 아니고 줄) 

☑️ ::selection - 해당 요소에서 드래그한 부분만 선택 

 

Cascade CSS

▪ CSS는 적용된 스타일의 순서가 중요함, 폭포처럼 위에서부터 내려와서 맞닿는 것이 적용됨 

▪ 같은 태그에 다른 스타일을 적용하려고 한다면 더 뒤에 적혀진 스타일이 적용됨 

 

Specificity(특이도) 

▪ 서로 충돌하는 스타일이 동일한 요소에 적용된다면?  -> 충돌 발생-> 어떤 스타일이 적용될지 특이도에 따라 결정됨 

▪ 브라우저는 selector가 얼마나 구체적인지 측정하고 더 구체적인 선택자를 우선시해서 적용 

✅ 특이도 순서 : id > class > element 

 

(쓰지 않는걸 추천) 

▪ inline style : id보다 더 명시적임, 그러나 거의 아예 사용되지 않음 (html에서 인라인으로 작성되는 코드를 말하는 것임) 

▪ !important : 개별 스타일 지정에 사용할 수 있음 -> 안쓰는게 좋음, 비추천, 강제로 이것을 적용하게 함 (특이도와 관련x)

 

CSS Inheritance

▪ css 상속 : 구체적인 특성을 지정하지 않은 하위 요소에 상위 항목 특성이 적용되는 것 

▪ input과 같은 몇몇 태그는 상속을 받지않는 것이 기본으로 되어있곤함 -> 상속 받고싶으면 inherit 사용