1. position 속성 - relative, absolute, fixed
static: 기본값, 아무런 영향을 주지 않는다.
relative: 원래 있던 위치를 기준으로 top, right, bottom, left의 값에 따라 좌표를 지정한다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있으며, 가장 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치된다. 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 가장 상위의 블록을 기준으로 배치한다.
fixed: 스크롤과 상관없이 항상 문서 최상단을 기준으로 좌표를 고정합니다.
inherit: 부모 태그의 속성값을 상속받고 다른 요소들에 영향을 주지 않는다.
2. Display 속성
1) inline
inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
말 그대로 라인 안에 있다고 해서 인라인이다. 즉 줄바꿈이 일어나지 않으며, 한 줄에 다른 요소들과 나란히 배치된다.
#단 inline속성은 width,height,padding,margin 사용이 불가하다.
2) block
block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
block은 inline과 반대의 성질을 갖고 있다고 생각하면 쉽다. 가로 영역을 모두 채우며, 줄바꿈이 들어가 다른 속성을 다른 줄로 밀어내고 전체 영역을 차지한다. width, height 속성을 사용할 수 있다.
3) inline-block
block과 inline의 융합된 형태라고 보면 쉽다. 줄바꿈이 일어나지 않지만, 크기를 지정할 수 있다.
3. float 속성
float은 웹페이지에서 이미지를 움직여서 어떻게 텍스트와 함께 배치할 것인가에 대한 속성이다.
inherit: 부모 요소에서 상속
left: 왼쪽에 블록 박스를 생성. 텍스트는 박스 오른쪽에 위치하게 한다.
right: 오른쪽에 블록 박스를 생성. 텍스트는 박스 왼쪽에 위치하게 한다.
none: 요소를 부유시키지 않음
이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.
4. clear
float 속성을 사용한뒤 사진 주위로 글자가 따라 붙지 않게 하기 위해서 clear 속성을 사용한다. '취소하다'라는 뜻으로 left는 float:left값을 취소하고 right는 float:right값을 취소한다.
clear: none - clear를 설정하지 않은 것과 같다.
clear: left - 왼쪽을 취소
clear: right - 오른쪽을 취소
clear: both - 오른쪽 왼쪽을 취소
