TIL 02 | [css] Layout Basics
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
Author And Source
이 문제에 관하여(TIL 02 | [css] Layout Basics), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tmdckzm/css-layout-의-모든-것저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)