- 두개의 태그를 묶은 class 요소를 가운데 정렬하려면, 이 클래스에서
margin-left: automargin-right: auto - 패딩 사이즈를 늘리면 전체 박스 사이즈도 함께 늘어남
꽤 괜찮은 박스 그림자 효과
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
- 브라우저별로 margin 과 padding의 기본값이 다를 수 있기에, 0으로 초기화해주는 습관을 기르자.
- 코드를 div파티로 만드는 것보다는, 의미있게 보이게 하기 위해 section과 article태그를 적절히 활용해주자. 컨텐트를 직접 감싸는 태그의 경우, article로 의미 구분해주자! 물론 하는 역할은 div와 똑같지만, 가독성을 위해!
- 일반적으로, 폰트의 160퍼센트 되는 줄간 간격이 가장 읽기 좋은 글임! 따라서 폰트사이즈가 10px이라면
line-height속성은 16px로 주자!
float 가두리 작업
/* float는 물 위에 통나무 동동 떠다니는 것 처럼 서로 겹칠 수 있기 때문에 가두리작업을 해야함 */
.float-wrap{
overflow: hidden;
}이 overflow: hidden은 float로 띄워져 있는 요소들을 다 묶어주고, 그다음에 오는 html 요소들이 이 float의 영향을 받지 않게 해준다. 왜 float를 묶어주는 역할의 이름이 overflow:hidden 인지는 참 추론하기 어려움. 이런 이름때문에 html css공부하기가 난해,,
여튼, float를 overflow:hidden으로 묶어주면 다른 요소들과 겹치지 않게된다.
