💻 학습 내용

🛫 GIT-HUB

HTML | naver_esports_main_left
CSS | naver_esports_main_left

esports_main_left

🖤 header 부분이 main 레이어 뒤로 숨겨지지 않도록 z-index : 999999; 가장 큰 값을 주어서 어느 레이어라도 제일 앞으로 나오도록 했다

🖤 2줄 말줄임표를 만드는 방법

display: -webkit-box;
	overflow: hidden;
	max-height: 38px;
	-webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;

이 방법은 익스플로어에서는 적용이 안될수도 있다
만약에 3줄로 바꾸고 싶으면 line-clamp``````를 3으로 바꾸고 max-height```값을 조정하면 된다

📝 마무리

🖤 오늘 수업 시간에 많이 본 영상 부분은 수업을 진행하지 않았지만, 혼자 복습 차원에서 작성을 해보았다.
생각보다 사이즈를 설정하고 찾는게 쉽지 않았고 absolute를 적용해도 원하는 위치로 가지 않아서 짜증이 났다...🥲
원하는 결과물을 얻기는 했다..
image_wrap 부분의 height를 image 크기와 동일하게 맞추고 display_flex가 적용이 되지 않길래 i,와 .time 부분에 따로 absolute를 적용하고 left, bottom, right를 이용해서 위치를 조정했다.
그냥 위에 있는거 코드 복사 붙여넣기 해서 하면 될 줄 알았는데 생각보다 시간이 오래 걸려서 화딱지가 좀 나긴 했지만 어쨌든 원하는 결과물을 얻어서 뿌듯했다.
직접 코드를 작성한다는 건 생각보다 많은 창의력을 요하는 것 같다