Chapter 04 새로운 웹 기술, 플렉서블 박스_3(플렉서블 박스 이용해 목업 웹사이트 만들기)

Do it! 반응형 웹 페이지 만들기 2022. 12. 1. 14:15

플렉서블 박스 이용해 목업 웹사이트 만들기

먼저 우리가 만들어볼 웹사이트의 구조와 각각의 영역이 어떠한 역할을 하는지 살펴볼까요?

← 로고와 메뉴를 담고 있는 헤더 영역

← 이미지를 효과적으로 보여주기 위한 슬라이더 영역과 사진을 보여줄 갤러리 영역 그리고 인기 검색어를 순위대로 보여주는 인기 검색어 영역

← 최근에 작성한 글들과 사람들이 많이 본 글을 보여주는 최근 글 영역과 인기 글 영역, 광고 또는 웹사이트에서 전달할 사항을 담고 있는 배너 영역, 그리고 사람들과의 소통을 위한 소셜 네트워크 영역

← 웹사이트의 저작권 정보 등을 담고 있는 푸터 영역

기본 구조 잡기

1. 편집기를 실행시켜 실습 파일인 04_1.html을 불러옵니다. 그리고 <body>, </body> 태그 사이에 wrap이라는 아이디로 <div> 태그를 작성합니다.

<body>
	<div id="wrap">
    
...

</div>
</body>

2. 헤더 영역, 슬라이더 영역, 갤러리 영역, 인기 검색어 영역을 만들기 위해 태그를 작성합니다. 가장 먼저 <header>, </header> 태그를 작성하고 헤더 태그에 header라는 클래스명을 입력합니다.

<body>
	<div id="wrap">
		<header class="header">
			<h1></h1> /* <header> 태그 사이에 제목을 만들기 위한 <h1> 태그와 */
			<nav></nav> /* 메뉴 영역을 만들기 위한 <nav> 태그를 작성합니다. */
		</header>
		<section class="slider_section"></section>
		<section class="gallery_section"></section>
		<section class="rankup_section"></section>
        /* 슬라이더 영역과 갤러리 영역, 인기 검색어 영역을 만들기 위해 <section> 태그 세 개를 작성한 후
        클래스명을 각각 slider_section, gallery_section, rankup_section이라고 입력합니다.*/
        
...

	</div>
</body>

3. 최근 글 영역과 인기 글 영역 그리고 배너 영역과 소셜 네트워크 영역을 만들기 위해 태그를 작성합니다.

<body>
	<div id="wrap">

...

		<section class="latest_post_section"></section>
		<section class="popular_post_section"></section>
		<section class="banner_section">
			<div class="banner_box_01"></div>
			<div class="banner_box_02"></div>
		</section>
		<section class="social_section"></section>
        /* 여기에도 <section> 태그 네 개를 작성하고 각각 latest_post_section, popular_post_section,
        banner_section, social_section이라는 클래스명을 입력합니다.
        그리고 banner_section이라는 클래스명의 <section> 태그 안에 위, 아래로 구조를 나누기 위해
        <div> 태그 두 개를 작성하고, 각각 banner_box_01, banner_box_02라는 클래스명을 입력합니다.*/
        
	</div>
</body>

4. 푸터 영역의 구조를 만들기 위한 태그 작성하기

이제 맨 하단인 푸터 영역을 만들기 위해 <footer>, </footer> 태그를 작성하고, footer라는 클래스명을 입력하는 것으로 구조 작업을 마무리합니다.

<body>
	<div id="wrap">

...

		<footer class="footer"></footer>
	</div>
</body>

기본 스타일 작업하기

1. 먼저 <head>, </head> 태그 사이에 <style>, </style> 태그를 작성합니다. 실습 파일에서 07행과 103행에 입력합니다.

<style>

...

</style>

