💻 학습 내용

🛫 GIT-HUB

HTML | naver_audio_main_left
CSS | naver_audio_main_left

main_left

🖤 .main_container{overflow:hidden;}
코드를 작성할 경우 float 기능을 사용하지 못한다.

🖤 position: relative; ,posititon:absolute; 를 활용하여 레이아웃을 겹쳐지도록 하였다.

🖤 #audio_channel .audio_body ul{align-items: flex-start;} flex box를 이용하여 공간을 배치하였는데 제일 위에서부터 정렬 될 수 있도록 {align-items: flex-start;}를 추가적으로 작성해 주었다.

📝 마무리

💛 반복적으로 적용되는 디자인은 동일한 클래스로 묶어서 작성하는것이 훨씬 더 편하다는 것을 알았다.

💛 수업을 들으면서 저번 보다 div 태그를 작성하는데 덜 헷갈리게 되었다. div 태그를 먼저 작성하고 div태그 안에 들어갈 내용들만을 들여씌기 한 후에 닫힌 div태그를 작성해 주면 된다.