HTML, CSS (3)

김태완·2024년 11월 15일

CSS html

요소들의 배치, 배열을 디자인에서는 레이아웃이라고 한다.

CSS 레이아웃

display 는 글의 흐름에서 요소를 어떻게 배치할지 정하는 것이다.
position 속성
- 블록 태그, 인라인 태그들이 display 에 의해서 정렬된 흐름으로 배치가 된다.
- 근데 이 흐름에서 벗어나 배치하고 싶을때가 있다.
- 이때 position 속성을 사용한다.
- position 속성은 위치의 기준을 정하고, 구체적인 위치는 top, bottom, left, right로 나타낸다.
  (양수는 영역 안쪽, 음수는 영역 바깥)
- static: position 속성의 기본값이자, 원래 있어야 할 위치에 배치하는 것이고, 일반적인 글의 흐름을 따른다.
  나머지 속성은 일반적인 글흐름을 벗어남
- relative: 상대적인 이라는 뜻, 원래 있어야할 위치를 기준으로 top:30px만큼 이동하는 것//마진으로 값을 주면 다른 애들도 이동하는데, position주면 다른 애들은 원래 위치에 있는다. 그리고 원래 있던 위치는 비워져있다.
- absolute: 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치를 잡는다. relative 포지션과는 다르게 원래 배치에서 자리를 차지하지않는다. 흐름에서 아예 빠져 버린다. 원래 배치에서 아예 빠지니깐 block display 처럼 부모 영역의 넓이만큼 늘어나지않는다. 그래서 width로 크기를 지정해주거나, letf, right를 같이 써서 크기 지정한다.
  - 영역 전체를 꽉 차도록 겹치게할때는 top,left,right,bottom 을 전부 0으로 준다.
  - 아니면 inset:0(또는 다른 px)을 주면 모든방향에 대해 0이라고 하는 것이다.
- fixed: 기준은 브라우저 화면이 기준이된다. 원래 있던 자리와는 전혀 상관이없다. 기존 배치에서 완전 빠져서 자리를 차지하지않는다. 내비게이션 바에 자주 사용한다. 너비를 설정해줘야한다. 쌓임 맥락에 의해서 제일 위로 간다.
- sticky: 브라우저 화면을 기준으로 스크롤을 내리다가 설정한 위치에 닿으면 스티커 처럼 fixed 포지션처럼 고정된다. 그리고 다시 스크롤이 돌아오면 static처럼 돌아간다. 부모 요소안에 갇혀있다는 특징이 있다. 부모요소가 화면밖으로 사라지면 같이 사라진다.

z-index

앞뒤의 순서를 정하는 것이다.
z-index를 정하지 않으면 기본적으로 코드에서 밑에 줄에 있을수록 화면에서는 앞에 보인다.
z-index 값의 숫자가 높을수록 앞에 보인다.
값이 같으면 코드에서 밑에 줄에 있을 수록 앞에 보인다.
z-index 역시 부모태그를 벗어날 수 없다
- css의 내용이 길어지게 되면 어느 부분이 더 우선 순위에 있는지, 아려면 요소의 값을 너무 큰 값이 아닌 1 ~ 3 정도로 놓고, 내가 사용할 위치에서 적당하게 사용하는 것이 좋을 것 같습니다.
- 나중에 css 양이 방대해지고, 동료 개발자 분들과의 협업을 위해서도 무분별한 수치보다는 적당한 z-index 값이 좋을 것 같아요 !
- z-index 값은 단순히 서로 비교만 하는 게 아니라, 쌓임 맥락(Stacking Context) 안에서 비교하기 때문인데요.

쌓임 맥락

