🎨 [UIUX] 1206 CSS Coding, 코딩 기초 8

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

🖥️ 구조 선택자에 대해 알아봅시다.
✖️
✨ 구조 선택자
부모 태그 안에 자식태그들이 동일한 태그로 구성되어 있을 때 특정 위치에 있는 자식 태그만 선택할 때 사용합니다.
[기본형]
👀 - 선택자:first-child
: 부모 태그 안에 동일한 태그 형제 중 첫번째에 위치한 태그만 선택합니다.(첫째)
👀 - 선택자:last-child
: 부모 태그 안에 동일한 태그 형제 중 마지막에 위치한 태그만 선택합니다.(막내)
👀 - 선택자:nth-child(수열)
: 부모 태그 안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택합니다.
이때 수열 자리에 2를 쓰면 형제 중 두번 째 위치에 있는 태그만 선택해줍니다.
수열자리에는 배수를 이용하여 특정 순번째에 있는 태그들을 다중 선택할 수 있는데 2n을 쓰면 '짝수'라는 뜻이고 2n+1은 '홀수'를 뜻합니다.
만약 3의 배수 위치에 있는 태그들을 선택하고 싶다면 3n이라고 씁니다.
👀 - 선택자:nth-last-child(수열)
: 부모 태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택합니다.
단, last가 붙으면 밑에서 위로 순번을 셉니다. 마찬가지로 수열자리에는 숫자나 배수가 들어갈 수 있습니다.

🎮 형태 구조 선택자에 대해 알아봅시다.
✖️
✨ 형태 구조 선택자
형태 구조 선택자는 부모태그안에 자식태그들이 각각 다른 태그로 구성되어 있을 떄 사용합니다.
구조 선택자는 부모태그안에 자식이 태그가 모두 동일해야 쓸 수 있습니다.
[기본형]
🔊 - 선택자:first-of-type
: 부모 태그 안에 첫번째에 위치한 자식태그를 선택할 때 사용합니다.
🔊 - 선택자:last-of-type
: 부모 태그 안에 마지막번째에 위치한 자식태그를 선택할 때 사용합니다.
🔊 - 선택자: nth-of-type(수열)
: 부모 태그 안에 수열번째에 위치한 자식태그를 선택할 때 사용합니다.
🔊 - 선택자: nth-last-of-type(수열)
: 부모 태그 안에 아래에서 수열번째에 위치한 자식태그를 선택할 때 사용합니다.

🎮 반응 선택자에 대해 알아봅시다.
✖️
💿 반응 선택자는 사용자의 행동에 따라 반응하여 css 디자인을 바꿀 때 사용하는 선택자입니다.
예를 들면 사용자가 마우스를 특정 태그 위에 올리거나 클릭했을 때 상태를 말합니다.
[기본형]
📃 - 선택자:hover ★
: 사용자의 마우스 커서가 위치한 태그를 선택합니다.
📃 - 선택자:active
: 사용자가 마우스를 클릭한 태그를 선택합니다.
단, 클릭하고 있는 동안만 반응한다. 잘 안쓰지 않는다.

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