[웹 디자인] 21일차: 모던 레이아웃 기법

모던 레이아웃 기법이란?

모던 레이아웃 기법은 CSS의 최신 기능들을 활용하여 웹 페이지의 레이아웃을 더욱 유연하고 강력하게 만드는 방법입니다. Flexbox와 Grid 레이아웃은 대표적인 모던 레이아웃 기법으로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다.

Flexbox와 Grid 결합 사용

Flexbox와 Grid를 함께 사용하여 더 복잡하고 유연한 레이아웃을 만들 수 있습니다.

 

예제: 헤더, 메인 콘텐츠, 사이드바, 푸터가 있는 레이아웃

HTML:

<div class="container">
  <header class="header">Header</header>
  <div class="main">
    <nav class="sidebar">Sidebar</nav>
    <article class="content">Content</article>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS:

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  height: 100vh;
}

.header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.main {
  display: flex;
}

.sidebar {
  background-color: #f4f4f4;
  padding: 20px;
  flex: 1;
}

.content {
  background-color: #fff;
  padding: 20px;
  flex: 3;
}

.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

예제 설명:

• Grid 레이아웃을 사용하여 전체 페이지의 기본 구조(헤더, 메인, 푸터)를 정의합니다.
• Flexbox를 사용하여 메인 콘텐츠 영역에서 사이드바와 콘텐츠를 배치합니다.

CSS 변수 사용

CSS 변수(Custom Properties)를 사용하면 스타일을 더 효율적으로 관리할 수 있습니다.

 

변수 선언 및 사용

예제:

:root {
  --main-bg-color: #333;
  --main-text-color: white;
  --sidebar-bg-color: #f4f4f4;
  --content-bg-color: #fff;
}

.header {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

.sidebar {
  background-color: var(--sidebar-bg-color);
}

.content {
  background-color: var(--content-bg-color);
}

예제 설명:

• :root 선택자를 사용하여 CSS 변수를 선언합니다.
• var(--variable-name)을 사용하여 변수 값을 참조합니다.

CSS 그리드 레이아웃 심화

그리드 레이아웃의 다양한 기능을 활용하여 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

 

격자 템플릿 영역 정의

그리드 템플릿 영역을 사용하면 레이아웃을 더 직관적으로 정의할 수 있습니다.

예제:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

예제 설명:

• grid-template-areas 속성을 사용하여 그리드 템플릿 영역을 정의합니다.
• grid-area 속성을 사용하여 각 그리드 아이템의 영역을 지정합니다.

미디어 쿼리를 사용한 반응형 그리드

미디어 쿼리를 사용하여 화면 크기에 따라 그리드 레이아웃을 조정할 수 있습니다.

예제:

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

예제 설명:

• 화면 크기가 768px 이하일 때 그리드 템플릿 영역을 재정의하여 레이아웃을 조정합니다.

CSS 함수 활용

CSS 함수는 스타일을 동적으로 조정하는 데 유용합니다.

calc() 함수

calc() 함수를 사용하여 계산된 값을 적용할 수 있습니다.

예제:

.container {
  width: calc(100% - 20px);
  height: calc(100vh - 40px);
  padding: 20px;
}

min(), max(), clamp() 함수

min(), max(), clamp() 함수는 다양한 조건에 따라 값을 설정할 수 있습니다.

예제:

.container {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

예제 설명:

• clamp() 함수를 사용하여 폰트 크기를 최소값, 선호값, 최대값 사이에서 자동으로 조정합니다.

결론

모던 레이아웃 기법은 최신 CSS 기능을 활용하여 더욱 유연하고 강력한 레이아웃을 구현할 수 있게 해줍니다. Flexbox와 Grid의 결합, CSS 변수, 고급 그리드 레이아웃, CSS 함수 등을 사용하여 복잡한 레이아웃을 쉽게 관리하고 구현할 수 있습니다. 이번 글에서는 모던 레이아웃 기법의 다양한 예제와 활용법에 대해 배웠습니다.

다음 글에서는 웹사이트 기획 및 와이어프레임 작성에 대해 알아보겠습니다.

다음 글에서 만나요!