쌓임 맥락을 간단히 설명하자면, z-index를 묶어서 생각하는 범위라고 할 수 있는데요.
쌓임 맥락 만들기
- 쌓임 맥락이라는 개념 자체는 복잡하지 않지만 쌓임 맥락이 만들어지는 조건은 굉장히 복잡합니다. 몇 가지만 소개해드리자면 이렇습니다 :)
- 문서의 루트 요소(<html>)
  - position이 absolute이거나 relative이고, z-index가 auto가 아닌 경우
  - position이 fixed이거나 sticky인 경우
  - flexbos나 grid의 자식 중 z-index가 auto가 아닌 경우
  - opacity가 1보다 작은 요소
  - …
- 이 내용을 외우고 있지는 않습니다. 정말 많은 조건이 있는데, 혹시 궁금하신 분들은 MDN 문서의 쌓임 맥락 페이지를 참고해 보세요. 이 조건들을 모두 외우고 쓰면 좋겠지만 쉬운 일이 아닙니다. 사실 이런 조건들은 웹 브라우저를 만드는 사람들이 꼼꼼하게 챙기면 되고, 우리는 좀 더 실용적으로 접근해 보겠습니다.
- 쌓임 맥락은 언제 쓸까요? 아까처럼 의도와 다르게 내가 원하는 대로 z-index가 동작하지 않거나, z-index 값이 너무 많아지고 복잡해져서 코드가 헷갈릴 때 필요하겠죠.

z-index가 원하는 대로 동작하지 않을 때

거의 90%의 확률로 쌓임 맥락이 만들어져서 그럴 겁니다. 이럴 때 가장 손쉬운 방법은 해당 요소를 쌓임 맥락 바깥으로 옮기는 겁니다.
예를 들어서 .green의 <div>를 상위 태그로 옮기고 CSS도 약간 수정해 주는 거죠.

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

.green {
  background-color: #32b9c1;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 125px;
  left: 125px;
  z-index: 3;
}

z-index 값이 너무 많아지고 복잡해질 때

적절하게 쌓임 맥락을 만들어주면 됩니다. 위에 소개한 조건들 중에서 두 번째 조건(relative 포지션)을 이용하면 간단하게 쌓임 맥락을 만들 수 있는데요.
예를 들어서 .container라는 <div> 안에 쌓임 맥락을 만들고 싶으면 아래처럼 position 속성과 z-index를 추가해 줍니다.

<div class="container">
  ...
</div>

.container {
  position: relative;
  z-index: 0;
}

position: relative는 원래 위치를 기준으로 요소를 배치하는 거였죠? 이때 따로 위치를 정하지 않으면 그냥 원래 위치에 있습니다.
그리고 z-index의 기본 값은 auto인데, 0으로 지정한다고 해서 요소들 사이에 쌓이는 순서가 바뀌지는 않습니다. (auto 와 0의 가장 큰 차이는 쌓임 맥락을 만드느냐 아니냐의 차이입니다.)

Flexbox란

flexbox를 쓰면 가로로 또는 세로로 배열할 수 있다. 1차원적인 방향으로 배열할 수 있다.
display: "flex"를 주게되면
row 가로로 정렬되는 것이 기본값으로 세팅되어있다.
세로방향으로 하려면 flex-direction:"column"을 주면 된다.
row-reverse, column-reverse 라고 하면 반대로 배치된다.
flex-direction으로 배치방향을 정하는데, 이때 요소가 배치되는 방향을 기본 축(Main Axis), 여기에 수직인 방향을 교차 축(Cross Axis)이라고 한다.
ex. 컬럼을 주게되면 세로가 기본축
이때 기본축 방향에서 정렬하려면 justify-content라는 속성을 사용한다.
기본축 방향에서 center는 가운데, flex-start는 맨 앞, flex-end는 맨 뒤, space-around 기본축을 기준으로 양쪽에 모두 같은 공간이 생긴다. space-between 은 기본 축 방향으로 양 끝을 늘어뜨려서 배치한다. space-evenly 는 빈공간의 크기가 모두 동일하도록 배치한다.
align-items:center를 하면 교차 축에서 중앙 정렬이된다.
align-items:stretch는 교차 축에 늘려서 배치해준다.