Dev Log #36 - 8월 18일
오늘 학습한 내용
✅ 1. 네이버 오디오 클립 main_right
1. 네이버 오디오 클립 main_right
- button태그 inline-block
#audio_discovery .audio_body .btn_more {
display: block;
margin: 0 auto;
}
👉 html
👉 css
2. 네이버 오디오 클립 footer
👉 html
👉 css
👉 결과물
3. 네이버 오디오 클립 카테고리 카피캣
- 네이버 오디오 클립 카테고리
- flex에서 justify-content가 space-between일 경우 생기는 불편한 점을 flex-start로 바꾼 후에 nth-child()를 이용하여 해결했다.
nth-child()
- 홀수: nth-child(odd)
.audio_category .audio_category_lists .category_list:nth-child(odd) a { background-color: yellow; }
- 짝수: nth-child(even)
.audio_category .audio_category_lists .category_list:nth-child(even) a { background-color: pink; }
👉 html
- header와 footer는 audio 메인과 동일하므로 생략
👉 css
👉 결과물
오늘 학습 후기(어려웠던 점, 개선할 점)
오늘 수업은 네이버 오디오클립 메인 오른쪽 부분과 푸터 부분을 모두 카피캣 하는 실습시간을 가졌다. 그리고 오디오클립 중 카테고리 화면을 카피캣 실습했다. 오늘 수업중 가장 인상 깊었던 부분은 flex에서 justify-content가 space-between일 경우 생기는 불편한 점을 flex-start로 바꾼 후에 nth-child()를 이용하여 해결한 부분이다. 또한, 실습 중 어려웠던 부분은 다음과 같다.
- main_right영역 레이아웃이 어그러져서 원인을 찾아서 아래와 같이 수정함.
#audio_main .audio_container {
align-items: flex-start;
}
실습 중 main_right부분이 기존 header에서 align-items: center;로 지정되어 있어서 캐스케이딩 방식을 이용해서 flex-start로 수정해서 반영했다. 오늘 수업을 마지막으로 네이버 카피캣 실습 작업을 모두 완료하게 되었다. 긴 시간동안 네이버 카피캣 실습을 진행하면서 html과 css를 이용해서 레이아웃을 작업하는 방법에 대해 많은 것들을 배울 수 있었다. 네이버 카피캣 실습을 하면서 배운 바탕으로 다음의 웹사이트를 제작할 때에 많은 도움이 될 것 같다. 👩🏻💻🔥
Author And Source
이 문제에 관하여(Dev Log #36 - 8월 18일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juhuii/Dev-Log-36-8월-18일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)