CSS Flexible Box로 반응형 3단 레이아웃 구성하기
CSS Flex(Flexible Box)로 반응형 3단 레이아웃을 구현하는 방법
에 대해 소개합니다.반응형 레이아웃 구상
아래 반응형 3단 레이아웃 구성은 현재(2020년 11월) 스킨에 적용된 레이아웃입니다. 구현 초기에 CSS Grid의 grid-template-areas 속성으로 구현하려 했으나, IE호환이 되지 않아 다른 방법을 고민하다가 모바일 접속률은 낮고, 불필요한 내용이 들어가면 로딩 속도가 느려지니 본문만 표시하는 방식으로 바꾸었습니다. 아래 그림과 같이 HTML 요소들을 1차원으로 배치하는 것은 CSS Flex로 간단하고 쉽게 구현이 가능했습니다.
반응형 3단 레이아웃 구현
1. 기본 요소배치
위의 구조를 만들어 주기 위해 HTML로 기본 요소를 배치하고, 레이아웃 변경되는 것을 보기 위해 기초 CSS 코드를 삽입하였습니다. 중앙의 사이드바와 포스팅이 있는 부분은 <main> 태그로 감싸주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
aside,
section,
footer{
border:solid 1px black;
margin:3px;
text-align: center;
}
header,
footer{
background-color:black;
color:white;
}
#aisdeLeft{
background-color: darkseagreen;
}
#section{
background-color: darkcyan;
}
#aisdeRight{
background-color: bisque;
}
#article{
height:800px;
}
</style>
</head>
<body>
<header id="header">#header</header>
<main id="main">
<aside id="aisdeLeft">#asideLeft</aside>
<section id="section">
<article id="article">
<div id="article">#article</div>
</article>
</section>
<aside id="aisdeRight">#asideRight</aside>
</main>
<footer id="footer">#footer</footer>
</body>
</html>
2. Flex-Container 추가 후 Flex 적용
Flex도 Grid와 마찬가지로 정렬하는 요소를 감싸는 Container, 정렬이 되는 요소 Items 가 존재합니다. Flex Container와 Flex Item 마다 설정할 수 있는 속성이 따로 존재합니다. 구글에서 검색하시면 다양한 옵션을 확인할 수 있습니다.
위 코드에서 <main> 태그 아래에 container용 div를 추가하여 를 추가하여 display:flex 속성을 적용합니다. container용 div 없이 main에 바로 display:flex를 설정해도 되지만, 별도의 container div를 삽입하면 추후에 편리하게 본문 폭, 패딩, 마진을 편리하게 수정할 수 있습니다. 또한 Header, nav, footer 등에도 같은 container 클래스의 div를 사용하여 화면 전체가 같은 폭을 가지는 페이지 형태도 쉽게 만들 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
aside,
section,
footer {
border: solid 1px black;
margin: 3px;
text-align: center;
}
header,
footer {
background-color: black;
color: white;
}
.container {
display: flex;
margin: 0 auto;
max-width:1250px;
border: solid 1px red;
}
#aisdeLeft {
background-color: darkseagreen;
}
#section {
background-color: darkcyan;
}
#aisdeRight {
background-color: bisque;
}
#article {
height: 800px;
flex-grow: 1;
}
</style>
</head>
<body>
<header id="header">#header</header>
<main id="main">
<div class="container">
<aside id="aisdeLeft">#asideLeft</aside>
<section id="section">
<article id="article">
<div id="article">#article</div>
</article>
</section>
<aside id="aisdeRight">#asideRight</aside>
</div>
</main>
<footer id="footer">#footer</footer>
</body>
</html>
위 그림에서 빨간색 태두리는 flex-container로 사용된 div의 태두리입니다. 이제 사이드바와 Article의 폭만 지정되면 될 것 같습니다.
3. Flex Item 요소 넓이 지정
위 그림에서 사이드바와 본문의 영역 넓이만 지정되면 PC형 레이아웃은 완료됩니다. 왼쪽 사이드바는 200px, 오른쪽 사이드바는 320px으로 고정하기 위해 flex-glow: 0; 속성을 추가하고, 섹션은 container의 크기에 비례하여 유동적으로 변경하도록 flex-glow:1;속성을 추가합니다. 전체 코드는 길어서 수정되는 곳만 표시하였습니다.
- flex-grow 속성 : flex item에 사용될 수 있는 속성으로 크기 변경에 관련된 속성
- 속성 값 0 : flex container의 크기가 커져도 원래 크기로 유지
- 속성값 1 : flex container 의 크기에 비례하기 변경
#aisdeLeft {
flex-grow: 0;
background-color: darkseagreen;
width:200px;
}
#section {
flex-grow:1;
background-color: darkcyan;
}
#aisdeRight {
flex-grow: 0;
background-color: bisque;
width:320px;
}
4. 미디어 쿼리로 반응형 레이아웃 완성
위의 기본 레이아웃이 완성되면 미디어 쿼리를 사용하여 타블릿 크기인 경우 왼쪽 사이드바를 display:none; 모바일인 경우 오른쪽 사이드바까지 display:none; 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
aside,
section,
footer {
border: solid 1px black;
margin: 3px;
text-align: center;
font-size:30px;
}
header,
footer {
background-color: black;
color: white;
}
.container {
display: flex;
margin: 0 auto;
max-width: 1360px;
border: solid 1px red;
}
#aisdeLeft {
flex-grow: 0;
background-color: darkseagreen;
width: 200px;
}
#section {
flex-grow: 1;
background-color: darkcyan;
}
#aisdeRight {
flex-grow: 0;
background-color: bisque;
width: 320px;
}
#article {
flex-grow: 1;
height: 800px;
}
/* tablet */
@media screen and (max-width: 1250px) {
#aisdeLeft {
display:none;
}
}
/* mobile */
@media screen and (max-width: 900px) {
#aisdeRight {
display:none;
}
}
</style>
</head>
<body>
<header id="header">#header</header>
<main id="main">
<div class="container">
<aside id="aisdeLeft">#asideLeft</aside>
<section id="section">
<article id="article">
<div id="article">#article</div>
</article>
</section>
<aside id="aisdeRight">#asideRight</aside>
</div>
</main>
<footer id="footer">#footer</footer>
</body>
</html>
위 코드는 간단한 예시이고 미디어 쿼리를 세분화하면 포스트 본문 최소 크기를 중심으로 특정 구간에서 사이드바가 유동적으로 줄어드는 옵션처럼 사용도 가능합니다.
마무리
이번 포스트에서는 CSS Flex를 사용하여 반응형 3단 레이아웃을 구성하는 방법에 대해 소개하였습니다. Grid를 사용하여 반응형 3단 레이아웃 구성이 필요하신 분은 이전들을 참고해주세요.
https://juahnpop.tistory.com/180
#4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기
grid template areas 속성으로 3단 레이아웃 구성 CSS Grid의 Grid template areas 속성은 비전공자인 제가 느끼기에 웹페이지 2차원 레이아웃을 구성하는 방법 중에 가장 직관적이고 쉬운 방법으로 느껴졌습
juahnpop.tistory.com
끝까지 읽어주셔서 감사합니다^^
'Tistory' 카테고리의 다른 글
| #7 CSS Sticky 속성으로 사이드바 내부 일부 영역 화면에 고정 하기 (1) | 2020.11.26 |
|---|---|
| #6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정 (0) | 2020.11.26 |
| #4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |
| #3 티스토리 스킨 제작 레이아웃 구상 Part.2 사이드바, 본문 활용 방안 (4) | 2020.11.23 |
| #2 이탈율 감소, 체류 시간을 높이는 레이아웃 구상 Part.1 구현 방향과 헤더 영역 (0) | 2020.11.23 |