💻 학습내용

🛫GIT-HUB

HTML | youtube_left_nav
CSS | youtube_left_nav
HTML | youtube_main
CSS | youtube_main

left_nav_footer

⭐️ word-break 설명

#youtube_left_content #youtube_footer .txt_wrap a{
	margin-right: 8px;
	color: #aaaaaa;
	font-size: 12px;
	font-weight: 500;
	word-break: keep-all;
}

🖤 단어별로 줄바꿈을 하고 싶을 때 keep-all을 입력
🖤 글자 단위로 줄바꿈을 하고 싶을 때 break-all

main_content

#youtube_main_content ul {
	width: 100%;
	height: 100%;
	align-items: flex-start;
}
#youtube_main_content ul li {
	width: 24%;
	background-color: #212121;
	margin-bottom: 40px;
}
#youtube_main_content ul  li .video_thumbnail {
	width: 100%;
}
#youtube_main_content ul  li .video_thumbnail a {
	position: relative;
	display: block;
	width: 100%;
}
#youtube_main_content ul  li .video_thumbnail img {
	width: 100%;
}

🖤 이미지를 자연스럽게 리사이즈 하기 위해서 정확한 픽셀값을 입력하지 않고 퍼센테이지로 입력한다.
🖤 이미지 한쪽에만 위드 100%르를 지정하면 비율은 유지하고 높이값은 자동으로 맞춰지게 된다
🖤 우리가 만들어놓은 li 24%에 맞춰서 비율은 유지하지만 크기가 바뀌게 된다.

📝 마무리

💛 이미지 크기를 정확하게 지정하지 않고 비율로 설정하는 걸 처음 해봤는데
화면이 줄어들면 자연스럽게 이미지의 크기도 조정되어서 신기했다
💛 left_nav 부분은 반복되는 디자인이어서 코드를 작성하는데 수월했다. 비슷한 구조의 코드들은 따로 저장해서 필요할 때 바로바로 쓸 수 있도록 하면 좋을 것 같다.
💛 공간의 크기를 잘 설정해주어야 레이아웃이 깨지지 않는다. 수치를 항상 신경쓰고 작성해야 한다는 것을 깨달았다.