01. 기본 "꼭 알아야 하는 display와 position속성"
"원하는 위치에 원하는 사이즈로 배치하기 위해선 CSS의 display와 position을 무조건 알고 있어야한다."
display
컨텐츠 자체만을 꾸민다. ( 컨텐츠 크기에 맞춰 변경되므로 dispaly가 inline으로 설정된경우, css파일에서 width와 height으로 아무리 크기를 설정해도 이를 무시하고, 컨텐츠 크기 자체가 기준이된다.)display:inline
공간이 있다면 한줄에 여러 아이템이 배치된다.display: inline-block
inline과 달리 컨텐츠가 없어도 설정한 width와 height이 있으면 이를 기준으로 스타일링이 적용된다.
(아이템 옆에 공간이 있더라도) 한줄에 하나씩 배치된다.display:block
position
-
position: static
따로 설정한게 없다면 기본값이 됨
-
position: relative
원래 위치한 자리를 기준으로 포지셔닝된다.
-
position: absolute
담겨있는 Box를 기준으로 표지셔닝된다.
-
position: fixed
담겨있는 Box를 벗어나 페이지를 기준으로 포지셔닝된다.
-
position: sticky
스크롤링되어도 원래 있는 자리에 그대로 붙어있는다.
참고
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Author And Source
이 문제에 관하여(01. 기본 "꼭 알아야 하는 display와 position속성"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yebb/CSS-01.-기본-꼭-알아야-하는-display와-position속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)