여러가지

1. div박스 내에 이미지를 삽입했는데 이미지 아래에 div박스 공간이 남는다면, 이미지에 vertical-align: bottom 속성을 주면 박스가 이미지로 꽉 차게 된다. (모던 웹사이트 디자인의 정석 - 207p)

2. 미디어쿼리(뿐만 아니라 무언가 덮어씌울 css를 설정할 때)작성할 때, 당연하지만 css 선택자의 레벨에 따른 우선순위를 꼭 맞춰서 작성해줘야 한다.

3. position: fixed에서 left, right 값을 0으로 지정하고 margin: 0 auto; 를 주면 가운데로 배치된다.

4. 화면 밑에서 slide-up 되는 효과 : div박스 height를 0으로 설정하고 bottom: 0으로 바닥에 붙인 뒤, height: 100%로 트랜지션을 주면 쭈욱 올라옴.

5. position

relative는 static과 똑같이 흐름이 있지만 부모컨테이너에 대해 top, left 등 위치 속성을 정할 수 있게 된다.

absolute는 흐름이 없다. fixed와 같다. 다만 앵커포인트는 부모컨테이너의 (0,0)일 뿐.

fixed의 뷰 포인트는 window의 (0,0)이다. 

6. div

div컨테이너는 아무 설정이 없는 경우, width은 100%라고 볼 수 있다.

근데 만약 부모가 있는 child라면 부모 컨테이너의 content영역에 대해 100%이다.

부모컨테이너에 padding값이 적절히 있으면 부모컨테이너의 중앙에 위치하는것을 볼 수 있다.

부모컨테이너에 크기값이 없으면 흐름이 있는 자식요소의 크기에 따라 그 크기가 정해진다. 즉 float, fixed, absolute는 부모컨테이너 크기에 영향을 주지 않는다. 

7. overflow

overflow는 content영역에 있는 것들에 대해 적용이 된다. 컨테이너의 높이가 설정되어 있는데 그 높이보다 내용물이 많아서 넘쳐 흐를 때, border style을 적용하면 내용물과 겹쳐서 border가 표시될 것이다.

8. z-index

z-index는 position이 특정되어야만 작동한다! static으로는 작동하지 않는다!

9. keyframes을 이용한 animation을 사용했을 때, 부모컨테이너가 display: none 상태였다가 다시 보여지게되면 애니메이션이 처음부터 작동한다.