2. <style>, </style> 태그 사이에 마진값과 패딩값을 0으로 설정합니다. 그리고 wrap이라는 아이디의 <div> 태그를 플렉서블 박스로 작동하도록 display 석성과 flex-flow 속성, 그리고 가로 너빗값과 마진값을 설정합니다.

<style>
*{margin:0; padding:0;}
/* 모든 태그의 마진값과 패딩값을 초기화하기 위해 마진값과 패딩값을 0으로 설정합니다. */

#wrap{
display:flex;
flex-flow:row wrap;
width:90%; 
margin:0 auto;
}
/* display 속성의 값을 flex로 설정하고, flex-flow 속성의 값을 가로로 여러 줄 배치하는 row wrap으로 설정합니다.
가로 너빗값은 90%로 설정하고, 박스를 중앙으로 정렬하기 위해 마진값을 0 auto로 설정합니다. */

...

</style>

3. 헤더 영역의 스타일 작업하기

헤더 영역 역시 플렉서블 박스로 작동할 수 있게 일일이 속성을 설정해야 합니다.

<style>
...

.header{
display:flex;
order:1;
position:relative;
width:100%;
}
/* 헤더 영역에 플렉서블 박스 속성들을 적용하기 위해 display 속성의 값을 플렉서블 박스로 작동하게 하는
flex로, order 속성의 값을 1로 설정합니다. 그리고 position 속성은 상대적인 위치로 만들어주는
relative로 설정하고 너빗값은 100%로 설정합니다. */

.header h1{
position:absolute;
top:0;
left:0;
width:12.5%;
height:142px;
background:#ff6b57;
}
/* 제목을 만들기 위한 <h1> 태그에 position 속성의 값을 절대적인 위치로 만들어주는 absolute로 설정하고,
위칫값은 위쪽과 왼쪽 모두 0으로 설정합니다. 그리고 너빗값과 높잇값을 각각 12.5%, 142px로 설정하고
배경색을 설정합니다. */

.header nav{
width:87.5%;
min-height:80px;
background:#ff6b57;
}
/* 메뉴 영역인 <nav> 태그에 너빗값을 87.5%로 설정하고, 최소 높잇값을 80px로 설정합니다.
그리고 배경색을 설정합니다. */

...
</style>

지금까지 작성한 HTML 파일을 저장한 다음 크롬으로 실행해 보겠습니다. 제목 영역인 <h1> 태그는 정상이지만 메뉴 영역인 <nav> 태그는 제목 영역에 가려 보이지 않네요.

왜 이런 문제가 발생한 것일까요? 그 이유는 제목 영역인 <h1> 태그에 요소의 위치를 설정하는 position 속성이 'absolute'로 설정되었기 때문에 제목 영역은 기존의 위치에서 벗어나게 되고, 메뉴 영역은 왼쪽으로 배치되면서 제목 영역이 메뉴 영역 위로 올라갔기 때문입니다.

4. 이 문제를 해결하려면 플렉서블 박스의 속성 중 justify-content 속성을 사용해야 합니다. 주축 방향으로 박스를 다양하게 배치해 주는 속성입니다.

<style>
...

.header{
display:flex;
order:1;
justify-content:flex-end;
/* 헤더 영역에 justify-content 속성의 값을 flex-end로 설정합니다.
flex-end로 설정하면 플렉스 아이템이 끝점에 배치됩니다. */
position:relative;
width:100%;
}

...
</style>

다시 웹 브라우저에서 확인해 보면 정상적으로 박스들이 배치되는 모습을 확인할 수 있습니다.

5. 슬라이더 영역, 갤러리 영역, 인기 검색어 영역의 스타일 작업하기

먼저 슬라이더 영역과 갤러리 영역 그리고 인기 검색어 영역에 플렉스 아이템의 배치 순서를 변경하는 order 속성의 값을 각각 2, 3, 4로 설정합니다.

그리고 각 영역마다 가로 너빗값과 높잇값, 배경색을 설정합니다. 배경색은 박스별로 구분해 줘야 하므로 서로 다른 색으로 설정합니다.

