CSS 선택자의 종류와 스타일 상속에 대해서 알아보자
CSS 선택자
CSS 선택자의 종류에는 기본, 복합, 가상 클래스, 가상 요소, 속성이 있다
기본 선택자
- [*] - 전체 선택자, 모든 요소를 선택한다
- [ABC] - 태그 선택자, 태그 이름이 ABC에 해당하는 요소들을 선택한다
- [.ABC] - 클래스 선택자, class 값이 ABC인 요소를 선택한다
- [#ABC] - 아이디 선택자, id 값이 ABC인 요소를 선택한다
복합 선택자
- ABCXYZ - 일치 선택자, 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
(보통 앞(ABC)에는 태그 선택자를 적고 다음(XYZ)에 id나 class 선택자를 작성) - ABC > XYZ - 자식 선택자, 선택자 ABC의 자식 요소 XYZ를 선택
- ABC XYZ - 하위(후손) 선택자, 선택자 ABC의 하위 요소인 XYZ를 선택
- ABC + XYZ - 인접 형제 선택자, 선택자 ABC의 다음 형제 요소(같은 부모를 공유하는 요소)XYZ 하나를 선택
- ABC ~ XYZ - 일반 형제 선택자, 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택한다
가상 클래스
-
ABC:hover
선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택 -
ABC:active
선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 -
ABC:focus
선택자 ABC 요소가 포커스 되면 선택💡Focus 가능 요소
HTML의 대화형 콘텐츠가 Focus 가능 요소에 포함되며 종류는 input, a, button, label, select 등이 있다.
대화형 콘텐츠가 아니더라도 tabindex 속성을 사용하면 focus 될 수 있다. -
ABC:first-child
선택자 ABC가 형제 요소 중 첫째라면 선택 -
ABC:nth-child(n)
선택자 ABC가 형제 요수 중 n번째라면 선택 -
ABC:not(XYZ)
선택자 XYZ가 아닌 ABC 요소 선택 (특정 선택자를 부정하는 방식으로 선택)
가상 요소
-
ABC::before
선택자 ABC 요소의 내부 앞에 내용을 삽입한다
가상의 inline 요소를 만들어서 요소의 앞에 내용을 삽입한다 -
ABC::after
선택자 ABC 요소의 내부 뒤에 내용을 삽입한다
💡before과 after 모두 내용(content)을 작성하지 않으면 아무런 변화도 생기지 않는다.
속성
- [ABC]
속성 ABC를 포함한 요소 선택
[type] {color: red;}- [ABC="XYZ"]
속성 ABC를 포함하고 값이 XYZ인 요소를 선택
[type="password"] {color: red;}스타일 상속
💡스타일 상속이란?
스타일(CSS)이 부모 요소로부터 상속되어 자식 요소도 적용되는 것
스타일 상속이 되는 속성들은 모두 글자나 문자 관련 속성들이다
- font-style
- font-weight
- font-size
- line-height
- font-family
- color
- text-align
...
또한 스타일 상속에는 실질적으로 상속이 되지 않는 속성도 강제로 상속시킬 수 있는 방법인 강제 상속 방법도 존재한다
- inherit
속성값에 inherit을 지정하면 자식요소가 부모요소로부터 강제적으로 상속 받을 수 있다
선택자 우선순위
💡우선순위란?
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할지 결정하는 방법
우선 순위가 높은 순 정리
- !important
- inline 선언 방식
- ID 선택자
- Class 선택자 ( 가상 클래스 선택자)
- 태그 선택자
- 전체 선택자
⚠️ 만약 우선순위가 같다면, 더 나중에 작성한 속성 값을 우선으로 따르게 된다
속성
CSS 요소에는 여백을 지정할 수 있으며 여백의 종류는 외부 여백(margin)과 내부 여백(padding)이 있다.
margin
- 요소의 외부 여백을 지정하는 속성
margin은 0 일때는 외부 여백이 없는 상태이고 음수값을 가질 수 있다. - 음수값을 가지면 요소가 줄어들어 서로 겹칠 수 있다.
padding
- 요소의 내부 여백을 지정하는 속성이며, 요소의 자체 크기가 커진다는 특징이 있다.
또한 요소에 테두리 선을 부여할 수 있는데 CSS에서는 테두리 선을 border 이라고 한다.
border
- 요소의 테두리 선을 말하며
테두리 선의 두께와 종류, 색상을 지정할 수 있다. - 테두리를 적용하면 요소가 테두리 선 만큼 커진다는 특징이 있다.
margin, padding, border 모두 다음과 같은 순서로 width 속성을 지정할 수 있다.
ex)
- border-width: top,right,bottom,left;
- border-width: top,bottom left,rigth;
- border-width: top left,right bottom;
- border-width: top right bottom left;
