□ 네이버 오디오클립 3/3

★ 작성코드

Git 링크.네이버 오디오클립

1. 오디오클립 메인 오른쪽 영역

● display: inline-block 상태에서는 margin: 0 auto; (x축 가운데 정렬)이 적용되지 않기에, display: block으로 바꿔줘야 함

● 결과 스크린샷(인기채널 소개 & 오늘의 발견)

● 결과 스크린샷(오디오클립 안내)

2. 오디오클립 메인 하단 영역

● 결과 스크린샷

3. 오디오클립 카테고리 영역

● nth-child() 활용 방법
① li 태그 중에서 홀수의 li태그에만 적용하기(odd)

예시)

.audio-category .audio-category-lists .category-list:nth-child(odd) a {
    background-color: green;
}

② li 태그 중에서 짝수의 li태그에만 적용하기 (even)

예시)

.audio-category .audio-category-lists .category-list:nth-child(even) a {
    background-color: blue;
}

● 결과 스크린샷(카테고리 영역 메인)

□ 어려웠던 점

특별히 어려웠던 내용은 없었습니다.

□ 해결방법

강의내용에 따라 코드를 작성하고, 필요한 부분은 직접 코드를 수정하였습니다.

□ 학습 소감

어떤 부분을 공통영역으로 정하고, CSS코드를 작성해야 하는지를 점차 알아가고 있습니다.