CSS3 레이아웃

레이아웃의 기초

박스 모델(Box Model)

• 모든 HTML 요소는 사각형 박스로 간주되어 화면에 배치됩니다.
• 각 요소는 다음과 같은 영역으로 구성됩니다:
  • Content: 실제 콘텐츠가 표시되는 영역
  • Padding: 콘텐츠와 경계선 사이의 여백
  • Border: 요소의 경계선
  • Margin: 요소와 다른 요소 사이의 바깥 여백
• 개발자 도구에서 다음과 같이 스타일을 적용해 박스 영역을 시각적으로 확인할 수 있습니다:

   {
    border: 1px solid red;
  }

블록 요소와 인라인 요소

• 블록 요소(Block Elements)
  • 한 줄 전체를 차지하며, 자동으로 줄 바꿈이 일어납니다.
  • 예시: <h1>, <p>, <div>, <header>, <nav>
• 인라인 요소(Inline Elements)
  • 한 줄에 차례대로 배치되며, 필요한 만큼의 너비만 차지합니다.
  • 예시: <a>, <img>, <strong>, <span>
• 일반적으로 웹 페이지는 블록 요소와 인라인 요소가 혼합되어 사용됩니다.

display 속성

• HTML 요소의 기본 display 속성을 변경하여 레이아웃을 조정할 수 있습니다.
  • 블록 요소를 인라인 요소로 변경:

    div {
      display: inline;
    }
  • 인라인 요소를 블록 요소로 변경:

    img {
      display: block;
    }
• display: none;
  • 요소를 화면에서 완전히 제거하며, 공간도 차지하지 않습니다.
• visibility: hidden;
  • 요소를 보이지 않게 하지만, 해당 요소가 차지하는 공간은 그대로 유지됩니다.

요소의 위치

position 속성과 오프셋

• position 속성은 요소의 위치를 지정할 때 사용하며, top, bottom, left, right와 함께 사용됩니다.
• 오프셋 속성(top, bottom, left, right)은 반드시 position 속성이 설정되어 있어야 동작합니다.

값	설명
static	기본값. 페이지의 일반적인 흐름에 따라 배치되며, 오프셋 속성의 영향을 받지 않습니다.
relative	요소의 원래 위치를 기준으로 상대적으로 이동합니다. 다른 요소의 흐름에는 영향을 주지 않습니다.
absolute	가장 가까운 position이 지정된 조상 요소를 기준으로 절대 위치에 배치됩니다.
fixed	브라우저의 뷰포트를 기준으로 고정되어, 스크롤해도 위치가 변하지 않습니다.

.box {
  position: absolute;
  top: 20px;
  left: 30px;
}

float와 clear

• float: 요소를 왼쪽(left) 또는 오른쪽(right)으로 띄워서, 텍스트나 다른 인라인 요소가 그 주위를 감싸도록 만듭니다.
• clear: float된 요소의 영향을 받지 않도록 다음 요소의 흐름을 제어합니다.

.img-left {
  float: left;
}
.clearfix {
  clear: both;
}

z-index

• z-index: 요소의 쌓임 순서를 지정합니다. 값이 클수록 위에 표시됩니다.
• position이 relative, absolute, fixed, sticky일 때만 적용됩니다.

.layer {
  position: absolute;
  z-index: 10;
}

요소의 크기

• width, height: 요소의 너비와 높이를 지정합니다.
• min-width, min-height: 요소의 최소 크기를 제한합니다.
• max-width, max-height: 요소의 최대 크기를 제한합니다.

.container {
  width: 300px;
  min-height: 100px;
  max-width: 90%;
}

overflow

• overflow: 자식 요소가 부모 영역을 벗어날 때의 처리 방법을 지정합니다.
  • visible: 기본값, 넘친 부분을 그대로 표시
  • hidden: 넘친 부분을 숨김
  • scroll: 항상 스크롤바 표시
  • auto: 필요할 때만 스크롤바 표시

.box {
  overflow: auto;
}

다양한 레이아웃 기법

1. <div> 요소를 이용한 레이아웃

• 가장 널리 사용되는 방법으로, <div>는 블록 수준 요소로 여러 요소를 그룹화할 때 사용합니다.
• 과거에는 <table> 태그를 이용해 레이아웃을 구성했으나, 현재는 <div>와 CSS를 조합하는 방식이 표준입니다.

<div class="container">
  <div class="header">헤더</div>
  <div class="content">본문</div>
  <div class="footer">푸터</div>
