며칠 전 html css만을 사용한 클론코딩을 했던 적이 있었다.
워낙 짧은 강의를 수강하고 만들어서 css, html을 다루는 것에
익숙치 않았다. 그렇기에 몇가지 잘못된 코딩을 한 적이 있었다.
오늘은 그 중 가장 치명적이었던 의사코드에 대한 이야기를 해보고자 한다.
" CSS 의사 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. "
(출처: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes)
예를들어 어떤 선택자의 상태를 지정해 세부 선택자를 추가하는 코드라고 이해하면 적절할 것 같다.
다만 내가 실수한 것은 어떤 선택자의 동적 클래스 (ex) :hover가 아니고 형제 사이의 순서 지정 즉 구조 의사 클래스에 관한 것이었다.
나는
.parentclass .childclass:nth-child(2) {
....}이와같은 예시를 childclass의 이름을 가진 클래스 중 2번째를 선택하는 코드라 이해한 것이다. 이 때문에 당연히 다른 방향으로 적용되거나 아예 적용이 안되는 등의 골치아픈 상황이 연출됐다.
그렇게 이런저런 구글링을 하고 알게 되었는데,
"nth-child는 부모의 자식클래스 전체 중 몇번째를 고르는 코드"였다
last-child나 fitst-child도 같은 의미로 사용된다. 그저 전체 중 마지막과 첫번째 라는 점이 다를 뿐이다.
내가 원하던 코드는 nth-of-type였다.
: nth-child =>모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
: nth-of-type =>모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
출처 :https://www.tcpschool.com/css/css_selector_pseudoClass
이렇게 정의된 것만 보면 무슨 소리인지 잘 모르겠다.
코드를 보며 확인해보는 편이 나을 것 같다.
<div class="parent">
<span class="child-target">hello</span>
<div class="no">hello</div>
<span class="child-target">hello</span>
<div class="no">hello</div>
<span class="child-target">hello</span>
</div>div.parent span.child-target {
background-color: blue;
}실행결과
이제 마지막 hello를 빨간색으로 채울 것이다.
div.parent span.child-target:nth-of-type(3) {
background-color: red;
}실행결과
그렇다면 이제 nth-of-type를 사용하지 않고 nth-child를 올바르게 사용한 것과 내가 잘못 이해하고 사용한 결과를 비교해 실행을 해보겠다.
div.parent span.child-target:nth-child(5) {
background-color: red;
}실행결과(nth-child 올바르게)
nth-child는 전체 자식을 대상으로 하기 때문에 원하는 선택자를 타겟으로 하기 위해 전체 순서를 알고 있어야 한다.
물론 이 상황에서 last-child를 사용해도 같은 결과가 도출될 것이다.
div.parent span.child-target:nth-child(3) {
background-color: red;
}실행결과
3번째 파란 hello가 변하는게 아닌 전체 자식 중 3번째가 변한 것을 알 수 있다. 만약 3번째 자식의 이름이 span.child-target가 아니었다면 오류가 발생해 빨간 배경의 엘리먼트는 없을 것이다.
이렇게 간단한 코드와 실행결과를 통해 알아봤는데 의사 선택자를 사용할 상황에서는 자식선택자가 총 몇개이고 그 중 무엇을 선택할 것인지 잘 확인해야 한다고 느꼈다.
이제 간단한 사이트는 클론할 수 있을 것 같다. 하지만 아직 그리드 개념이 부족하기 때문에 이와 관련된 부분은 나중에 더 보충해야겠다.
당분간은 javascript 기초를 공부할 예정이다.
