오늘은 CSS 연습문제를 풀면 틀렸던 부분과 몰랐던 개념들을 정리해 본다.
오답리스트
#lable.center {...}
id가 label이면서 동시에 class가 center인 엘리먼트를 선택합니다.
.show#only {...}
class가 show이면서 동시에 id가 only인 엘리먼트를 선택합니다.
section h2 {...}
swection의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다.
article + p {...}
+는 article과 인접한 형제 엘리먼트 p를 선택합니다.
section ~ p {...}
~는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다.
div:nth-last-child(2) {...}
div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택합니다.
section > p:nth-last-child(2n+1) {...}
section의 자식 엘리먼트 중에서, 마지막에서 홀수 번째 자식 엘리먼트가 p인 것을 선택합니다.
p:first-of-type {...}
p엘리먼트의 형제 엘리먼트 중 첫 번째 p엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다.)
몰랐던 개념
Attribute 셀렉터
CSS스타일을 적용할 때 attribute 셀렉터를 이용하면 특정한 속성값을 가진 태그에만 스타일을 적용할 수 있다.
예를 들어, a[target] {...} 이라 하면 a 태그의 target이라는 속성을 가진 요소를 선택할 수 있다.
이외에 a[target="value"] 처럼 속성값이 정확이 어떤 값을 가질 때 인지도 설정이 가능하다.
상세한 설명은 여기 링크 참조!
후손 셀렉터와 자식 셀렉터의 차이
후손에는 자식과 손자 손자의 손자도 포함이 되지만, 자식은 딱 자식만 포함된다는 차이가 있다.
예제로 알아보자.
후손 셀렉터 (Descendant selector): body *dir {...} >>>> body의 손자 dir까지 스타일이 적용된다.
자식 셀렉터 (Child selector): body > dir {...} >>>> body의 자식 dir까지만 스타일이 적용된다.
<body>
<dir>
<dir>
</dir>
</dir>
<dir>
<li>
</dir>
</body>
구조 가상 클래스 셀렉터
가상 클래스 셀렉터는 해당 클래스가 실제로 존재하는 것은 아니지만 특정 조건에 따라 작동하는 클래스 셀렉터이다.
약간... 느낌적인 느낌으로는 css에 if문 기능을 달아준 것 같은 느낌이다.
예시 문법:
li:first-child {...}
li:last-child {...}
li:nth-child(3) {...}
활용:
p:nth-chlid(2n+1) {...} >>>>> 홀수번째 p 엘리먼트에만 적용
* TMI nth란 1th 2nd .... nth에서 사용하는 'n번째'라는 의미를 가진다
부정 셀렉터
부정 셀렉터는 가상 클래스 셀렉터의 일종으로 반대의 의미를 가진다. javascript에서 !와 비슷하다.
예시 문법:
p:not(#only) {...}
> p엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택합니다.
요소 상태 셀렉터
요소 상태 셀렉터도 가상 클래스 셀렉터의 일종으로 UI요소가 어떤 상태일 때 스타일을 적용한다.
예시 문법:
button:checked {...}
button:enabled {...}
button:disabled {...}
정합성 확인 셀렉터
정합성 확인 셀렉터는 valid / invalid 값에 따라 스타일이 바뀌는 가상 클래스 셀렉터다. 예제를 찾아보려 했지만, 맘에 드는 예제를 찾지는 못했다. 아무래도 form에 올바른 형식이 입력되었는지 확인하는데에 주로 사용하다보니 짧은 snippet으로 예문을 만드는게 어려워서 그렇지 않나 생각한다. 여하튼, MDN의 예문 아래와 같다.
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: '✖';
color: red;
}
input:valid + span::before {
content: '✓';
color: green;
}
'Front-End > HTML_CSS' 카테고리의 다른 글
| [CSS] Position absolute 정리 (0) | 2022.01.07 |
|---|---|
| CSS Flexbox (0) | 2021.10.19 |
| CSS 박스모델 (0) | 2021.10.10 |
| HTML 태그 (0) | 2021.10.09 |
| HTML 기본구조 (0) | 2021.10.09 |
