🌷 CSS(1) postion, CSS 설계

너무 늦기 전에...

의식의 흐름을 따라 마크업을 진행하고 또 그것을 스타일링 하다 보면 기하급수적으로 늘어나는 텍스트의 라인을 확인할 수 있다.

중복되는 속성들, copy & paste, 어디서 적용되었는지 가늠할 수 없이 깊은 스타일링 계층.

비즈니스 로직 외에 마크업과 스타일링도 설계가 중요하다. 이것은 시스템의 문제도 그렇지만 그것을 관리하는 사람에게 강한 영향을 미치는 것 같다.

🦢 position

최근 CSS를 바라보는 새로운 관점이 생겼다. 화면에 렌더링되는 요소들이 3계층을 가진다는 것이다.

normal flow => float => position 순서로 땅에서 하늘로 올라간다는 관점인데 정말 그렇게 되는 경우가 많다.

최근에는 flex를 많이 사용해서 float을 잘 사용하지 않았는데 세밀한 배치를 위해 알고는 있어야겠다.

1. static

position의 기본 값이다. top, right, bottom, left 속성과 z-index 속성이 영향을 주지 못한다. 일반적인 문서의 흐름에 따라 배치된다.

2. relative

문서의 흐름에 따라 쌓인 자기 자신을 기준으로 위치를 재조정한다. top, right, bottom, left 속성이 작용한다.

문서의 흐름에 따라 위치가 조정되기 때문에 자신의 원래 위치에 영향을 주는 데이터가 변동성이 있다면 relative로 조정한 위치도 계속 재조정해야한다.

자신의 원 위치에 분신을 놓고 그것을 기준으로 움직여진다고 생각하면 편하다.

3. absolute

일반적인 문서의 흐름에서 벗어난다. 가장 가까운 위치 지정 요소(position이 static이 아닌 요소)인 조상을 기준으로 위치가 조정된다.

display가 inline-block으로 지정되며 크기를 따로 명시하지 않으면 내부 컨텐츠의 크기 만큼 줄어든다.

위치를 지정할 때 부여된 margin 값을 고려해서 지정된다.

4. fixed

absolute처럼 일반적인 흐름에서 벗어난다. 하지만 기준이 뷰포트가 된다.

마찬가지로 display가 inline-block으로 지정되며 크기를 따로 명시하지 않으면 내부 컨텐츠의 크기 만큼 줄어든다.

5. sticky

초기에는 일반적인 흐름에 따라 배치하고 가장 가까운 스크롤 가능 조상을 기준으로 위치를 지정한다.

사실 그 조상이 스크롤 속성을 가지고 있지만 실제로는 스크롤이 불가능하다면 sticky는 작동하지 않는다.

정중앙 정렬

position이 조정 가능하고 위치를 조정할 수 있는 요소(inline X)에 사용가능하다.

1. width, height가 고정 값일 때

.box {
	position: absolute(or fixed)
	width: 200px;
    height: 200px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

원래 상하 margin에 auto 값은 적용이 안 되지만, position 층에서는 상하의 margin도 auto가 가능하다.

2. width, height이 없어도 가능

.box {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    padding: 20px;
}

위 예시에서는 width와 height를 설정했지만 설정하지 않아도 가능하다.

position relative도 inline이 아니라면 가능하다.

CSS 설계의 중요성

CSS를 작성하다 보면 중복되는 표현들이 참 많이 생긴다. 공통된 요소들을 추리고 경우에 따라 class를 추가하는 식으로 작성한다면 css 파일의 양을 훨씬 줄일 수 있다.

.tag__btn {
  border: none;
  color: #fff;
  font-weight: 700;
}
.small {
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 10px;
}
.green {
  background-color: #27ae60;
}

다음과 같이 button에 공통으로 들어갈 속성은 따로 빼고, 추가적으로 적용 될 옵션을 설정하는 식으로 한다면 재사용성을 늘릴 수 있다.

또한 CSS에서 position 등을 설정할 때 고정 값으로 설정하는 걸 주의해야하는데, 기준이 될 데이터가 어떻게 변할 지 모르기 때문이다.

        <a href="#" class="comment">
          <img src="./icon_info.png" alt="comment_icon" />
          <span>8</span>
        </a>

다음과 같은 레이아웃이 있을 때 숫자의 위치가 고정 값으로 설정된다면 숫자가 무수히 커져 옆으로 넓어졌을 경우를 대처하지 못한다.

정답은 정해진 게 없지만 다양한 기법을 이용해 이런 경우를 고려해야한다.