□ 사이트 카피캣 – 네이버 메인 2/2

★ 작성코드

Git 링크.네이버 카피캣

1. 네이버 오른쪽

● justify-content: space-between의 단점

• 좌우 끝으로 배치한다는 특성
• flex-wrap: wrap 상태에서 첫 번째 줄과 두 번째 줄에 나오는 컨텐츠의 개수가 다를 경우
  → 다음 줄에 나올 컨텐츠가 좌우 끝으로 극단적으로 배치됨

• 해결방법 : ① 컨텐츠의 개수를 맞춤 ② float: left를 사용해서 정렬(권장)

● 결과 스크린샷(로그인 부분)

● 결과 스크린샷(트렌드 쇼핑 부분)

2. 네이버 하단

● :before를 사용하여 문자 앞에 막대바를 만듬
● vertical-align은 자주 사용하는 middle 뿐만이 아니라 숫자값도 입력 가능함
예시) { vertical-align: -1px; } : 1px만큼 아래(- 마이너스값)로 내림

#main-footer .corp-lists li:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #e4e8eb;
    margin: 0 8px;

    vertical-align: -1px;
}

● 첫 번째 문자 앞에는 막대바가 없으므로 :first-child를 사용해서 없는 상태로 초기화함

#main-footer .corp-lists li:first-child:before {
    content: initial;
}

● 결과 스크린샷

□ 어려웠던 점

기존 코드의 반복이라서 큰 어려움은 없었습니다.

□ 해결방법

길어지는 코드와 비슷한 내용의 반복으로 인한 코드 오타를 줄이고자 노력하였습니다.

□ 학습 소감

지금까지 배운 내용을 복습할 수 있어서, 반복되는 코드들은 점점 익숙해지는 것 같습니다.