position property

element 위치나 크기를 정하는데에 있어 선행돼서 적용되는 설정

relative

• top, bottom, right, left 값이 지정되지 않는 이상 기본설정(static)과 동일합니다
• 값을 입력하면 이에 따라 위치가 조정될 것입니다

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;/* 위로 20px 이동 */
  left: 20px;/* 좌측으로부터 20px 이동(멀어짐) */
}

absolute

• 특정 부모(relative를 지니고 있는)에 대해 상대적으로 위치가 지정됩니다
• 만약 부모 요소가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다

fixed

• 페이지가 스크롤 되더라도 같은 위치에 고정됨
• relative 같이 top, bottom, right, left 이용하여 위치 설정

---

inline / block

inline

• 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다
• inline 성질을 갖게하는 css property

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

block

• 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다
• block 성질을 갖게하는 css property

.block-span {
  display: block;
}

inline-block

• inline 요소와 비슷하지만 너비와 높이를 지정할 수 있습니다
  http://ko.learnlayout.com/inline-block.html

박스 그리드

/* float, clear 이용 */
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

/* inline-block 이용 */
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

레이아웃

• inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다
  (아마 이 프로퍼티는 top으로 설정하고 싶을 겁니다)
• 각 칼럼의 너비를 설정할 필요가 있습니다
• HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

• vertical-align 이란??
  인라인블록을 포함한 여러 인라인 요소의 수직 정렬을 위해 사용됩니다
  • 속성값: Baselin, Middle, Text-top, Text-bottom, Top, Bottom, Sub, Super
    • Top : 요소의 인라인박스 상단을 라인박스 상단에 정렬
      
• html 칼럼(column)이란??
  사람들은 줄이 너무 긴 경우 텍스트를 읽기 어렵습니다. 한줄 끝에서 다음줄 처음으로 눈을 옮기기가 너무 긴 경우, 어느 줄을 읽었는지 잊어버립니다.
  그래서 너비가 제한된 텍스트 단(column)을 나란히 놓아야 합니다.
  마치 신문처럼

---

float

이미지 주위를 텍스트로 감싸기 위해 만들어진 property
left, right, none 중에서 하나를 값으로 줄 수 있습니다

clear

• float로 인해 겹쳐있는 element를 분리하기 위해
  - float 요소를 감싸고 있는 태그에 clear를 사용
  • float 요소의 위치를 비우게끔 하여 분리

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;/* float 위치와 동일하게 */
}