이 글의 목적?
정말 헷갈리는 속성들이 많아 매번 CSS로 각 요소들의 위치를 잡을 때 삽질을 많이 했는데, 이번 기회에 전체적으로 CSS의 위치와 관련된 속성들을 정리해보고자 한다.
Position
position은 말 그대로 요소를 특정 위치에 배치해주는 역할을 수행한다고 이해하면 될 것 같다.
position: static;
static은 기본값으로 HTML에 작성한 태그 순으로 지정된다. 생략이 가능하지만 종종 부모 요소에서 다른 position 속성 값이 주어졌을 때, 부모의 속성을 무시하기 위해 명시하는 경우가 있다.
position: relative;
relative는 상대적인 위치에 배치할 때 사용하는 값이다. 이 말은 원래의 위치를 기준으로 상대적이라는 의미다.
position: absolute;
absolute는 절대적인 위치를 줄 때 사용하는 값이다. 단, 부모 요소에 감싸져있고, 부모 요소에도 position 속성에 relative, absolute, fixed 중 하나가 값으로 부여되어있을 경우, 가장 가까운 부모의 박스를 기준으로 위치하게 된다.
position: fixed;
fixed는 쉽게 생각하자면 스크롤을 올리거나 내릴 때, 특정 박스가 움직이지 않고 계속 고정된 위치에 위치하도록 해주는 값이다.
position: sticky;
fixed는 뷰포트가 기준이라면, sticky는 부모 요소를 기준으로 붙는다. 또한 형제 요소가 있을 경우 그 영역 위로 침범하지 않아 웹 페이지 상단에 로고가 있는 네비게이션에 사용한다고 한다.
z-index
z-index는 z 축의 순서를 정한다고 보면 쉽게 이해할 수 있다. 위에 겹쳐질 내용들의 순서를 정하는 속성이라고 보면 된다.
Flexible Box
Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법이다. Container와 items 개념으로 분리된다는 점을 알고 있어야 이해하기 쉽다.
Flex Container
우선, Container에 지정할 수 있는 속성들을 먼저 살펴보자.
display: flex;
display 속성은 Container를 정의한다. 가장 흔한 값으로는 block, inline-block, none있지만, Flex에서는 flex, inline-flex를 사용한다.
flex-direction
이 속성은 items의 주 축을 정의한다.
축에는 주 축과 교차 축이 존재하는데, flex-direction에 따라 주 축과 교차 축이 달라진다.
flex-wrap
이 속성은 items의 줄 바꿈처리를 해준다.
justify-content
주 축의 정렬 방법을 설정할 때 사용한다.
align-content
교차 축의 정렬 방법을 설정한다. flex-wrap으로 줄 바꿈인 상태이고 여백이 있을 경우에만 적용이 된다.
여기서 특이한 속성으로는 stretch가 있는데, 이는 가로 혹은 세로의 값이 auto (기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어난다.
align-items
교차 축에서 items의 정렬 방법을 설정할 때 사용하는 속성이다. 단, flex-wrap으로 여러 줄인 경우에는 align-content 속성이 우선시된다. align-items를 사용하고 싶다면, align-content 속성을 stretch (기본값)으로 설정해주어야 한다.
Flex Items
다음으로는 각 item에서 지정할 수 있는 속성들을 알아보자.
order
item의 순서를 설정할 때 사용하는 속성이다. 숫자가 클 수록 순서가 밀리고 음수가 허용된다.
flex
item의 너비를 설정하는데 사용하는 단축 속성이다.
flex : 증가너비(flex-grow), 감소너비(flex-shrink), 기본너비(flex-basis);증가 너비의 경우 총 증가 너비에서 각 item의 증가 너비의 비율 만큼 너비를 가질 수 있다. 하단의 이미지처럼 각 3개의 item의 증가너비가 각각 1, 2, 1인 경우를 보면 이해하기 쉽다.
- 첫 번째
item은 총 너비의 25% (1/4) - 두 번째
item은 총 너비의 50% (2/4) - 세 번째
item은 총 너비의 25% (1/4)
감소 너비의 경우 숫자가 커질 수록 더 많은 너비가 감소된다. item의 너비가 가변적이지 않거나 값이 0일 경우에는 효과가 없다.Container의 너비가 줄어 item의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 적용된다.
item의 기본 너비의 경우 주의해야할 점은, flex 단축 속성에서 기본 너비를 지정하지 않고 생략할 경우 0으로 설정된다는 점을 기억하자.
align-self
이 속성은 교차 축에서 개별 item의 정렬 방법을 설정하는데 사용한다.
Float
float은 본래 다른 요소들과 자연스럽게 어울리게 하기 위해 사용된다고 했다. 하지만 주로 웹 페이지 레이아웃을 잡을 때 많이 사용한다고 한다. 사전적인 의미를 보면 '둥둥 떠다닌다!'인데, 동일하게 요소를 위로 띄워준다고 생각하는게 쉬울 것 같다.
레이아웃을 잡을 때 유용하게 사용할 수 있지만, 각 속성들은 본래의 목적답게 사용하는게 맞다고 생각한다. 그러니 이번 글에서 무엇인지에 대해서만 언급하고 자세한 사용법은 작성하지 말자. 충분히 구글링만으로도 많은 레퍼런스를 확인할 수 있으니, 필요할 때 찾아보고 적용하자!
Grid
Flex는 1차원의 레이아웃이라면, Grid는 2차원의 레이아웃을 제공한다. 왜 Grid를 사용할까?
내가 참고한 블로그에 따르면, PC 환경과 모바일 환경을 더 유연하게 처리하기 위해서 사용한다고 한다. 예시를 확인해보자.
<div class="container">
<div class="box box1">A</div>
<div class="wrapper">
<div class="box box2">B</div>
<div class="box box3">C</div>
<div class="box box4">D</div>
</div>
</div>PC 환경을 생각한다면 전혀 문제되는 부분이 없다. 하지만 이를 모바일 환경에서도 반응하도록 만든다고 했을 때, 기존에 오른쪽 3개의 박스를 묶어서 처리한 wrapper 클래스 사이에 왼쪽 박스를 넣어줘야한다.
자바스크립트로 충분히 커버가 가능하지만, 깔끔한 방법으로 변경된 환경을 대처하기 위해서 Grid를 사용한다고 한다. Grid에도 정말 다양한 속성들이 존재한다. 하나하나 모두 살펴보기에는 어려움이 있으니, 나중에 직접 만들어보면서 이해해야할 것 같다.
개인적인 의견
'Grid가 좋으니 Grid만 사용해라!'라는 지침은 없다. 그럼 어떤 기준으로 각 속성들을 사용해야할까?
개인적으로는 position은 요소의 크기가 분명할 때, display: flex는 요소의 크기가 불분명할 때, display: grid는 더 편하게 반응형 레이아웃을 구성할 때를 기준으로 구현하고자하는 내용에 잘 혼합해서 사용하는 것이 가장 올바른 사용법이라 생각한다.
이 글의 레퍼런스
Position
Float
HTML, CSS 기초 (강추 ⭐️)
Flex 연습하기
