이번 포스팅에서는
1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block
에 대해서 정리해보려고 한다.
position은 css를 사용하여 HTML 의 레이아웃을 구성할 때 중요하게 작용하는 속성이다. position은 기본 default 값으로 static을 가진다. (거의 사용안함)
1. Position 속성
1-1. Relative
position: relative; 자체로는 특별한 의미 없고, 어느 위치로 이동하지도 않는다. 위치를 이동시키는 top, right, bottom, left property가 있을 때 적용된다.
간단히 생각하면, 섹션의 기준을 잡아 그 섹션안에서는 중복되지 않게 해준다.(부모태그)
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}
위와 같이 div.relative와 div는 똑같이 그려졌고, div.relative.top-20은 위, 왼쪽으로 떨어져있는 걸 확인할 수 있다.
1-2. Absolute
postion: absolute;는 절대적인 위치에 둘 수 있다. 기준이 필요하다! 어떤 기준이냐면 바로 특정 부모에 대해 절대적으로 움직인다.
부모 중에 position이 relative, fixed, absolute가 있으면 그 부모에 대해 절대적으로 움직이는 것이다.
*일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative;를 부여하면 된다.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}
위와 같이 div.relative 부모태그에 relative를 설정해놓았고 자식태그에 absolute를 설정하는 것이다. right과 bottom 값 설정을 통해 부모의 우측 하단에 딱 붙게 설정해 놓은 것을 볼 수 있다.
1-3. Fixed
원래 위치에서 적용한 position의 위치로 이동하는 속성값이다. fixed 값으로 위치를 정하면 절대적인 위치로 고정하는 것으로 볼 수 있다!
absolute는 relative를 가진 부모가 필요했지만 fixed는 필요 없고, fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.
2. inline, block, inline-block
< span > 등과 같은 태그들은 inline 요소를 가지고 있기 때문에 안에 가지고 있는 content의 크기만큼만 차지하여 한줄에 여러 개의 요소가 놓인다.
< p >, < div > 등의 태그들은 block 요소를 가지고 있기 때문에 크기가 한 줄을 차지한다. 한 container box에 block 요소를 적용한 다음에 margin을 auto로 주게되면 그 박스 하나를 한 줄의 중앙에 배치 가능!
차이를 직접 보자면, 
inline-block요소는 inline과 block요소의 특성을 둘 다 가진 요소로 기본적으로 inline처럼 한 줄에 여러 가지를 놓을 수 있지만 안되는 것이 많은 inline요소와는 달리,
- width와 height 값을 지정할 수 있으며
- margin이나 padding 값도 줄 수 있다.
요약하자면, 한 줄을 다 차지하지 않는 것은 inline요소를 닮았으나 다양한 속성을 적용할 수 있는 특성은 block을 닮았다!
아래와 같은 그림으로 정리해볼 수 있겠다!
(img source:https://www.tutorialbrain.com/css_tutorial/css_display/)
