🌼디스플레이란?
html 요소들은 기본적으로 inline, block, inline-block 등 각자 고유의 디스플레이 속성을 갖고 있다. 하지만 이러한 속성은 불변적인 것은 아니다. display는 기본 속성과 상관없이 사용하고자하는 속성으로 지정 할 때 사용한다. 이러한 속성을 적절히 사용하면 웹페이지의 레이아웃을 자유자재로 구성할 수 있다.
-
inline: inline 요소들은 요소 내부의 컨텐츠 크기만큼만 영역을 차지한다. 해당 요소 앞/뒤로 오는요소들은 줄바꿈이 되지 않으며 width/height와 같은 속성에 값을 주더라도 적용되지 않는다. 또한 padding/margin 등은 오직 가로 방향에 해당하는 값만 적용된다.- Default elemenet: a, img, strong, em, button, etc
- 여기서 img는 실질적으로 inline-block처럼 동작한다.
- Default elemenet: a, img, strong, em, button, etc
-
block: block 요소들은 내부에 컨텐츠가 없더라도 부모 요소의 가로 길이만큼을 영역을 차지한다. 해당 요소 앞/뒤로는 다른 요소들이 위치하지 않으며 바로 뒤에 있는 요소는 세로로 정렬된다.- Default element: body, main, header, footer, section, etc
-
inline-block: 자신의 컨텐츠 영역만큼을 차지하고 줄바꿈이 일어나지 않지만 가로/세로 길이를 가질 수 있고, 패딩/마진도 가질 수 있다. 즉, 요소 각각을 보면 inline 속성을 갖지만 요소 하나만을 보면 block 속성을 갖는다.
🌼 포지셔닝
display: block; 속성을 갖는 요소들의 위치를 지정 할 때 사용한다. 사용할 수 있는 속성의 값으로는 static, relative, absoulute, fixed, sticky가 있다.
-
static: 기본값으로 정의된 위치 속성 값 -
relative: default 위치에서 지정된 값만큼의 상대적인 위치 움직일 거리를 지정 할 때 사용한다.
.box-bottom {
background-color: DeepSkyBlue;
position: relative;
/*top/bottom/left/right 속성들과 사용하며 단위는 px, em, %를 사용한다.*/
top: 20px;
left: 50px;
}-
absoulte:position: relative;를 갖는 가장 가까운 요소의 위치에서 상대적인 거리에 위치할 때 사용한다.offset 값을 적절하게 지정하지 않으면 요소들간의 중첩이 발생 할 수 있다. 해당 속성을 사용하면 기본 레이아웃 flow에서 벗어나 동작하므로 남용하지 않는 것이 좋다.
-
fixed: 사용자가 scroll 작업하는 것과 상관없이 현재 보여지는 웹페이지 view 영역에 고정할 때 사용한다. 보통 웹페이지에 고정된 형태의 nav bar를 생성 할 때 사용한다.z-index: 요소들끼리 겹치는 경우가 발생했을 때 index 정수값의 크기에 따라 깊이도를 결정하고 큰 값을 가진 요소를 맨 앞으로 배치 할 때 사용한다.
출처: Udemy-Build Responsive Real-World Websites with HTML and CSS
