7. Text columns

float를 사용안하고..

-webkit-column-count:  3;

column-count: 3;

-webkit-column-gap: 50px;

column-gap: 50px;

-webkit-column-rule:  1px solid #ccc; witdth, type, color 

column-rule: 1px solid #ccc;

text-align: justify;

8. Position relative

Position property의 종류: Static, Relative, Absolute, Fixed, Inherit

relative는

normal document flow에서 offset

9. Absolute Position

배너 사진 중간에 배너글을 넣을 때..

사진은 relative로 하고 글씨를 absolute로 해서..

글씨가 사진 top-left가 기준되게..

10. fixed Position

fixed는 다큐먼트에 고정됨 왼쪽위부터 시작.

navigation 메뉴를 상단에 고정시킬때

nav{

  background: #333;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%

}

nav ul:after{

  content: "";

  display: block;

  clear: both;

}

nav li{

  list-style-type: none;

  margin: 0 10px;

  color: #fff;

  float: right;

}

11. Z-index & Stacking Order

nav위치를 위쪽으로 옮기면, 우선순위가 낮아 지므로 사진이 위로 올라감.

z-index: 1; 로 우선 순위를 바꿔줌.

12. clipping content

max-height: 150px;

over-flow: hidden;

auto, scroll, visible