[TIL #3-3 WECODE] Class값 지정

210217 - WECODE #3

<div class="relative box"></div>
<div class="relative top"></div>

.relative {      }
.box {      }
.top {      }

Class값을 분할하여 부모관계로 지정할 수 있다!

<p class="absolute right-0"></p>

<style>
p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}
</style>

p의 스타일 값은 absolute와 right-0 클래스값에 공통 적용

<div class="product">
  상품1
</div>
<div class="product">
 상품2
</div>

<style>
.product {
  width: 100px;
}
.product:first-child {
  height: 100px;
  background-color: yellow;
}
.product:last-child {
   height: 100px;
  background-color: green;
</style>

.product: nth-chilld를 활용할 수 있다