Chapter 05 반응형 웹사이트 준비 작업하기

Do it! 반응형 웹 페이지 만들기 2022. 12. 4. 13:59

웹사이트 구조 다지기

1단계: 웹사이트 구조 살펴보기

웹사이트를 제작하기 전에 가장 먼저 할 일은 웹사이트의 구조를 확인하는 것입니다. 직접 디자인한 웹사이트의 포토샵 원본 파일 혹은 디자이너로부터 받은 시안 파일을 꼼꼼이 검토해야 합니다.

웹사이트의 구조를 확인하는 게 1순위인 이유는 반응형 웹의 경우 환경이나 크기에 따라 웹사이트의 구조가 크게 바뀌기 때문에 여러 가지 사항들을 미리 고려해야 하기 때문이죠.

우선 이 책에서 제작할 반응형 웹사이트의 구조를 살펴볼까요? 최근 웹 디자인 트렌드로 떠오른 플랫 디자인 스타일로 디자인된 웹사이트로, 메인 페이지의 구조는 10개의 영역으로 나누어져 있습니다. PC나 태블릿 환경에서는 영역들이 가로로 여러 줄 배치되게 구성되어 있지만 가장 작은 화면인 모바일 환경에서는 영역들이 세로로 한 줄씩 배치됩니다.

(이 책에서 제작해 볼 반응형 웹사이트의 포토샵 원본 파일은 둘째마당/psd 폴더에 있습니다.)

서브 페이지는 소개 페이지, 갤러리 페이지, 게시판 페이지로 총 세 개의 페이지로 구성되어 있으며 모든 환경에서 영역이 세로로 한 줄씩 배치됩니다.

2단계: 폴더와 기본 파일 구성하기

웹사이트의 구조를 확인했다면 이번에는 기본 폴더와 기본 파일 구성 작업을 진행해 보겠습니다.

기본 폴더와 기본 파일 구성 작업이란 웹사이트를 제작할 때 편의성을 높이기 위해 기본적인 HTML 파일, 그림 파일, 자바스크립트 파일, 웹폰트 파일 등을 미리 정리하는 작업입니다.

그럼 둘째마당에서 제작할 반응형 웹사이트의 기본 폴더와 기본 파일을 구성해 볼까요?

1. 기본 폴더 만들기

적당한 위치에 폴더를 하나 만들고 그 폴더 안에 네 개의 폴더를 만듭니다. 폴더 이름을 각각 css, images, js, webfont라고 입력해 저장합니다.

2. images 폴더 안에 세 개의 폴더가 필요합니다. 폴더를 만든 후 폴더 이름을 각각 s_images, p_images, favicon이라고 입력해 저장합니다.

3. 기본 파일 구성하기

편집기를 실행한 후 HTML 파일 네 개를 만듭니다. 파일 이름을 각각 index.html, introduce.html, gallery.html, board.html이라고 입력해 저장합니다.

(webfont, js, images 폴더에는 별도의 소스 파일이 있어 직접 구성하기가 힘드니 내려받은 예제 파일에서 복사해와야 합니다. 예제 파일은 둘째마당/5장/반응형 웹 기본구성 폴더에 있습니다.)

만약 폴더 구성을 미리 하지 않고 무작정 시작했다가 나중에 파일이나 폴더를 추가하려고 하면 그때는 소스가 너무 많고 복잡해져서 작업이 혼란스럽고 뒤죽박죽이 될 수 있습니다. 그러므로 웹사이트 제작은 반드시 폴더 구성 작업을 마친 후에 시작하세요.

※ 웹폰트가 뭔가요?
웹폰트란 운영체제에 별도로 설치된 폰드를 웹에서도 사용할 수 있게 도와주는 CSS3 속성 중 하나입니다. 그런데 '이미 운영체제에 설치된 폰드를 CSS 속성 중 폰트 속성을 이용해 웹에서 사용할 수 있지 않나요?'라고 묻는 분도 있을 것입니다. 하지만 내 운영체제에만 설치되어 있는 폰트를 웹 문서의 기본 폰트로 설정해도 다른 사람들은 같은 폰트를 제공받을 수 없습니다. 결국 웹사이트를 방문하는 사용자들이 웹사이트에 설정되어 있는 폰트가 없을 경우에는 대체 폰트로 설정되어버립니다.
모든 사용자에게 같은 폰트를 제공하고 싶다면 운영체제에 설치된 폰트 파일을 별도로 웹 전용 폰트로 변경하여 사용자에게 제공해야 합니다. 바로 이러한 기술이 웹폰트라는 기술입니다.
사실 웹폰트는 익스플로러 브라우저 계열에서만 지원하던 기술이였는데, CSS3에서 정식 속성으로 채택되면서 모든 브라우저에서도 사용할 수 있게 되었습니다.

