레이아웃에 대하여

레이아웃

display와 position등이 있다.

display

레이아웃의 한 요소이다.

changed display

position을 바꾸는 여러 속성들이 있다.

아래의 속성들을 사용할 경우 block:display를 굳이 사용할 필요가 없다.

position: absolute|fixed
float: left|right
/* changed display */
display:block

display:inline

요소들을 행으로 배치시키는 속성이다.

수평마진과 수평패딩만 적용할 수 있다.

수직패딩의 경우 다른 요소를 밀어내지는 못한다.

display:block

요소들을 열로 배치시키는 속성이다.

너비와 높이, 수평마진, 수직마진, 수평패딩, 수직패딩 전부 적용할 수 있다.

수직마진은 중첩된다.

display:inline-block

block과 inline-block의 특징을 전부 가지고 있는 속성이다.

수직마진은 중첩되지 않는다.

display:none

어떤 장치도 표시하거나 접근할 수 없다.

display:flow-root

블록 컨테이너가 되며 새로운 블록 형식 문맥이 된다.

• 포함된 float 요소는 컨테이너 끝에서 clear 된다.
• 부모 자식요소의 수직 마진을 병합하지 않는다.

display:flex

flex 컨테이너 박스를 생성한다.

• flex 형식 문맥을 설정한다
• 포함 아이템을 1차원 기반으로 배치.
• 격자에 구애 받지않는 배치가 가능하다.

display:grid

grid 컨테이너 박스를 생성한다.

• grid 형식 문맥을 설정한다
• 포함 아이템을 2차원 기반으로 배치
• 격자끼리 병합하는 배치가 가능하다.

position

position: static

배치 기준이 없다. 흐름에 따라 배치된다.

left, right, top, bottom, z-index를 사용할 수 없다.

position:relative

박스의 현재 위치가 배치의 기준으로 배치를 변경할 때에 다른 박스의 흐름을 깨지 않는다.

자식 또는 자손 요소의 absolute의 배치 기준이 된다.

left right top bottom z-index,inset을 사용할 수 있다.

position:absolute

일반적인 흐름에서 완전히 이탈한다.

부모 형제의 크기나 위치에 전혀 영향을 미치지 않는다.

조상 박스가 relative,absolute,fixed,transform일 때, 조상 기준으로 배치된다.

left tight top bottom z-index, inset을 사용할 수 있다.

position:fixed

뷰포트가 배치 기준이다.

조상요소에 transform 속성이 있으면 transform 속성이 있는 요소가 배치 기준이다.

left tight top bottom z-index, inset을 사용할 수 있다.

position:sticky

스크롤 포트가 배치 기준이다.

부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트 기준으로 고정된다.

부모 요소가 스크롤 밖으로 이탈하면 고정을 멈춘다.

left tight top bottom z-index, inset을 사용할 수 있다.

z-index

절대값이 아니며 부모요소에 종속된다.

z-index는 부모요소보다 높을 수가 없다.