레이아웃

Display

대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline이다.

기본적으로 width가 100%가 되게 하고 가로 한 줄을 다 차지하게 한다.

div, h1, p, ul, ol, form 태그 등이 있다.

컨텐츠를 감쌀정도의 크기만 갖게 된다.

블락태그와 다르게 줄바꿈 X

크기를 변화시킬수 없다.(width, height 값 넣어도 적용되지 않음)

span, a, img 태그 등이 있다.

기본적으로 inline 처럼 전후 줄바꿈 없이 한 줄에 다른 엘리멘트와 나란히 배치

inline에서 불가능하던 width, height, margin, padding 등의 속성 변경이 가능하다

button ,input, select 태그 등이 있다

기본값이며, 위치를 지정하지 않을 때 사용

차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작

위치를 계산할 때 static의 원래 위치부터 계산

기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 이동 가능

원래 위치와 상관없이 위치를 지정, 가장 가까운 상위 요소를 기준으로 위치가 결정

static 속성을 가지고 있지 않은 조상을 기준으로 움직인다.

원래 위치와 상관 없이 위치를 지정, 상위 요소에 영향을 받지 않음

브라우저 화면의 상대 위치를 기준으로 위치가 결정

See the Pen Untitled by Sunyeong (@cozynye) on CodePen.