🎨 [UIUX] 1209 CSS Coding, 코딩 기초 9

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

👀 상태 선택자에 대해 알아봅시다.
✖️
👻 상태 선택자
상태 선택자는 서치바나 로그인창, 체크 박스 등 입력 양식의 상태를 선택할 때 사용하는 선택자 입니다.
[기본형]
🔥 - 선택자:cheaked
: 체크 상태의 input 태그를 선택할 때 사용합니다.
🔥 - 선택자:focus
: 포커스 상태(무언가 입력하거나 클릭할 수 있도록 요소가 활성화 된 상태
네이버에서 검색바가 깜빡깜빡 거리는 모습, tap 키를 눌렀을 때 처럼 무언가 입력할 수 있는 상태 등)
즉, 포커스 상태에 있는 해당 태그를 선택할 때 사용합니다.
🔥 - 선택자:enabled
: 사용가능한(입력 가능한) 상태의 태그를 선택할 때 사용합니다.
🔥 - 선택자:disabled
: 사용 불가능한 상태의 태그를 선택할 때 사용됩니다.

👀 시작 문자 선택자에 대해 알아봅시다.
✖️
👻 시작 문자 선택자
시작 문자 선택자는 태그 내부의 첫 글자나 첫 문장을 선택하는 선택자입니다.
[기본형]
🔥 - 선택자::first-letter
: 첫 번째 글자를 선택합니다.
🔥 - 선택자::first-line
: 첫 번째 문장을 선택합니다.

👀 가상 요소 선택자에 대해 알아봅시다.
✖️
👻 가상 요소 선택자
html 코드에는 존재하지 않는 구조 요소를 만들어 스타일을 부여하는 선택자입니다.
html 문서 내에는 보이지 않지만 미리 정의한 위치에 가상의 요소를 넣어 표현이 가능합니다.
가상 요소 선택자로 만들어지는 가상요소들은 inline 속성을 갖습니다.
[기본형]
🔥 - 선택자::before
: 선택자의 앞에 가상 요소를 생성합니다. 필수 속성으로 content 속성을 넣어 표현합니다.
🔥 - 선택자::after
: 선택자의 뒤에 가상 요소를 생성합니다. 필수 속성으로 content 속성을 넣어 표현합니다.

👀 부정 선택자에 대해 알아봅시다.
✖️
👻 부정 선택자
부정 선택자는 선택된 태그 중 제외하고 싶은 태그가 있을 경우 사용합니다.
[기본형]
🔥 - 선택자:not(제외시킬요소)
: 태그를 다중 선택하는데 특정 요소는 제외하고 선택합니다.

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