IT/IT 인터넷

CSS Flexbox로 간단하고 효율적인 레이아웃 만들기

print() 2025. 1. 17. 01:42
300x250

 

CSS Flexbox는 복잡한 레이아웃을 간단하고 직관적으로 구성할 수 있는 강력한 도구입니다.

 

이번 글에서는 Flexbox의 기본 개념과 실제 적용 사례를 다루며, 다양한 레이아웃을 직접 만들어 보겠습니다.

 

준비물

  • HTML 및 CSS 기본 지식
  • 텍스트 편집기(예: VS Code)
  • 브라우저(예: Chrome, Edge)

 

Flexbox의 주요 개념

  1. 컨테이너와 아이템
    Flexbox는 부모 요소를 컨테이너로 설정하고, 자식 요소를 아이템으로 취급합니다.
    Flexbox를 사용할려면 display: flex; 스타일 속성을 추가해주어야 합니다.
  2. 주요 속성
    • justify-content: 주 축 방향 정렬
    • align-items: 교차 축 방향 정렬
    • flex-wrap: 아이템 줄바꿈 설정

 

 

크롬의 개발자도구를 통해 주요 속성을 변경하며 실습해 보세요.

 

소스코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 레이아웃</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        header {
            text-align: center;
            padding: 20px;
            background: #0078d7;
            color: white;
        }
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px;
            background: #f4f4f4;
        }
        .box {
            background: #0078d7;
            color: white;
            padding: 20px;
            margin: 10px;
            width: 100px;
            text-align: center;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS Flexbox 레이아웃</h1>
    </header>
    <main class="container">
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
		<div class="box" style="height: 50px;">1</div>
		<div class="box" style="height: 100px;">2</div>
		<div class="box" style="height: 75px;">3</div>
    </main>
</body>
</html>
300x250