css에서 레이아웃은 가장 중요하고 기초지만 어떻게 보면 가장 어려운 부분일 수 있다. 레이아웃은 메인창과 비례하여 어느 위치에 놓일 것 인지를 제어한다. 이번 페이지에서 다룰 레이아웃 기술은 크게 display와 position 그리고 float 속성이다.

display 프로퍼티

display는 CSS에서 레이아웃을 제어하기 위해 사용되는 속성이다. 대부분 기본값은 block 과inline 이다.

block

div, p, form은 블록 엘리먼트이고, 좌우로 최대로 늘어난다. HTML5에서 header과 footer, section등이 추가되었다.

inline

인라인은 단락의 흐림과 상관없이 텍스트를 감싼다. span, a 엘리먼트가 대표적인 인라인 엘리먼트이다.

none

none 값은 자바스크립트에서 엘리먼트를 실제로 삭제하거나 재생성하지 않고 엘리먼트를 숨기는데 사용된다.
CSS 속성에 visibility: hidden;은 엘리먼트가 감춰지지만 여전히 공간을 차지한다. display: none으로 설정하면 엘리먼트가 공간을 차지하지 않고 숨겨진다.

💡Tip 어떨때 visibility: hidden vs display: none

만약 시각장애인이 웹을 본다고 할때 display: none을 사용하여 컨텐츠를 안보이게 한다면 스크린 리더기에 인식이 안돼 읽기에 문제가 될 수 있다. 하지만 visibility: hidden을 사용한다면 스크린 리더기에서 인식이 가능하여 내용을 읽는데 문제가 없을 것이다.

margin: auto;

auto 설정시 컨테이너 박스 가로 중앙에 오게 할 수 있다.

#main {
    width: 600px;
    margin: 0 auto;
}

Position

static

static은 기본값이다. position: static;은 기본 값이다.

relative

relative는 별도의 설정을 하지 않는 이상 static과 동일하게 동작한다. 엘리먼트 top, right, bottom, left를 지정하면 기본 위치와는 다르게 위치가 조정된다.

absolute

absolute는 부모태그에 relative가 적용되어 있다면 그것을 기준을 잡는다. 절대 위치가 지정된 엘리먼트가 없으면 본물을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

fixed

브라우저에 대해서 위치를 잡는다. 스크롤에 영향을 받지 않고 고정된 위치를 가지고 있다.

출처
https://learnlayout.com/display.html
https://leannezhang.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6