오늘은 CSS를 공부하면서 가장 공부가 필요하다고 느꼈던 레이아웃에 관한 속성들을 정리해보겠습니다.
Position
position 은 선택자의 위치를 결정하는 속성입니다.
top, left, bottom, right 속성과 함께 사용되며 다음과 같은 value를 가지고 있습니다.
- static(default)
- relative
- absolute
- fixed
- sticky
static(default)
position에 기본값으로 선택자의 위치가 변하지 않습니다.
position: static;
top: 40px; left: 40px;relative
현재 위치에서 상대적 으로 위치가 변경됩니다
position: relative;
top: 40px; left: 40px;absolute
부모 요소에서 절대값 으로 위치가 변경됩니다.
position: absolute;
top: 40px; left: 40px;fixed
viewport 기준으로 위치가 변경됩니다.
position: sticky;
top: 20px;sticky
스크롤 에 관계없이 지정된 위치를 유지 합니다.
position: sticky;
top: 20px;(아래로 스크롤 시 화면에서 top 으로 부터 20px만큼 위치가 유지된다.)
display
display 은 요소를 어떻게 보여줄지 결정하는 속성입니다.
다음과 같은 value 가지고 있으며, 태그마다 기본값이 다릅니다.
- none
- block
- inline
- inline-block
none
display: none 하게되면 요소를 렌더링하지 않습니다.
아무것도 나타나지않고, 영역도 차지 하지 않습니다.
block
dispaly: block은 지정된 크기에 따라 '한줄에 하나씩' 표시됩니다.
<div> 태그의 default!
lnline
dispaly: block은 지정된 크기와 관계없이 콘텐츠의 따라 크기가 정해집니다.
<span> 태그의 default!
inline-block
dispaly: inline-block은 지정된 크기를 유지하면서 한줄에 연속적으로 표시가 가능합니다.
참조
