레이아웃의 모든 것 (중 일부..)

레이아웃이란?
-디자인, 광고, 웹페이지 등에서 사용자들에게 자신들이 원하는 바를 효과적으로 보여주는 일.
-즉, CSS!

모던한 웹페이지는 layout을 담당하는 CSS를 사용한다!

레이아웃을 담당하는 속성 크게 두 가지로 position과 display 속성이 있다.

1. position 속성

CSS에서 기준이 되는 요소의 위치를 지정해주는 것.
static, relative, absolute, fixed

static

• 기본 설정값, 아무런 설정도 하지 않으면 유지되는 값이다.

relative

• 상대 위치.
• 기본 위치로부터 상대적인 위치에 지정, static의 위치를 기준으로 포지셔닝한다.
• top, right, bottom, left, z-index 속성에 입력값을 주지 않으면 static과 동일하다.

absolut

• 절대 위치.
• 부모 요소를 기준으로 지정된다. relative로 이뤄진 상위 요소를 기준으로 위치한다.
• 부모 요소는 가장 가까운 relative 속성을 가진 상위 요소가 된다.

fixed

• 절대 위치.
• 고정된 위치. 주로 상단 메뉴바 처럼 부모 요소와 상관없이 고정된다.
• 문서의 다른 요소 배치에 영향을 주지 않는다.
• 브라우저 뷰포트 테두리를 기준으로 얼마나 떨어져 있는지 상하좌우 속성을 통해 위치한다.

2. display 속성

외부 디스플레이 타입 (outer display type) - 속성을 부여한 요소 자신에 적용되는 것
내부 디스플레이 타입 (inner display type) - 자식 요소의 레이아웃에 적용되는 것
디스플레이에 따라 외부만 적용되는 것도 있고, 둘 다 적용 되는 것도 있다.

외부 디스플레이 타입은 inline, block, inline-block 형태가 있다.

inline

• HTML의 span이나 a, em 태그 등이 있다.
• width, height 속성은 무시되고, margin과 padding은 상하 간격이 반영 안된다.
• 해당 태그가 마크업하는 콘텐츠의 크기만큼만 공간을 차지하기 때문이다.

block

• HTML의 div, p, h1~5 태그가 있다.
• width, height, padding, margin 등을 사용해 크기와 여백 설정이 가능하다.
• 인라인 태그에도 display:block;을 사용해 블록 타입으로 바꿀 수 있다.
• flex, grid, table 속성 또한 블록 속성을 갖는다.

inline-block

• HTML의 button, input, select 등이 있다.
• 인라인과 블록 속성을 모두 갖는다.
• 요소에 width, height, padding, margin 속성을 사용해 크기와 여백을 설정할 수 있지만, inline 속성을 따라 왼쪽에서부터 배치된다.
• 기본 속성일 때는 약간의 마진이 생긴다.