css 깨알 지식

not 선택자

not 선택자는 *(univeral selector, 모든것을 선택)와 반대되는 성격을 가진다고 할 수도 있겠다. 일종의 예외를 정의하는 selector 이다. 예시를 살펴보자.

<section>
      <div class="client">
        <div class="client__category">
          <span>Event</span>
        </div>
        <span class="client__name">
          잠비나이
        </span>
        <div class="client__btns">
            <span class="client__description">
              Music Band
            </span>
            <span class="client__btn">2015 &rarr; Present</span>
        </div>
      </div>
      <div class="client">
        <div class="client__category">
          <span>Event</span>
        </div>
        <span class="client__name">
          잠비나이
        </span>
        <div class="client__btns">
            <span class="client__description">
              Music Band
            </span>
            <span class="client__btn">2015 &rarr; Present</span>
        </div>
      </div>

.client {
  color:#FF0400;
  border:2px solid #FF0400;
  display: grid;
  grid-template-columns: 50px 5fr 1.5fr;
}

.client:first-child {
  border-top-width:2px;
}

.client:not(:last-child){
  border-bottom:0px;
}

css를 보면 client 클래스에 border가 적용되어있다. 그런데 border-top 과 border-bottom 이 겹치기 때문에 border-bottom을 없앰으로써 일정하게 유지하고 싶다.

이때 nth-child() 를 써서 일일이 다 적용해도 되지만 개발자는 반복을 싫어하는 걸 넘어서 혐오한다. 그래서 한번에 모든 client 클래스에 적용된 border-bottom을 없애고 싶다.

그러나 마지막 client cell의 border-bottom은 남겨놔야한다. 그때 not 선택자를 쓴다.

not() 괄호 안에 있는 것만 제외하고 다 적용하라는 뜻이다. 그때 .client:not(:last-child) {code} 라고 하면 "client 클래스의 last-child 빼고 모든 client 클래스에 code를 적용하라" 는 뜻이 된다.

직계자손

직계자손만 선택하는 법을 알아보자.

  <header>
        <h1>HOME</h1>
        <span>
          <h1>THINK</h1>
          <h1>INSIDE</h1>
          <h1>BOX</h1>
          <h1>WAIT.. WHAT?</h1>
        </span>
        <p>Furnishing your room<br>will make you happy</p>
        
        <p>We can help you achive the happiness💖😍😍💖</p>
      </header>

header {
    border-bottom: 2px solid;
    > h1:first-of-type {
        font-size: 12px;
        font-weight: 100;
        margin-bottom: 27px;
        padding: 8px;
        }

header의 직계자손중 h1만 골라서 font-size를 12px;로 하고싶다. 이때

header {
  h1 {
    font-size:12px;
  }
}

라고 하면 header의 직계자손 h1 뿐만 아니라 span 안에 있는 h1까지 모두 12px이 적용되어 버린다. 따라서 이때는 > 선택자를 활용한다.

> h1:first-of-type 라고 하면 "header의 직계자손 h1을고르고 직계자손 h1중에 첫번째것을 골라라(좀더 명확하게 확실하게 하기 위해서.)" 라는 뜻이다.

nth-of-type() vs nth-child()

비슷하게 보이는 두 selector들. 과연 무슨 차이가 있을까??

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

p:nth-child(2) { color: red; } /* Now incorrect "Little"이 선택됨 */
p:nth-of-type(2) { color: red; } /* Still works "Piggy"가 선택됨*/

그래서 section 안에 두번째 child(첫번째 p) "Piggy"을 선택하고 싶다고 했을때 어떻게 해야 할까? 결론부터 말하자면 p:nth-of-type(2) 라고 해야한다.

p라는 타입중에 2번째것을 선택한다고 하면 좀 더 이해하기 쉬울것이다.

link 를 살펴보면 p:nth-of-type(2)은 p태그중에 2번째 p 태그를 선택하는 것이고. p:nth-child(2)는 p태그이고 부모자손중에 2번째 자손을 선택하는것이다. (다시말해, section안에 있는 자손태그중에 전체적으로 2번째 자손을 선택)
v
그래서 p:nth-child(2)는 "Little"을 선택하게 되는 것이다.

inherit

atomic-design-storybook 플젝하다가 알아낸 사실.

header__navigation__wrapper 의 height가 부모 height보다 짧아서 세로 정렬을 하더라도 header상에서 상대적으로 navigation이 위에 위치했다. 그래서 부모의 height와 같도록 해야했다.

그럴때를 위해서 존재하는게 상속받는것이다.

.header__navigation__wrapper{
  min-height:inherit;
}

라고 해주니 깔끔하게 되었다.

align-self

1. jokeContainer만 가운데 정렬하고 싶을때는 align-self를 이용하자!

.jokeContainer {
  height: 90%;
  align-self: center;
}

해당 구역만 세부적으로 정렬할때 쓰이는 property이다! 유용하게 사용될것 같으니 기억하자!

every child

어떤 element안에 모든 자식에다가 요소를 주고 싶을때는? --> wild card

.some__element * {
  margin: 9px 0
}

object fit - contain

너비를 조절하면 원래 이미지 너비에 따른 높이의 비율이 자동으로 조절되는 기능.

aspect-ratio

높이와 너비의 비율을 맞추는 prop. 이미지가 아닌 일반 div에도 적용이 됨. aspect-ratio: 1 / 1이라고 하면, 너비가 화면 너비를 꽉채우게 되면서 높이는 너비가 같아짐.