position
position은 요소의 위치를 지정하기 위해서 사용되는 속성이다.
대개는 top , right , bottom , left와 같이 사용된다.
position의 대표적인 속성값으로는
static defalt value 이다.
요소의 원래 위치이다.
fixed Viewport의 전체를 기준위치로 한다.
보이는 화면이 기준이기 때문에 스크롤을 움직여도 요소는 고정되어있다.
sticky 쉽게 설명하자면 overflow가 발생했을 때 해당 스크롤의 최상단이
sticky 요소에 닿은 시점부터 sticky 요소와 스크롤의 최상단이 말 그대로
딱 달라붙어서 움직인다.
relative 요소가 원래의 위치에서 지정한 값 만큼 움직일 수 있게 해주는
속성입니다.
absolute 이름을 그대로 이해하면 사용하기 난해한 속성입니다.
오히려 기준 위치가 절대적인 것이 아니라, 부모의 위치가 기준 위치가 됩니다.
조심해야 할 것은 부모의 속성이 defalt value인 static이라면
해당 속성을 무시하고 DOM트리에 의거하여 계속 상위요소를 탐색하여
가장 처음 만난 static이 아닌 요소를 부모 요소로 삼습니다.
만약 찾지 못했다면 최상위 요소인 body가 기준 위치가 됩니다.
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
이러한 경우엔
container에는 relative속성값을,
item1과 item2 에는 absolute속성값을 주게되면
부모인 container를 기준으로 item을 배치 할 수 있게됩니다.
이러한 방식으로 요소를 배치하게되면 이후에 container의 위치가 변경되더라도
item의 위치는 container를 기준으로 하기 때문에 같이 따라가게 됩니다.
display
display 는 여러가지 속성값을 가질 수 있습니다.
그중에서 대표적으로는
inline , inline-block , block , flex 네 가지가 있습니다.
이중에서 flex 는 이전에 기술한 velog 링크를 첨부합니다.
about-flexBoxhttps://velog.io/@pmb087/FLEXBOX
inline 의 가장 큰 특징은
해당 속성으로 지정된 요소들은 줄바꿈이 일어나지 않습니다.
주의사항으로는 width 와 height 속성을 무시하며
padding 과 margin 속성은 좌우만 반영되고 상하는 무시됩니다.
이러한 현상이 발생되는 이유는 inline 의 특성이 display의 value가
해당 값으로 지정된 태그의 공간만을 차지할 수 있기 때문입니다.
block 의 특징으로는
해당 속성으로 지정된 요소가 어떠한 라인에 존재하면 다른 요소들을 전부 밀어내고
그 라인의 자리를 모두 차지합니다.
inline 과는 달리 width , height , padding , margin 값이 전부 적용됩니다.
inline-block 은 두가지 속성값의 특징을 모두 가집니다.
block 과 같이 width , height , padding , margin 값이 전부 적용되며,
inline과 같이 줄바꿈이 일어나지 않습니다.
<span> , <a> , <em> 과 같은 태그들은
기본적으로 inline속성입니다.
div , <p> , <h1> 과 같은 태그들은
기본적으로 block 속성입니다.
<button> , <input> , <select> 와 같은 태그들은
기본적으로 inline-block 속성입니다.
위와 같이 서로 지정된 defalt value가 다르니
적용하고자 하는 display 의 값이 있다면
명시적으로 display: ~~~; 와 같이 속성을 지정해주는것이 좋습니다.
참고한 글
http://learnlayout.com/
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model
https://www.daleseo.com/css-display-inline-block/
