icon

박스 모델과 요소 배치

 CSS에서 박스 모델과 요소 배치는 웹 페이지의 레이아웃을 구성하는 핵심 개념입니다.

 이 절에서는 CSS 박스 모델, 디스플레이 속성, 포지션 속성, 그리고 float 속성에 대해 자세히 알아보겠습니다.

CSS 박스 모델

 CSS 박스 모델은 모든 HTML 요소를 감싸는 박스를 정의합니다.

 이 박스는 다음 네 가지 영역으로 구성됩니다.

  1. Content : 요소의 실제 내용이 들어가는 영역
  2. Padding : 내용과 테두리 사이의 여백
  3. Border : 패딩을 감싸는 테두리
  4. Margin : 요소 외부의 여백
.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

 box-sizing 속성

 box-sizing 속성은 요소의 전체 크기를 계산하는 방식을 결정합니다.

  • content-box (기본값) : width와 height가 content 영역만을 지정
  • border-box : width와 height가 padding과 border를 포함
* {
    box-sizing: border-box;
}

 border-box를 사용하면 요소의 전체 크기를 더 직관적으로 제어할 수 있습니다.

디스플레이 속성

 display 속성은 요소가 문서 흐름에서 어떻게 배치될지를 결정합니다.

 1. block

  • 새 줄에서 시작하며, 가능한 전체 너비를 차지
  • 예 : <div>, <p>, <h1>-<h6>

 2. inline

  • 텍스트 흐름을 따라 배치되며, 내용만큼의 공간만 차지
  • width와 height 속성이 적용되지 않음
  • 예 : <span>, <a>, <strong>

 3. inline-block

  • inline처럼 텍스트 흐름을 따르지만, block처럼 width와 height 지정 가능

 4. none

  • 요소를 완전히 숨김 (공간도 차지하지 않음)
.inline-block-example {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
}

Position 속성

 position 속성은 요소의 위치 지정 방법을 결정합니다.

 1. static (기본값)

  • 일반적인 문서 흐름에 따라 배치

 2. relative

  • 일반 위치를 기준으로 상대적으로 배치
  • top, right, bottom, left 속성으로 이동 가능

 3. absolute

  • 가장 가까운 positioned 조상 요소를 기준으로 배치
  • 조상 중 positioned 요소가 없으면 초기 컨테이닝 블록 기준

 4. fixed

  • 뷰포트를 기준으로 고정 배치 (스크롤해도 위치 유지)

 5. sticky

  • 스크롤 위치에 따라 relative와 fixed 사이를 전환
.absolute-example {
    position: absolute;
    top: 50px;
    left: 100px;
}

z-index

 z-index 속성은 요소들이 겹칠 때 어떤 요소가 위에 표시될지 결정합니다.

.top-layer {
    z-index: 2;
}
.bottom-layer {
    z-index: 1;
}

Float 속성

 float 속성은 요소를 왼쪽이나 오른쪽으로 떠 있게 만듭니다.

 주로 이미지와 텍스트를 나란히 배치할 때 사용됩니다.

.float-left {
    float: left;
    margin-right: 10px;
}

Clearfix

 float을 사용하면 부모 요소가 float된 자식 요소의 높이를 인식하지 못하는 문제가 발생할 수 있습니다. 이를 해결하기 위해 clearfix 기법을 사용합니다.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

 현대적인 레이아웃 기법(Flexbox, Grid)의 등장으로 float의 사용은 줄어들고 있지만, 여전히 특정 상황에서는 유용합니다.

실제 레이아웃 구성 예시

 다음은 위에서 설명한 개념들을 활용한 간단한 레이아웃 예시입니다.

<div class="container clearfix">
    <header>
        <h1>웹사이트 제목</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>본문 제목</h2>
            <p>본문 내용...</p>
        </article>
        <aside>
            <h3>사이드바</h3>
            <p>추가 정보...</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 내 웹사이트</p>
    </footer>
</div>
* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
 
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
 
header {
    background-color: #f4f4f4;
    padding: 20px;
    margin-bottom: 20px;
}
 
nav ul {
    list-style-type: none;
    padding: 0;
}
 
nav ul li {
    display: inline;
    margin-right: 10px;
}
 
main {
    display: flex;
}
 
article {
    flex: 2;
    padding: 20px;
    background-color: #fff;
}
 
aside {
    flex: 1;
    padding: 20px;
    background-color: #f4f4f4;
    margin-left: 20px;
}
 
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}
 
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }
    aside {
        margin-left: 0;
        margin-top: 20px;
    }
}

 이 예시는 반응형 레이아웃을 구현하며, 박스 모델, 디스플레이 속성, Flexbox 등의 개념을 활용합니다. 미디어 쿼리를 사용하여 작은 화면에서의 레이아웃 변경도 처리하고 있습니다.

 CSS의 박스 모델과 요소 배치 기술을 이해하고 적절히 활용하면, 다양한 디자인 요구사항을 만족시키는 유연하고 반응적인 레이아웃을 구현할 수 있습니다. 최신 CSS 기술인 Flexbox와 Grid를 함께 활용하면 더욱 강력하고 효율적인 레이아웃 구성이 가능합니다.

 항상 브라우저 호환성과 성능을 고려하며, 사용자 경험을 최적화하는 방향으로 레이아웃을 설계해야 합니다.

이전으로다음으로