노마드코더 AI 기초 탄탄 클럽 #3 Position & Pseudo Selector

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: 코코아톡 클론코딩. #3는 Color Card를 구현하는 것이었고 예시대로 만들었다.

잊어버린 부분은 MDN 참고해서 작성했다.

---

챌린지 조건

1. 카드 색상 지정 시 psuedo selector 사용하기.
2. Color의 정보가 들어있는 하얀 네모칸은 position을 이용해 배치하기.

---

flex-flow

• flex-direction과 flex-wrap의 단축 속성
• 여러 개의 카드가 부모 너비를 넘칠 때 다음 줄로 넘기기 위해 사용함.

.card {
  width: 500px;
  height: fit-content;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

---

nth-child(n): pseudo selector

• .color-box라는 동일한 클래스를 가진 요소 4개에 각각 다른 배경색을 주기 위해 nth-child를 사용함.
• 각각의 클래스를 만들지 않아도, 구조적 순서만으로 특정 요소를 타겟팅 했다.

.color-box:nth-child(1) {
  background-color: #ff6347;
}

.color-box:nth-child(2) {
  background-color: #008080;
}

.color-box:nth-child(3) {
  background-color: #deb887;
}

.color-box:nth-child(4) {
  background-color: #d7bfd7;
}

---

position

속성	기준점	문서 흐름 (Space)	특징
static	원래 있어야 할 위치	유지	기본값. 좌표(top, left 등)가 무시됨
relative	원래 있어야 할 위치	유지	자기 자신을 기준으로 살짝 이동 (원래 자리는 비어있음)
absolute	가장 가까운 조상 (static 제외)	제거	공중에 둥둥 떠서 부모를 기준으로 순간이동

.color-box {
  width: 200px;
  height: 300px;
  margin: 10px;
  border: 5px solid white;
}

.text-box {
  width: inherit;
  height: 80px;
  background-color: white;
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
}

---

Series: 노마드코더 - AI 기초 탄탄 클럽