css를 사용한 레이아웃 기법에는 여러가지가 있습니다. 그리고 사용하다보면 생각보다 헷갈리고 원하는 결과물이 나오지 않는 경우가 많아 css 레이아웃 기법에 대한 정리를 하고자 합니다.
1. block과 inline
HTML 요소는 기본적으로 block 레벨 요소와 inline 레벨 요소 두 가지로 나뉩니다. 이들은 요소가 웹 페이지에서 어떻게 배치되고, 주변 요소와 어떤 방식으로 상호작용하는지를 결정합니다.
1-1. block
block 레벨 요소는 기본적으로 한 줄에 하나씩 나오고 너비와 높이, margin과 padding을 줄 수가 있습니다.
예시로 <div>, <h1>, <p>, <form> 등이 있습니다.
1-2. Inline
inline 레벨 요소는 한 줄에 공간이 많으면 여러 개가 동시에 나올 수 있으며, 요소의 너비는 내용의 너비에 따라 자동으로 결정됩니다.
예시로 <span>, <a> <img>, <button> 등이 있습니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
하지만, css를 통해 직접적으로 변경하는 것도 가능합니다.
아래의 코드를 보면 div와 span에 각각 inline, block 속성값을 줘서 기본적인 속성과는 다른 모습을 볼 수 있습니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
1-3. inline-block
그리고 block과 inline의 특징을 섞은 inline-block 이라는 속성값이 있습니다.
inline-block은 새로운 줄에서 시작되지 않고 요소가 필요한 곳에 배치되며, 너비와 높이를 지정할 수가 있습니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2. position
position은 요소의 위치를 지정하는 데 사용되는 속성으로 static, relative, absolute, fixed, sticky 총 5가지 값이 있습니다.
2-1. static
static은 기본 속성 값으로, top, right, bottom, left, z-index 속성이 적용되지 않습니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-2. relative
relative는 원래 있던 위치를 기준으로 상대적으로 이동하는 속성입니다.
top, right, bottom, left 속성을 사용해서 위치를 조정할 수 있습니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
box라는 div에 relative 속성을 줬더니 left, top이 원래 있던 위치를 기준으로 20px 만큼 조정된 것을 볼 수 있습니다.
2-3. absolute
absolute는 가장 가까운 위치에 지정되어있는 부모 요소에 대해 상대적으로 위치가 지정됩니다.
See the Pen absolute by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
box에 absolute를 주면 부모 요소인 container을 기준으로 top, left가 20px 만큼 이동한 것을 볼 수 있습니다.
2-4. fixed
fixed는 웹 페이지 기준으로 위치가 지정되며, 스크롤해도 위치가 변하지 않습니다.
See the Pen fixed by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-5. sticky
sticky는 스크롤 위치에 따라 상대적으로 위치를 선택하거나 고정해서 위치를 선택합니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
'Html' 카테고리의 다른 글
HTML/CSS(CSS 레이아웃 정리 2편) (0) | 2023.11.11 |
---|---|
HTML/CSS(:root를 활용한 사용자 정의 변수) (0) | 2023.11.02 |
15. HTML/CSS(Grid 레이아웃) (0) | 2023.05.11 |
14. HTML/CSS(video, tranform, 애니메이션) (0) | 2023.05.11 |
13. HTML/CSS(Sass) (0) | 2023.05.10 |