Position

static

static[ˈstætɪk] : 고정된, 정적인
Position은 default 값으로 static값을 가지며, static은
HTML에서 정의된 순서대로 자연스럽게 Browser에 보여지는 것을
의미한다.

relative

relative[ˈrelətɪv] : 상대적인
relative는 HTML에서 정의된 기존의 자신의 Position을 기준으로
상대적인 좌표에 위치되는 것을 의미한다.

absolute

absolute[ˈæbsəluːt] : 절대적인
absolute는 가장 가까운(부모, 상위 요소) 특정 요소의 위치에 대한
절대적인 좌표에 위치되는 것을 의미한다.
해당 부모요소에 Position 값이 존재해야 한다.

fixed

fix[fɪks] : 고정시키다
fixed는 뜻 그대로 고정시키는 것을 의미한다.
relative, absolute 등의 값과는 어떤 요소에 영향을 받는 것이 아닌,브라우저 화면 상의 좌표에 고정시킬 수 있는 점이 특징이다.

➕ sticky

sticky[ˈstɪki] : 끈적거리는, 달라붙는
fixed와 비슷하게 고정이 되지만,
'화면 상의 위치'가 기준이 아닌 원래 본인의 위치에 있다가,
스크롤을 내리거나 올릴 시 고정되는 특징을 가진다.

Inline & Block

inline

in-line[ínlàin] : 직렬의, 일렬로 늘어선
inline level은 한 줄에 브라우저 상 공간이 남는다면,
일렬로 줄지어 나오는 특징을 갖고 있다.
inline은 content 자체만을 꾸며주는 것을 의미하기 때문에
content의 길이에 따라서 inline의 길이 또한 달라진다.

block

block[blɑːk] : (명)사각형 덩어리 / (형)막다, 차단하다
사각형 덩어리, 즉 상자로 이해하면 좋으며 형용사인 막다, 차단하다라는
뜻을 가진 것처럼 한 줄에 하나만 적용되어 inline과 다르게
일렬로 늘어서지 않고 한 줄에 하나만 위치되는 특징을 가지고 있다.

inline-block

일렬로 늘어선-사각형 덩어리
위에서 설명한 두 특징이 결합된 property로, content의 영향을
받지않는 block의 특징과, 일렬로 늘어서는 inline의 특징을 가져,
상자로, 일렬로 늘어서는 형태를 가지게 된다.

Float

float

float[floʊt] : (물위나 공중을) 뜨다, 부유하다
img 등의 태그의 위치상의 영향을 받는 property로,
신문 등의 이미지+텍스트 등의 디자인 형태에서 이미지와 텍스트가
겹치지 않게 사용될 수 있는 요소이다.

clear

clear[klɪr] : (흐름등이) 원활해지다
위 float가 적용된 것을 위치상의 영향을 받지 않도록하는
property이며, both · right · left 등으로 구성되며
right, left는 상위 요소에 적용된 float에 영향을 받으므로
both가 주로 사용되는 편이다.