<style>
...

.slider_section{
order:2;
width:50%;
background:#3c90be;
}
/* 슬라이더 영역은 너빗값을 50%로 설정하고, 배경색을 설정합니다. */

.gallery_section{
order:3;
width:27.083333333333333333333333333333%;
height:440px;
background:#f8de73;
}
/* 갤러리 영역에는 너빗값과 높잇값을 각각 27.08...% 440px로 설정하고, 배경색을 설정합니다. */

.rankup_section{
order:4;
width:22.916666666666666666666666666667%;
background:#00d2a5;
}
/* 인기 검색어 영역에는 너빗값을 22.91...%로 설정하고, 배경색을 설정합니다. */

...
</style>

지금까지 작업한 파일을 웹 브라우저에서 확인해 보세요. 정상적으로 박스들이 배치되어 있는 모습을 확인할 수 있을 겁니다.

6. 최근 글, 인기 글 영역, 배너 영역, 소셜 네트워크 영역의 스타일 작업하기

최근 글, 인기 글 영역과 배너 영역 그리고 소셜 네트워크 영역에도 order 속성의 값을 각각 5, 6, 7, 8로 설정합니다.

<style>
...

.latest_post_section{
order:5;
width:30%;
background:#9cabe4;
}

.popular_post_section{
order:6;
width:30%;
background:#d76817;
}
/* 최근 글, 인기 글 영역은 너빗값을 30%로 설정하고, 각각의 배경색을 설정합니다. */

.banner_section{
display:flex;
order:7;
flex-flow:column nowrap;
width:22.916666666666666666666666666667%;
}
/* 배너 영역에는 플렉서블 박스로 작동할 수 있게 display 속성의 값을 flex로 설정합니다.
그리고 플렉스 아이템을 세로로 배치하고, 한 줄로 배치되도록 flex-flow 속성의 값을
column nowrap으로 설정합니다. 그리고 너빗값을 22.91...%로 설정합니다. */

.banner_section div{
flex:1 1 0;
}

.banner_section div.banner_box_01{
background:#0175bb;
}

.banner_section div.banner_box_02{
background:#1261c9;
}
/* 배너 영역의 자식 박스들인 <div> 태그들에는 같은 줄에 있는 박스들의 높이를 반반씩 차지할 수 있도록
박스의 크기를 늘이는 flex 속성의 값을 1 1 0으로 설정합니다. 그리고 배경색을 각각 다른 색으로 설정합니다. */

.social_section{
order:8;
width:17.083333333333333333333333333333%;
height:270px;
background:#fe6eda;
}
/* 소셜 네트워크 영역에 가로 너빗값과 높잇값을 각각 17.08...%, 270px로 설정하고, 배경색을 설정합니다. */

...
</style>

7. 푸터 영역의 스타일 작업하기

푸터 영역에도 순서를 지정해 주는 order 속성의 값을 9로 설정합니다. 그리고 가로 너빗값과 높잇값을 100%, 94px로 설정하고, 배경색을 설정해 마무리합니다.

<style>
...

.footer{
order:9;
width:100%;
height:94px;
background:#474747;
}
</style>

이제 웹사이트의 구조가 완성되었습니다. 파일을 저장한 다음 크롬으로 실행해서 화면의 크기를 늘였다 줄였다 하면서 확인해 보세요.

출처 : "반응형 웹 페이지 만들기"

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

Chapter 06 메인 페이지 작업하기_1(메인 페이지 구조 작업하기) (0)	2022.12.04
Chapter 05 반응형 웹사이트 준비 작업하기 (0)	2022.12.04
Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2) (0)	2022.12.01
Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1) (0)	2022.12.01
Chapter 03 미디어 쿼리와 뷰포트 (0)	2022.12.01

ABOUT ME

's IT STORY 's IT STORY

플렉서블 박스 이용해 목업 웹사이트 만들기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

플렉서블 박스 이용해 목업 웹사이트 만들기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바