3단계: 기본 구조와 기본 스타일 작업하기

마지막으로 기본 구조와 기본 스타일 작업을 진행해 보겠습니다. 여기서 말하는 기본 구조란 기본 HTML 문서를 만드는 작업입니다.

기본 스타일 작업은 브라우저에 기본적으로 설정되어 있는 CSS 속성값들을 초기화하는 작업, 그리고 미디어 쿼리를 작성하는 작업과 반응형 웹사이트 제작을 위한 기본 스타일 작업을 말합니다.

1. 기본 구조 작업하기

먼저 HTML 문서의 기본 틀을 만드는 기본 구조 작업을 합니다. 앞에서 준비해 둔 메인 페이지와 서브 페이지의 HTML 파일을 여세요.

편집기에서 메인 페이지와 서브 페이지 각각의 HTML 파일을 열어 다음처럼 작성합니다.

메인 페이지(index.html)

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>FLAT DESIGN</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<style>

</style>
</head>
<body>
	<div id="wrap">

	</div>
</body>
</html>

서브 페이지(introduce.html, gallery.html, board.html)

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<!-- FLAT DESIGN - 플랫 디자인이란?(introduce.html 파일의 경우),
FLAT DESIGN - 갤러리(gallery.html 파일의 경우),
FLAT DESIGN - 문의 사항(board.html 파일의 경우) -->
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<style>

</style>
</head>
<body>
	<div id="wrap">

	</div>
</body>
</html>

2. CSS 초기화 작업하기

다음은 브라우저마다 설정되어 있는 CSS 속성값들을 초기화하는 작업입니다. 브라우저마다 CSS 속성값이 설정되어 있어 우리가 설정한 스타일이 정상적으로 적용되지 않을 수도 있으므로 웹사이트를 제작하기 전에 반드시 CSS 초기화 작업을 해줘야 합니다.

먼저 편집기를 실행시켜 새로운 문서를 생성한 후 다음처럼 CSS 초기화 코드를 작성합니다.

@charset utf-8;

/* CSS 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* 모든 태그를 기본값으로 초기화합니다. */

body{
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
background:url(../images/s_images/body_bg.png);
line-height:1;
}
/* <body> 태그에 폰트 속성과 배경 속성 그리고 글자 행간 속성을 설정합니다. */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ 
display:block;
}
/* HTML5 태그들이 정상적으로 작동하도록 display 속성의 값을 block으로 설정합니다. */

nav ul, li{
list-style:none;
}
/* <ul> 태그와 <li> 태그의 목록 스타일을 초기화합니다. */

a{
margin:0;
padding:0;
font-size:100%;
text-decoration:none;
vertical-align:baseline;
color:#fff;
background:transparent;
}
/* <a> 태그를 기본값으로 초기화합니다. */

img{
vertical-align:top;
}
/* <img> 태그의 간격을 없애기 위해 vertical-align 속성값을 top으로 설정합니다. */

table{
border-collapse:collapse;
border-spacing:0;
}
/* <table> 태그의 간격을 없애기 위해 간격값을 기본값으로 설정합니다. */

input{
margin:0;
padding:0;
box-sizing:content-box;
vertical-align:top;
appearance:none;
border:1px solid #e65d5d;
color:#e65d5d;
border-radius:0; 
font-family:NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
}

input::-moz-input-placeholder{
color:#e65d5d;
}

input::-webkit-input-placeholder {
color:#e65d5d;
}
/* <input> 태그를 기본값으로 초기화합니다. */

그런 다음 웹폰트를 사용하기 위해 아래에 웹폰트 속성도 같이 추가합니다.

