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

★ 작성코드

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

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

● latter-spacing : 글자간의 간격 조정

예시)

.audio-section .audio-header h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.8px;
}

※ 글자간의 간격을 0.8px만큼 좁힘

● audio-container에서 overflow: hidden을 사용하지 못하는 경우

• 오늘의 오디오클립에서 방향 버튼을 표시하려고 할 때, container에 overflow: hidden이 적용되어 있으면 아래와 같은 결과가 나옴

#audio-main .audio-container {
    overflow: hidden;    
}

• 방향 버튼이 정상적으로 위로 표현되게 하기 위해 overflow: hidden과 float를 사용하지 않고, flex-between를 사용함

[html]
<div class="audio-container audio-flex-between">

[CSS]
#audio-main .audio-container {    
    align-items: flex-start;
}

● 결과 스크린샷(오늘의 오디오클립)

● 결과 스크린샷(오디오클립 추천 오리지널 & 나를 위한 플레이리스트)

● 결과 스크린샷(라이브ON)

● 결과 스크린샷(오디오북 TOP 100 & 새로 나온 채널)

□ 어려웠던 점

강의 내용에 덧붙여서 코드를 작성하였을 때, 원하는 결과가 나오지 않아서 이를 수정하는 것이 어려웠습니다.

□ 해결방법

시간을 들여서 작성한 부분을 하나하나 검토하고, 수치를 조정하면서 오류를 수정하였습니다.

□ 학습 소감

강의 내용을 따라하는 것은 크게 어렵지 않지만, 더 비슷하게 표현하기 위해 추가적인 코드를 작성했을 때, 오류가 생기지 않고 원하는 결과를 나오게 하는게 생각보다 많이 어려웠습니다.