간단한 요약

네이버 쇼핑 페이지의 아주 간단한 버전을 마무리 작업했다.

---

배운 내용

1. overlay

• 두 siblings가 있다면 먼저 나오는 element(보통 overlay element)에 absolute, 뒤 이은 element에 relative를 주게 되면 overlay 효과를 구현할 수 있다. (이 때, overlay element에 opacity 효과를 보통 주게 된다.)
• 위의 설정으로, relative(3차원적 속성)가 적용된 element가 앞의 absolute(3차원 속성)의 위쪽으로 배치되게 됨
• 따라서 뒤 따르는 3차원적 속성인 relative sibling의 z-index가 더 높게 잡혀 위쪽으로 배치되는 원리임

2. 원 안의 숫자 가운데 정렬

해당 element는 span임. 하나의 공식으로 외워도 될 듯.
특히, line-height: 42px;와 text-align: center;의 활용을 기억하자!

.discount {
  position: absolute;
  top: 6px;
  right: 5px;
  line-height: 42px;
  text-align: center;
  display: block;
  background: red;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 14px;
  color: white;
}

3. 무료 이미지 웹사이트

3-1. PIXABAY
3-2. UNSPLASH
3-3. 회사의 로고를 이용할 필요가 있는 경우, 해당 회사의 이름 및 로고를 같이 검색하면 공식적으로 제공되는 경우가 종종 있음.

---

어려웠던 내용

역시 어려웠던 내용은 없었다.

---

소감

큰 layout 작업을 초기에 탄탄하게 다져 놓으면 이후에 이루어지는 작업이 훨씬 수월해지는 것을 배웠다.

또한 반복되는 layout이나 part가 있다면, 그 부분은 반드시 재사용이 가능한 code를 독립적으로 구성해두는 것이 훨씬 효율적인 업무로 이어짐을 배웠다.

---

나의 코드

github에 차곡차곡 잔디를 심는 중이다.