/* 웹폰트 CSS */
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.eot)}
@font-face{font-family:'Nanum Gothic'; src:url(webfont/NanumGothic.woff)}

작성한 문서는 미리 만들어 둔 css 폴더에 reset.css라는 이름으로 저장합니다. 그리고 메인 페이지와 서브 페이지 각각의 HTML 파일을 열어 미리 작성해 둔 스타일 연결 태그에 reset.css 파일을 연결합니다.

<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
</head>

3. 미디어 쿼리 작성하기

이번에는 해상도별로 웹사이트 구조를 변경하기 위해 미디어 쿼리를 작성합니다.

단, 모바일용 미디어 쿼리는 별도로 작성하지 않습니다. 만약 웹사이트에 모바일용 미디어 쿼리 조건문을 320px 이상이라고 작성하면 320px 이하의 해상도인 기기로 웹사이트를 접속할 경우 조건문 때문에 웹사이트의 구조가 전부 엉망이 되어버리기 때문입니다.

따라서 반응형 웹을 제작할 때는 모바일용 미디어 쿼리는 별도로 작성하지 않은 상태로 모바일용에 적용될 구조 CSS 코드와 모든 해상도에서 공통적으로 적용될 CSS 코드를 함께 작성합니다.

(미디어 쿼리를 작성할 때는 기기별로 구분 주석문을 작성해 주는 것이 좋습니다.)

먼제 메인 페이지와 서브 페이지의 HTML 파일을 열어 다음처럼 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
}
...
/* PC용 CSS */
@media all and (min-width:960px){
...
}
</style>

다만 요즘에는 기기가 너무 다양하게 출시되기 때문에 사실상 모든 기기의 해상도에 맞춰 반응형 웹을 제작하기가 힘듭니다. 그래서 모바일용과 태블릿용 그리고 PC용 이렇게 세 가지의 해상도를 기준으로 반응형 웹을 제작합니다.

모바일용 - 320px
태블릿용 - 768px
PC용 - 960px 또는 1024px

※ 반응형 웹은 '기기의 크기'에 맞춰 제작해야 하나요?
과연 기기의 크기에 맞춰 반응형 웹을 제작하는게 맞을까요? 반응형 웹을 제작할 때는 단순히 기기의 크기에 맞춰 반응형 웹을 제작하기보다는 브라우저의 크기를 줄였을 때 '문제가 될 수 있는 해상도 크기'를 고려해야 합니다.
자신이 제작하는 반응형 웹사이트가 어떤 해상도에서 문제를 일으키는지 파악하여 웹사이트를 설계하세요. 그래야 가장 최선의 방법으로 좀 더 나은 반응형 웹을 만들 수 있습니다.

4. 기본 스타일 작성하기 - 메인 페이지

이제 메인 페이지와 서브 페이지에 공통적으로 존재하는 <div> 태그와 <section> 태그에 적용할 스타일을 작성합니다. wrap이라는 <div> 태그는 모든 박스를 감싸줄 태그이고 <section> 태그는 영역을 구분해 줄 태그입니다.

먼저 메인 페이지의 HTML 파일을 열어 다음처럼 작성합니다.

<style>
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
/*모바일용 CSS에서 태그가 어떻게 보일지를 설정하는 display 속성의 값을 flex로 설정하여
모든 환경에서 플렉서블 박스로 작동하게 합니다.*/
flex-flow:column nowrap;
/*모바일 환경에서 메인 페이지 구조를 살펴보면 박스들이 세로로 한 줄씩 배치되는 걸 알 수 있습니다.
박스의 배치 방향과 여러 줄 배치를 한 번에 설정하기 위한 flex-flow 속성의 값을 column nowrap으로 설정하여
박스가 세로로 한 줄씩 배치되게 합니다.*/
width:80%; /*1*/
margin:0 auto;
max-width:1200px; /*2*/
}

#wrap section{
box-sizing:border-box;
/*박스 크기를 결정하는 방법을 변경하는 box-sizing 속성의 값을 선값과 패딩값을 너빗값에 포함하는 값인
border-box로 변경합니다.*/
}