</div>

2. 의미적 요소(Semantic Elements)를 이용한 레이아웃

• HTML5에서는 의미 없는 컨테이너 역할만 하던 <div>의 한계를 보완하기 위해, 시멘틱 요소를 도입했습니다.
• 시멘틱 요소는 브라우저와 개발자 모두에게 구조와 의미를 명확히 전달합니다.
• 대표적인 시멘틱 요소:
  • <header>, <nav>, <article>, <section>, <aside>, <footer>, <figure>, <time> 등
• 이러한 태그는 이름만으로도 역할을 쉽게 유추할 수 있어 코드의 가독성과 유지보수성이 높아집니다.

<header>헤더</header>
<nav>내비게이션</nav>
<section>
  <article>기사 내용</article>
  <aside>사이드바</aside>
</section>
<footer>푸터</footer>

3. display: table-cell;을 이용한 레이아웃

• display: table-cell; 속성을 사용하면, 컨테이너 내 자식 요소를 테이블 셀처럼 배치할 수 있습니다.
• 이 방식은 float나 절대 위치 지정 없이도 수평 정렬과 동일한 높이의 컬럼을 쉽게 구현할 수 있습니다.
• CSS 코드가 간결해지고, 컬럼의 높이가 달라도 레이아웃이 깨지지 않는 장점이 있습니다.

<div class="table">
  <div class="cell">셀 1</div>
  <div class="cell">셀 2</div>
</div>

.table {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}

요소의 효과, 변환, 애니메이션

1. 요소의 효과

• 투명도(opacity)
  • 요소의 투명도를 0.0(완전 투명)부터 1.0(완전 불투명)까지 조절합니다.

    .transparent {
      opacity: 0.5;
    }
• 가시성(visibility)
  • 요소를 보이거나 숨길 수 있습니다. visibility: hidden;은 공간을 유지하지만, display: none;은 공간도 제거합니다.

    .invisible {
      visibility: hidden;
    }

2. 전환(Transition)

• 전환 효과
  • CSS 속성의 변화를 지정된 시간 동안 부드럽게 전환합니다.

    .box {
      transition: width 0.5s;
    }
    .box:hover {
      width: 300px;
    }
• 다중 전환
  • 여러 속성에 동시에 전환 효과를 줄 수 있습니다.

    .multi {
      transition: width 0.5s, height 0.5s, transform 0.5s;
    }
  • 브라우저 호환성을 위해 접두사(-webkit-, -moz-, -o-)를 사용할 수 있습니다.

3. 요소의 변환(Transform)

• 평행 이동
  • translate(x, y): 요소를 x, y만큼 이동

    .move {
      transform: translate(50px, 20px);
    }
• 회전
  • rotate(deg): 지정한 각도만큼 회전

    .rotate {
      transform: rotate(45deg);
    }
• 크기 변환
  • scale(x, y): x, y 방향으로 확대/축소

    .scale {
      transform: scale(1.5, 1.2);
    }
• 비틀기 변환
  • skew(x-deg, y-deg): x, y 방향으로 비틀기

    .skew {
      transform: skew(20deg, 10deg);
    }
• 복합 변환
  • 여러 변환을 한 번에 적용할 수 있습니다.

    .combo {
      transform: translate(20px, 0) scale(1.2) rotate(10deg);
    }
• 행렬 변환
  • matrix() 함수로 2차원 변환을 결합

    .matrix {
      transform: matrix(1, 0.2, 0.2, 1, 10, 20);
    }
• 3차원 변환
  • translate3d, scale3d, rotate3d, perspective 등으로 3D 효과 구현

    .three-d {
      transform: rotate3d(1, 1, 0, 45deg);
    }

4. 요소의 애니메이션(Animation)

• 키프레임 애니메이션
  • @keyframes를 사용해 애니메이션의 각 단계를 정의합니다.

    @keyframes slide {
      from {
        left: 0;
      }
      to {
        left: 100px;
      }
    }
    .animate {
      position: relative;
      animation: slide 2s;
    }
• 속도 효과(Easing Effect)
  • 애니메이션의 속도 변화를 제어합니다.
    • linear, ease, ease-in, ease-out, ease-in-out
    • 3차 베지어 곡선도 사용 가능

    .ease {
      animation: slide 2s ease-out;
    }

CSS3의 효과, 변환, 애니메이션을 활용하면 시각적으로 풍부하고 동적인 웹 UI를 구현할 수 있습니다.