이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.

속성 이어쓰기

속성을 이어쓰지 않으면 밑에 쓴 속성이 위의 것을 덮어쓰게 됨.

.app-ui {
  /*border: 1px solid red;*/
  width: 340px;
  height: 640px;
  transform: rotate(-30deg) skewX(20deg) scale(0.7);//속성을 이어씀.
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  background-color: #ddd;
}

hover와 nth-child

hover가 실행될 때, nth-child마다 다르게 실행시킬 수 있음.

.app-ui:hover img:nth-child(1) {
  transform: translate(40px, -40px);
  opacity: 0.2;
}
.app-ui:hover img:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: 0.4;
}
.app-ui:hover img:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: 0.6;
}
.app-ui:hover img:nth-child(4) {
  transform: translate(160px, -160px);
}