CSS중급 레이아웃: 화면을 나누는 방법

CSS

CSS중급 레이아웃: 화면을 나누는 방법

프도의길 2021. 9. 21. 20:42

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다. CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다.

[수직분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.
[수평분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다.
- 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있습니다.

다음과 같이, VS Code와 비슷한 레이아웃을 적용한다고 가정합니다.

[그림] 레이아웃을 적용하기 위해 VS Code의 레이아웃을 참고합니다.

실제 VS Code의 레이아웃을 분석해 큰 틀에서 추상화하면, 다음과 같이 영역을 나눌 수 있습니다.

[그림] VS Code의 레이아웃을 추상화한 결과

CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례로 적용합니다. HTML 문서를 통해 레이아웃을 작성하면, 다음과 같이 구성할 수 있습니다.

</div>

</div>

</div>

[코드] 레이아웃을 고려해 작성한 HTML 파일

* 참고: 클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80을 CSS로 구현하면, 다음과 같습니다.

.w70 { width: 70%; }

.h40 { height: 40%; }

[코드] 클래스 이름에 맞는 CSS 구현

이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 합니다. 클래스 이름을 선언하는 방법에 대한 이야기는 CSS Architcture: Atomic CSS에서 확인할 수 있습니다. (지금 당장은 몰라도 됩니다!)

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있습니다. 때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 합니다. 어떤 사례가 있는지 찾아볼까요?

박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 태그가 가진 기본 스타일에 약간의 여백이 있습니다.
width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다. (이전 유닛을 통해 박스 크기 측정 기준(box-sizing)에 대해 학습한 내용입니다.)
브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다릅니다.

이러한 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장했지만, 사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있습니다.

* {

box-sizing: border-box;

}

body {

margin: 0; padding: 0;

}

기본 스타일링을 제거하는 CSS 코드의 예시