안녕하세요.🥰🥰🥰
지난시간에 id선택자와 class선택자를 알아보았는데요.
오늘은 나머지 선택자를 알아보도록 하겠습니다.
선택자의 개념! 지난 시간에 했던 것이지만 다시 한 번 복습해보겠습니다.
선택자란, CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
개념을 정리 했으니 바로 살펴보도록 하겠습니다.😘
1. type 선택자
html 문서의 태그 이름을 선택자로 사용할 수 있습니다.
2. id 선택자
같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있는데 HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다.
3. class 선택자
여러 개의 요소에 같은 class명을 부여할 수 있습니다. 하나의 요소에 여러 개의 class명을 부여할 수도 있구요.
HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙이고, CSS에서는 class선택자 앞에 '.'을 붙입니다.
See the Pen Untitled by siyeon kim (@doitsiyeon) on CodePen.
4. 전체 선택자
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로 '*'로 표시합니다.
See the Pen 전체 선택자 by siyeon kim (@doitsiyeon) on CodePen.
5. 하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
See the Pen 하위 선택자 by siyeon kim (@doitsiyeon) on CodePen.
6. 자식 선택자
자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를
'>'로 분리합니다. html과 css만 색이 변경된 것을 확인 할 수 있습니다.
See the Pen 자식 선택자 by siyeon kim (@doitsiyeon) on CodePen.
7. 인접 선택자
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 '+'로 분리합니다.
See the Pen Untitled by siyeon kim (@doitsiyeon) on CodePen.
8. 형제 선택자
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며'~'로 구분합니다.
See the Pen 형제 선택자 by siyeon kim (@doitsiyeon) on CodePen.
9. 그룹 선택자
그룹 선택자는 여러 선택자들을 ','로 구분하여 함께 묶어 속성을 부여하는 것입니다.
10. 속성 선택자
HTML 요소의 속성 유무 또는 속성값을 중괄호 [ ] 안에 넣어 선택자로 사용할 수 있습니다.
- h1 [class] : class 명을 가진 h1 요소
- img [alt] : alt명을 가진 h1 요소
- p[class="abc"] : class명이 유일하게 'abc'인 p요소
11. 가상 클래스 선택자
가상클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다. 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다.
12. 가상요소 선택자
가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
- :first-letter 요소의 첫글자
- :first-line 요소의 첫 줄
- :first-child 같은 요소 중 첫 번째 요소
- :last-child 같은 요소 중 마지막 요소
- :nth-child(n) 같은 요소 중 n번째 요소
- :before 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
- :after 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)
:befor와 :after는 선택한 요소의 자식 요소 맨 처음과 맨 마지막에 생성됩니다.
13. 종속 선택자
종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 형태입니다.
마크업이 위와 같을 때 #atxt와 p#atxt는 같은 선택자입니다. 다만 이후에 나오겠지만 둘의 우선순위는 다릅니다.
p#atxt가 #atxt보다 높은 우선순위를 가지게 됩니다.
14. 선택자의 우선순위
선택자의 우선순위는 중요합니다. 같은 선택자가 여러 CSS명령을 중복으로 받게 된다면 컴퓨터는 어떻게 처리하게 될까요? 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.
우선 순위는 다음과 같습니다!
다만 부여한 속성이 적용되지 않는다면 혹시 이전에 작성한 CSS중 더 높은 순위를 갖는 선택자가 있었는지 의심해봐야 한다는 것입니다.
오늘도 열심히 공부해보았습니다.! 이제 막 CSS를 배우기 시작한 사람으로 함께 노력했으면 좋겠습니다.
화이팅입니다!