[코드]

[배운내용]

네이버 오디오클립 페이지 실습

영역을 넘어서는 버튼 만들기

기존페이지에서는 container에 overflow:hidden;값을 주고 float: left 혹은 right를 주어 좌우 섹션을 나누어 주었다.
그러나 이렇게 했을 때 컨테이너를 넘어가는 좌우버튼을 적용할 수 없게된다. 적용하면 overflow:hidden값 때문에 반이 잘린채 나타나게 된다.

그래서 오디오페이지에서는 float으로 좌우를 나누지않고, flex-between으로 좌우로 위치를 맞추고, align-items: flex-start로 위에서 부터 컨텐츠가 위치하도록 했다.

버튼은 .btn으로 공통된 속성을 적용시켜주고, .btn_left, .btn_right에 각각 좌우 위치 속성을 준다.

[어려웠던 점]

왼쪽의 첫번째 섹션인 '오늘의 오디오클립'부분에서 flex-between이 제대로 적용되지 않는 오류가 생겼다. 왼쪽 노란색 버튼이 container의 overflow: hidden; 때문에 적용되지않아 이 값을 없애고, float의 left와 right를 없애고 between을 새로 적용한 후 생긴 오류이다.

[해결방법]

강의를 다시 들어본 결과, container의 hidden때문에 float을 풀어주었으므로, between값도 container에 적용시켰다. 그러나 나는 '오늘의 오디오클립'의 audio_slide_wrap 즉, 이미지와 텍스트랩을 포함한 audio_slide와 버튼들에게 between을 적용해준 것이다. 버튼은 이미 absolute와 left, right등으로 위치를 지정해주었으므로 between을 줄 필요가 없다.
container에 between을 적용해주니 해결되었다.

[학습소감]