개인 공부를 위해 작성했습니다
layout이란 웹 사이트를 구성하는 요소들을 배치 할 공간을 분할하고 정렬하는 것입니다. 공간을 분할 할 경우 행을 구분 한 후, 행 내부 요소를 분리하는 것이 일반적이다
복잡한 레이아웃의 시작,
position
position의 기본값
상대적인
이라는 의미의relative
position
을 relative
로 설정한다고 해서 딱히 어느 위치로 이동 하지는 않는다top
, right
, bottom
, left
의 값을 지정해야 원래의 위치에서 이동할 수 있다
절대적인
위치를 지정할 수 있다
position
이 relative
, fixed
, absolute
하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다뷰포트 기준, 위치 고정
즉, 페이지가 스크롤 되더라도 항상 같은 위치에 유지된다
header
또는 top button
등에 사용position
을 fixed
로 선택하고, 어느 위치에 고정시킬 것인가를top
, right
, bottom
, left
의 값으로 지정박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다
content-box
width, height 프로퍼티 값은 content 영역을 의미한다. (기본값)border-box
width, height 프로퍼티 값은 content 영역, padding, border가 포함된 값을 의미
* {
box-sizing: border-box;
}
✅ 목표!
relative
, absolute
, fixed
의 특징을 잘 이해하고 코딩 및 설정할 수 있다