CSS의 선택자
전체 선택자
- * 로 생성. 전체적으로 변경해야할 때 사용.
- 크기가 크다면 비효율적. 자주 사용되진 않음.
요소 선택자
- btn, text, h1, p 등 요소를 지정해 선택하는 것.
- 여러 요소들이 있을 경우 ,(쉼표)를 통해 요소들을 합쳐서 지정할 수 있음. ex)
h1,h2 { }
ID 선택자
- 각 요소에 ID를 추가해 특정 ID의 style을 바꿀 때 사용.
- #으로 시작하여 ID로 생성. ex)
#signup{ }
- ID는 페이지 내에 중복되면 안됨.
Class 선택자
- ID와 비슷한 매커니즘. 각 요소에 클래스를 지정하고 연결. 중복되는 style로 요소들을 꾸밀 때 사용.
- .으로 시작하여 클래스 이름으로 생성. ex)
.signin{ }
자손 선택자
- 특정 요소에 연결된 요소들의 style을 지정할 때 사용. 공백으로 표현함.
- ex)
li a { }
- 위와 같은 경우는 a 태그의 style만 변경됨. ,(쉼표) 와는 다름.
인접 선택자
- 결합자라고도 불리며 +를 사용하여 결합.
- ex) h1 + p { }
- 바로 다음에 오는 요소의 style을 변경할 때 쓰임. 위와 같은 경우는 h1 바로 다음에 오는 p의 style을 변경시킴.
- 중복되면 중복되는 요소들의 style을 모두 변경.
직계 자손 선택자
- < 를 사용. ex)
li > a { }
- 자손 선택자와 다른 점은 자손은 요소 안에 있는 다른 요소들 안의 요소까지 바꾼다면 이 방법은 부모의 바로 아래에 있는 요소만 변경된다는 차이가 있다.
속성 선택자
- ex)
input[type=”password”] { }
- type을 정해 style을 변경할 때 사용.
- ex)
a[href*=”google”] { }
- 위 처럼 활용도 가능.
- *= 은 해당 태그 내 어디서든, $= 은 해당 문자로 끝나는 단락 등 여러가지 방법이 있음.
가상 클래스
- 선택자 끝에 붙여 상태를 특정하는 키워드. 요소 뒤에 : 로 사용
- ex)
button:hover { }
- hover는 마우스 올려놨을 때의 스타일과 관련.
- 많은 가상 클래스가 있음. MDN참고해서 상황에 맞게 적용시키면 됨.
가상 요소
- :: 으로 사용하고 어떤 대상이나 선택한 요소의 일부를 선택하여 스타일을 변경 가능.
Cascade 구조(특이도,Specificity)
- CSS에서는 순서가 중요하다.
- 동일 요소의 style을 변경한다면 마지막의 style으로 적용된다.
- 동일 요소를 다른 선택자로 style을 적용했다면 ID > Class > Element 순으로 우선 순위를 가진다.
인라인 스타일은 최대한 지양.
!important
- 명시적인 최우선 예외처리.
- ex) color : red !important
CSS 상속
- inherit 을 사용해 상위 태그의 style을 상속받게 할 수 있다.
CSS 개발자 도구
- 개발자도구를 활용해서 css가 의도대로 적용됐는지, 여러 테스트를 해볼 수 있음.
