간단한 요약
오늘은 naver 웹페이지의 header와 main의 왼쪽 부분의 Layout 및 css 작업을 실습하였다.
배운 내용
1. width: calc()
width뿐만 아니라 크기를 결정하는 곳에서 calc(100% - 52px)라는 식의 방법을 사용하면 조금 더 유연하게 크기를 입력할 수 있다.
2. focus 활성 제거
XXX:focus { outline: none; }으로 커서가 갔을 때의 효과를 제거할 수 있다.
3. CSS Generator Tool
여기에서 아주 다양한 css효과를 테스트하여 사용할 수 있다.
4. line-height 활용
어떠한 공간의 높이 값이 정해져있을 때, 그 children 요소에 line-height: 그 높이값을 정해주면 y축 중앙 정렬이 가능하다.
어려웠던 내용
어려웠던 내용은 없었다. 다만 float: left;과 같이 사용되는 overflow: hidden;으로 높이값을 인식하는 트릭을 종종 까먹었다. 숙지해야 할 듯!
소감
확실히 전보다는 더 짜임새 있게 그리고 구조적으로 layout 작업을 할 수 있게 되었다.
나의 코드
늘 그렇듯, github에 업로드했다.
