학습 한 내용

e스포츠 왼쪽 영역을 도면작업하는 실습을 했다
큼직큼직한 박스들이 많이 보여서 구역별로 디자인을 해야겠다라는 생각을 했고 강사님 께서도 그렇게 생각하셨다 html 에 간단한 작업후 디자인을 이용하여 구역을 나눴는데


width: 50%; height: 50%; 를 사용하여 전체를 이용하는게 아닌 딱딱 구역의 절반만큼 이용하고 한공간에 한 박스만 들어가도록 설정했다 두박스가 한 공간인 곳은 없다는 것이다.
여기서 article부분에 float: left; 를 사용하여 박스들을 왼쪽정렬을 해놓고 article .one 부분에 height: 100%를 사용하여 플롯에 의한 레이아웃 틀어짐을 이용하여 왼쪽 박스는 100% 오른쪽 박스는 50%씩 사용하여 원하는 박스들의 레이아웃을 맞췄다.

상단 같은 경우는 스크롤을 내려도 고정되있는 상태에서 어떤 부분을 지나든 고정되어 있기 때문에 fixed를 사용했고 다른 부분과 겹쳤을때 무조건적으로 보여야 하기 때문에 z-index: 99999; 를 적용 시키는 모습이다

텍스트들이 많을 때 뒤에 ...표시처럼 생략해주는 소스인데 익스플로우에선 적용이 안될 수도 있다
display를 -webkit-box를 이용하고 -webkit-line-clamp: 2; -webkit-box-orient: vertical; 을 사용하는게 핵심이다.

학습 후 소감

다른 페이지들과 달리 생각보다 다른 내용들도 많았고 어렵진 않은 내용들이라 금방 할 수 있었고 리그오브레전드가 라이브로 방송되는걸 보니 괜히 흐뭇 했다 요즘 들어 반복적인 내용들을 실습하다보니 계속 머릿속에 축적되고 이제 언제 어디서 어떤부분을 작성해야할 지를 알것 같았다.
너무 감사드립니다