웹페이지 디자인을 할 때 가장 중요한 부분 중 하나가 레이아웃입니다. 웹페이지 레이아웃은 전체적인 구조를 결정하며, 웹페이지의 사용성과 시각적인 효과를 결정합니다. 이번 글에서는 CSS Flexbox를 활용하여 간단한 웹페이지 레이아웃을 설계하는 방법을 알아보겠습니다.
Flexbox란?
Flexbox는 CSS 레이아웃 모델 중 하나로, 컨테이너와 그 안에 있는 요소들을 유연하게 정렬할 수 있도록 하는 방법입니다. Flexbox를 사용하면, 요소들을 수직, 수평 또는 그 사이에서 자유롭게 배치할 수 있습니다.
Flexbox의 구성 요소
Flexbox를 구성하는 요소는 크게 두 가지로 나뉩니다. 첫 번째는 Flex Container(플렉스 컨테이너)이고, 두 번째는 Flex Item(플렉스 아이템)입니다.
Flex Container
Flex Container는 Flexbox의 최상위 요소이며, Flexbox를 적용하기 위해서는 해당 요소에 display: flex 또는 display: inline-flex 속성을 적용해야 합니다.
.container {
display: flex;
}Flex Container에는 여러 가지 속성이 존재합니다. 대표적인 속성들은 다음과 같습니다.
- display : Flex Container를 정의합니다.
- flex-direction : Flex Item을 정렬하는 방향을 결정합니다. 기본값은 row입니다.
- justify-content : Flex Item을 수평 방향으로 정렬합니다.
- align-items : Flex Item을 수직 방향으로 정렬합니다.
- align-content - 여러 줄의 Flex Item이 있는 경우 수직 방향에서의 정렬 방법을 결정합니다.
- flex-wrap : Flex Item을 한 줄에 배치할 것인지, 여러 줄에 걸쳐 배치할 것인지 결정합니다.
Flex Item
Flex Item은 Flex Container 안에 있는 자식 요소들입니다. Flex Item에는 Flex Container와 마찬가지로 여러 가지 속성이 존재합니다.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
display: flex;
}
.item {
flex: 1;
}위 코드는 세 개의 Flex Item을 갖는 Flex Container를 만듭니다. 각각의 Flex Item은 flex: 1 속성을 갖고 있으며, 이를 통해 Flex Container 내에서 동일한 너비를 갖도록 설정합니다.
- order : Flex Item의 배치 순서를 결정합니다.
- flex-grow : Flex Item의 크기를 결정합니다.
- flex-shrink : Flex Item의 크기가 Flex Container보다 클 경우 얼마나 줄어들 수 있는지 결정합니다.
- flex-basis : Flex Item의 초기 크기를 결정합니다.
- flex : flex-grow, flex-shrink, flex-basis 속성을 한꺼번에 지정하는 축약형 속성입니다.
Flexbox를 활용한 간단한 웹페이지 레이아웃 설계
위에서 배운 내용을 활용하여 간단한 웹페이지 레이아웃을 만들어보겠습니다. 이번 예제에서는 Flexbox를 사용하여 Navigation Bar, Main Content, Sidebar, Footer 등을 배치할 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>Flexbox 예제</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Navigation Bar */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
height: 60px;
padding: 0 20px;
}
/* Main Content */
.main {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
}
/* Sidebar */
.sidebar {
flex: 0 0 200px;
background-color: #f2f2f2;
padding: 20px;
}
/* Footer */
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: #fff;
height: 60px;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="nav">
<h1>Logo</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="main">
<h2>Main Content</h2>
<p>Contents.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="footer">
<p>© 2023, Flexbox 예제</p>
</div>
</body>
</html>위 예제를 실행해보면 Navigation Bar와 Footer는 화면의 위쪽과 아래쪽에 각각 배치되어 있는 것을 볼 수 있습니다. Main Content와 Sidebar는 Flexbox를 사용하여 좌우로 나란히 배치되어 있습니다. Sidebar는 Navigation Bar와 Footer와 달리 고정된 너비를 가지도록 설정되어 있습니다.
이처럼 Flexbox를 이용하면 복잡한 레이아웃도 간단하게 설계할 수 있고, 반응형 웹페이지를 만들 때도 큰 도움이 됩니다.
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] video 태그를 사용한 동영상 삽입과 디자인 방법 (0) | 2023.03.02 |
|---|---|
| [HTML/CSS] table 태그를 활용한 표 만들기 방법 (0) | 2023.03.01 |
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
| [HTML/CSS] CSS 선택자의 종류와 활용 방법 (0) | 2023.02.26 |
| [HTML/CSS] 자주 쓰이는 HTML 태그 (0) | 2023.02.25 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
| [HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 (2) | 2023.02.23 |
댓글