레이아웃

레이아웃 관련 속성을 알아보자!

inline 과 block

inline 요소 : ex) span...

• 영역의 크기가 내부 콘텐츠 크기로 정해진다.
• margin, padding의 top,bottom 적용 불가능
• 여러 요소의 가로 배치가 가능하다.

block 요소 : ex) div...

• 영역의 크기를 width, height로 지정할 수 있다.
• width를 지정하지 않으면 가로 전체를 차지한다.
• 여러 요소가 세로 배치 된다.

inline-block 요소 : ex) input...

• 영역의 크기를 width, height로 지정할 수 있다.
• 여러 요소가 가로 배치 된다.

display 속성

• 요소를 inline, block, inline-block로 지정할 수 있는 속성
• none 사용 시 요소를 보이지 않게 해줌

display : none;

• 코드상으로는 존재, 화면에서는 아예 없는 취급, 자리 차지 x

visivility : hidden;

• 레이아웃 상에서 존재함, 자리는 계산을 해줌

float 속성

• 블록 요소에 좌, 우의 공간에 다른 요소가 자리를 차지하게 해주는 속성

position 속성

normal flow란?

• 일반 대열, 레이아웃을 변경하지 않은 자연스러운 배치 상태

position : static

• 기본값, top, left, bottom, right 속성 사용 불가

position : relative

• 자기 자신을 기준으로 top, left, bottom, right 속성으로 위치 이동
• 반대값을 사용시 top, left 우선 적용

position : absolute

• 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소를 기준으로 상대적 배치
• 조상중에서 position이 static이 아닌 요소를 찾아 기준점을 삼는다. 없으면 body 기준
• 독자적인 레이아웃 층이 위에 떠있는 형태

position : fixed

• 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼는다.

position : sticky

• 일반적인 흐름에 따라 배치하고, 가장 가까운, 스크롤이 되는 조상을 찾아 기준으로 삼는다.
• 자신의 위치를 지나갈 때 위치가 고정됨, 스크롤이 되는 조상이 없으면 동작 x

overflow 속성

overflow : visible

• 기본값, 내용이 넘쳐 흐르는 상태

overflow : hidden

• 넘친 콘텐츠는 잘려서 보이지 않게 됨

overflow : scroll

• 스크롤을 생성하여 모든 내용을 볼 수 있음

overflow : auto

• 내용이 넘칠 경우 자동으로 스크롤 생성

z-index 속성

• 여러 층이 있는 것 처럼 요소에 순서를 지정하여 지정 순서로 보여지게 하는 속성

• 값 설정이 없으면 코드의 순서대로 쌓임

• position static이 아닌 요소가 기본 요소보다 위에 위치