🎨 [UIUX] 1205 CSS Coding, 코딩 기초 7

✏️ 2024. 12월 05일 / CSS 언어, 코딩 기초 7

📁 선택자 속성에 대해 알아봅시다.
✖️
이전 포스팅에서 작성하였던 내용을 참고하면,
선택자란, 내가 지금 불러오고자 하는 태그를 뜻합니다.
현재까지 배웠던 선택자를 정리해보겠습니다.

🖥️ 후손 선택자와 자손 선택자에 대해 알아봅시다.
✖️
✨ 후손 선택자 ★
후손 선택자는 부모태그 안에 있는 모든 자식태그들을 말합니다.
후손 선택자의 표기는 공백으로 표기합니다.
[기본형]
선택자A 선택자B
✨ 자손선택자
자손선택자는 부모선택자의 바로 아래계층에 있는 자식태그들을 말합니다.
표기는 '>'로 표기합니다.
[기본형]
선택자A > 선택자B

🖥️ 동위선택자에 대해 알아봅시다.
✖️
✨ 동위 선택자 (= 형제 선택자)
동위 선택자(형제 선택자)는 형제 관계에서 뒤에 위치한 동생태그들을 선택할 때 사용하는 선택자입니다.
[기본형]
🔥 1. 선택자A + 선택자B
: 선택자A 바로 아랫줄에 있는 선택자B를 선택합니다.
만약 바로 아랫줄에 선택자B가 없으면 적용되지 않습니다.
🔥 2. 선택자A ~ 선택자B
: 선택자A 뒤에 있는 선택자B를 선택합니다.
만약 동일한 태그가 여러개 있으면 다중 선택합니다.

🖥️ 속성선택자에 대해 알아봅시다.
✖️
✨ 속성 선택자
속성 선택자를 사용하면 특정 속성을 가진 html 태그를 선택할 수 있습니다.
선택자 뒤에 []를 붙여 표현합니다.
[기본형]
🔥 1. 선택자[속성]
: 선택된 태그 중 해당 속성을 가진 태그만 선택합니다.
🔥 2. 선택자[속성=값]
: 선택한 태그 중 해당 속성과 값이 일치하는 태그를 선택합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)