1. CSS의 단위에 vh, vw라는 것이 있다.
vh는 vertical height의 약자이다.
view-port의 높이값을 설정하는 것인데
예를 들어, 브라우저의 높이 값이 900px일때
100vh가 900px이고 1vh는 9px이다.
이와 마찬가지로 vw의 경우, view-port의 너비값이 750px이면
100vw가 750px이고 1vw는 7.5px이다.
view-port에서 일정 픽셀만큼 뺀 크기로 설정하고 싶다면
height: calc(100vh - 78px); 와 같이 사용하면 된다.
2. CSS Reset을 생활화하자.
각 브라우저마다 각 태그의 default값이 다르다. 또한, <a>태그의 경우, 보통 underline을 지우는 것이 보통이고 button태그의 경우, outline을 none으로 하는 경우가 많다. 이러한 초기 CSS Setting을 잡아주고 시작하는 것이 편하다.
3. <div>만 쓰지 말고 다양한 태그를 사용하자.
<section>, <article> 등 상황에 맞게 사용하는 것이 좋다. 이유는 구글의 검색 노출을 위함이다.
4. overflow
자식요소가 전부 img이고 이 img들이 float하다면 부모요소인 div의 height는 0이 된다. 이때, overflow를 사용하면 된다.
devzunky@gmail.com