📌 이 포스팅에서는 CSS의 레이아웃에 필수 요소인 position 속성과 display 속성의 inline, inline-block, block에 대해서 정리하였습니다.
🌈 Layout의 모든 것
🔥 position 속성 - relative, absolute, fixed
🔥 display 속성 - inline, inline-block, block
1. position 속성 - relative, absolute, fixed
🤔 position 속성은 무엇일까?
✔️ position 속성은 요소의 상대적인 관계를 통해 HTML의 요소를 자유롭게 위치시키는 속성입니다.
✔️ position의 속성은 defult값인 static부터 relative, absolute, fixed 등이 있고, 어디에 위치할 것인지에 대한 기준점에 있어 뚜렷한 차이가 존재합니다.
1) 기본 위치(static position)
- static 값은 HTML에서 작성된 태그가 순차적으로 나열되는 default 값입니다.
2) 상대 위치(relative position)
🔍 seletor { position : relative; }
✔️ relative는 요소가 원래 위치하고 있는 자기 자신을 기준으로 top, left, right, bottom을 통해 위치시킬 수 있으나 x축과 y축의 속성은 필수 작성 요소가 아닙니다.
✔️ 또한 relative는 상층에 띄어주는 부유객체가 아니기 때문에 자신이 본래 있었던 빈 공간에 다른 요소가 공간을 차지 하지 못합니다.
✔️ 일반적으로 relative만으로 요소의 위치를 이동시키는데 사용되진 않고, absolute의 기준으로써 활용됩니다.
3) 절대 위치(absolute position)
🔍 seletor { position : absolute; } 👈 가장 가까운 relative 속성을 가진 부모를 찾아 기준으로 잡습니다.
✔️ relative 값을 가진 가장 가까운 부모를 기준으로 top, left, right, bottom 속성을 통해 위치합니다.
✔️ 부모 태그 중 relative 값을 가진 태그가 존재하지 않는다면, 브라우저를 기준으로 잡습니다.
✔️ 부유 객체의 특징을 가지고 있어 다른 요소가 먼저 위치를 점유해도 덮어 씌우고, x축(top, bottom)과 y축(left, right) 각 1개씩 값이 필요합니다.
4) 고정 위치(fixed position)
🔍 seletor { position : fixed; } 👈 body를 기준으로 위치를 잡습니다.
✔️ 뷰포트(사용자에게 보여지는 영역)을 기준으로 top, left, right, bottom을 통해 상대적으로 위치가 결정되기 때문에 header와 같이 스크롤의 변화에도 고정된 요소가 필요할 때 주로 사용합니다.
✔️ 부유 객체의 특징을 가지고 있어 다른 요소가 먼저 위치를 점유해도 덮어 씌우고, x축(top, bottom)과 y축(left, right) 각 1개씩 값이 필요합니다.
2. display 속성 - inline, inline-block, block
🤔 모든 태그는 default로 inline 또는 block 특성을 가진다.
1) inline의 특징
✔️ inline 특징을 가진 태그들 끼리는 같은 라인에 다음 요소를 연이어 위치 가능합니다.
✔️ 또한 inline 특징을 가진 태그들은 content 너비만큼 가로폭을 가지고 width, height 속성 설정이 불가능하고, margin, padding는 좌우값만 적용시킬 수 있습니다.
✔️ 단, 상하 여백은 line-height로 지정할 수 있습니다.
✔️ defaul값으로 inline 특성을 가진 태그는 span / a / strong / img / br / input / select / textarea / button 등이 있습니다.
✔️ inline 특성을 가진 span과 같은 태그 내에 block 특성을 가진 div를 넣으면 block 요소가 참치 못하고 뛰쳐나갑니다. inline 요소가 block 요소를 포함할 수 없다는 의미입니다.
🤔 block의 특징
✔️ block 특징을 가진 태그들은 화면 너비 전체를 차지하기 때문에 다음 태그를 아래로 밀어냅니다.
✔️ 또한 block 특징을 가진 태그들은 width, height, margin, padding 줄 수 있고, div / h1~h6 / p, ol, ul, li, hr, table, form 등이 있습니다.
🤔 inline-block의 특징
✔️ inline-block은 가로로 요소를 배치하며 나열하는 inline 요소의 특성과 width, height, margin, padding 등의 속성 설정이 가능한 block 요소의 특징을 짬뽕시킨 것입니다.
✔️ 즉, block 특징을 가진 div를 가로로 배치하고 싶어 inline 값을 준다면, 가로로 나열되지만 content의 길이만큼 크기를 가지기 때문에 content가 없다면 화면에 나타나지 않는 단점을 해결해줍니다.
✔️ 다만, inline-block은 요소간 여백을 제어하기 힘들기 때문에 노가다 작업이 필요하고, 화면 크기에 따라 예상치 못하게 정렬되는 문제가 존재합니다. 이를 해결하기 위해 flex를 사용합니다.
