CSS 레이아웃 기초: 박스 모델과 플로우
웹 페이지의 레이아웃을 이해하고 제어하는 것은 웹 디자인에서 매우 중요합니다. 이 강의에서는 CSS의 기본적인 레이아웃 구성 요소인 박스 모델과 문서 흐름에 대해 알아봅니다.
CSS 박스 모델
모든 HTML 요소는 CSS에서 "박스"로 간주됩니다. 박스 모델은 웹 페이지에서 개별 요소의 디자인과 레이아웃을 정의하는 데 사용됩니다.
박스 모델 구성 요소
- 콘텐츠(Content): 요소의 실제 내용을 포함합니다.
- 패딩(Padding): 콘텐츠 주위의 내부 공간을 나타냅니다.
- 테두리(Border): 콘텐츠와 패딩 주위를 감싸는 선입니다.
- 마진(Margin): 요소 주위의 외부 공간입니다.
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}위 CSS 코드는 박스 모델의 각 부분에 대한 스타일을 설정합니다.
CSS Flow
normal flow는 웹 페이지의 요소가 기본적으로 어떻게 배치되는지를 설명합니다. CSS에서는 이 흐름을 변경하여 복잡한 레이아웃을 만들 수 있습니다.
블록 레벨 요소와 인라인 요소
- 블록 레벨 요소: 새 줄에서 시작하며, 가능한 많은 너비를 차지합니다 (예: <div>, <p>).
- 인라인 요소: 콘텐츠와 함께 같은 줄에 나타나며, 콘텐츠의 너비만큼만 공간을 차지합니다 (예: <span>, <a>).
CSS 포지셔닝
- Static: 기본 흐름에 따라 요소가 배치됩니다.
- Relative: 요소가 원래 위치했던 곳을 기준으로 이동합니다.
- Absolute: 요소가 문서 흐름에서 제거되고, 가장 가까운 상대적으로 배치된 조상 요소에 대해 위치가 결정됩니다.
예제: 박스 모델과 문서 흐름
HTML:
<div class="box">박스 1</div>
<div class="box">박스 2</div>CSS:
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
실제 사용 예:
이 예제에서는 두 개의 박스 요소에 박스 모델 속성을 적용하고, 기본 문서 흐름에 따라 박스가 수직으로 배치되도록 합니다.
CSS 레이아웃의 다양한 기법들
CSS 레이아웃 기술은 단순한 박스 모델과 기본 문서 흐름을 넘어 다양한 레이아웃을 구성할 수 있는 방법을 제공합니다. 이들 중 몇 가지를 살펴보겠습니다.
플로트(Floats)
- 플로트는 요소를 정상 흐름에서 벗어나게 하여, 텍스트와 인라인 요소가 주변을 감싸도록 합니다. 주로 이미지를 텍스트 옆에 두는 데 사용됩니다.
.image {
float: left;
margin-right: 10px;
}플렉스박스(Flexbox)
- 플렉스박스는 복잡한 레이아웃을 간단하게 만들 수 있게 해주는 강력한 도구입니다. 1차원 레이아웃(행 또는 열)을 쉽게 다룰 수 있습니다.
.container {
display: flex;
justify-content: space-between;
}그리드(Grid)
- CSS 그리드는 2차원 레이아웃(행과 열 동시에)을 구성할 수 있게 해줍니다. 복잡한 레이아웃도 더욱 쉽고 정교하게 설계할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}반응형 디자인
- 미디어 쿼리를 사용하여 다양한 화면 크기와 장치에 맞는 스타일을 적용할 수 있습니다. 이는 모바일-퍼스트 디자인을 구현하는 데 필수적입니다.
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}실습 예제
이제 이러한 기법들을 실제로 적용한 예제를 살펴보겠습니다.
HTML:
<div class="container">
<div class="box">박스 1</div>
<div class="box">박스 2</div>
<div class="box">박스 3</div>
</div>
CSS:
.container {
display: flex;
justify-content: space-around;
}
.box {
width: 100px;
height: 100px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
}
실제사용예:
이 예제에서는 세 개의 박스가 가로로 정렬되어 있으며, 플렉스박스를 사용하여 중앙에 배치하고 있습니다.
결론
CSS 레이아웃은 활용도에 따라 매우 핵심적인 기술이 될 수 있습니다. 박스 모델과 함께 플로트, 플렉스박스, 그리드 시스템 등을 활용하여 다양하고 복잡한 웹 레이아웃을 구성할 수 있죠. 반응형 디자인을 통해 모든 장치에서 일관된 사용자 경험을 제공하는 것도 중요합니다. CSS 레이아웃에 대한 이해는 웹 개발자에게 필수적인 기술이므로 꼭 실습을 해보시고 다음강으로 넘어가는 것을 추천드립니다. 오늘도 해냈다!
댓글