1. css에서 요소를 배치할때

이렇게 1개의 요소만 왼쪽이고 나머지 3개는 오른쪽 배치로 떨어져있을때?

html 구성

	<div class="local-nav-links">
    <a href="" class="product-name">AirMug Pro</a>
    <a href="#">개요</a>
    <a href="#">제품사양</a>
    <a href="#">구입하기</a>
  </div>

대신에 감싸고 있는 부모 <div class=”local-nav-link”> 가 width가 정해져야한다.

왼쪽으로 보내고 싶은 요소에게 marin-right : auto 를 주게되면 오른쪽 마진을 다 사용하고 왼쪽으로 붙게된다.

.product-name {
  margin-right: auto;
}

기존의 나같으면 따로 div로 묶고 display : flex justify-content : space-betweem 이랗게 먹였을텐데….🧐

2. css에서의 not 이란??…

다 똑같은 a 태그인에 Airmug pro인 요소만 margin-left를 제외하고 싶을때…

not을 사용하면 된다.

/* a태그들 중에 .product-name인 애만 빼고 margin-left 적용 */

.local-nav-links a:not(.product-name) {
  margin-left: 2em;
}

3. css에서도 우선순위가 있다.

4. mobile first?? or desktop first???