/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 기본 CSS */
#wrap{
flex-flow:row wrap;
/*태블릿 환경과 PC 환경에서 메인 페이지의 구조를 보면 박스들이 가로로 여러 줄 배치되어 있습니다.
박스의 배치 방향과 여러 줄 배치를 한 번에 설정하기 위한 flex-flow 속성의 값을
박스를 가로로 배치하면서 여러 줄로 배치하는 값인 row wrap으로 설정합니다.*/
}
}

/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative; /*3*/
width:90%; /*4*/
}
}
</style>

① 모바일 환경과 태블릿 환경에서는 너빗값을 80%로 설정할 것이므로 너빗값을 80%로 설정합니다.

② 모든 환경에서 박스를 중앙으로 배치하기 위해 모바일용 CSS에서 마진값을 0 auto로, 최대 너빗값을 1200px로 설정합니다.

③ PC 환경에서 메인 페이지의 구조를 보면 인포메이션 영역이 화면 상단의 오른쪽에 위치해 있습니다. 인포메이션 영역이 놓일 위치의 기준을 결정하기 위해 요소의 위치를 설정하기 위한 position 속성의 값을 상대적인 위치로 만들어주는 속성인 relative로 설정합니다.

④ PC용에서는 너빗값을 90%로 설정할 것이므로 너빗값을 90%로 설정합니다.

※ 반응형 웹을 만들 때는 최대 너빗값 속성의 사용을 고려해야 합니다!
반응형 웹을 제작하다 보면 화면이 커질수록 가변적인 콘텐츠들이 비대하게 커져 보이는 문제가 생길 수 있습니다.
이럴 때는 max-width 속성을 사용해 최대 너빗값을 제한하여 콘텐츠들이 비대하게 늘어나는 것을 방지할 수 있습니다. 하지만 max-width 속성은 말 그대로 최대 너빗값을 제한하기 때문에 완벽하게 가변적인 반응형 웹을 기대하기란 힘듭니다. 이러한 문제들을 해결하기 위해서는 max-width 속성을 사용하지 않고, 미디어 쿼리를 사용해 고해상도 또는 와이드 모니터 사용자를 위한 웹사이트를 다시 설계해야 합니다. 하지만 고해상도 또는 와이드 모니터 사용자를 지원하기 위해 시간, 인력, 비용을 들여 웹사이트를 다시 설계한다는 것은 현실적으로 쉽지 않은 일이죠.
물론 앞으로는 기기의 해상도가 고해상도로 향상되고 대형 모니터를 사용하는 경우도 많아질 것이므로 시간, 인력, 비용이 문제가 되지 않는다면 언제 어떤 환경에서 방문할지 모르는 사용자를 위해 반드시 고해상도 또는 와이드 모니터를 위한 작업을 해두는 것이 좋습니다.

5. 기본 스타일 작성하기 - 서브페이지

서브 페이지는 한 군데만 빼고 메인 페이지의 스타일과 같습니다. 메인 페이지에서 작성해 놓은 기본 스타일을 그대로 복사한 후에 수정 작업을 하면 됩니다. 먼저 각 서브 페이지의 HTML 파일을 열어 다음처럼 작성합니다.

<style>
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}

#wrap section{
box-sizing:border-box;
}

/* 태블릿용 CSS */
@media all and (min-width:768px){
}

/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
}
</style>

이렇게 해서 반응형 웹사이트를 제작하기 위한 준비 작업을 마쳤습니다. 06장부터는 본격적으로 메인 페이지에서부터 서브 페이지까지 순서대로 반응형 웹사이트의 구조 작업과 스타일 작업을 진행할 것입니다.

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

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

Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기1) (1)	2022.12.04
Chapter 06 메인 페이지 작업하기_1(메인 페이지 구조 작업하기) (0)	2022.12.04
Chapter 04 새로운 웹 기술, 플렉서블 박스_3(플렉서블 박스 이용해 목업 웹사이트 만들기) (1)	2022.12.01
Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2) (0)	2022.12.01
Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1) (0)	2022.12.01

ABOUT ME

's IT STORY 's IT STORY

웹사이트 구조 다지기

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

티스토리툴바

ABOUT ME

웹사이트 구조 다지기

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

관련글 관련글 더보기

티스토리툴바