모던 웹사이트 디자인의 정석: HTML5 & CSS3로 만들고 반응형 웹 디자인까지...

모던 웹사이트 디자인의 정석:

HTML5 & CSS3로 만들고

반응형 웹 디자인까지 고려한

책2.indb 1 2015-11-30 오전 10:18:21

IV

한빛미디어에서 『모던 웹 디자인을 위한 HTML5 + CSS3 입문』을 집필한 뒤에 메일로 다양

한 질문이 왔었습니다. 대부분 “레이아웃을 만드는 연습을 더 하고 싶고, 참고할 만한 것 있

나요?”라는 것이었습니다. 처음에는 “웹 사이트를 요소 검사로 분석해 보세요”라고 답변을

드리다가 초보자에게는 사실 그것도 꽤 어렵겠다고 생각해서 중간부터는 “일본에 이런 책이

있는데 예제는 무료로 내려받을 수 있거든요. 예제 파일만 보셔도 어느 정도 도움될 것 같아

요”라고 추천하던 책이 바로 이 책입니다.

원래 다른 출판사에서 이 책의 번역을 의뢰받았었습니다. 자주 언급하던 좋은 책을 번역한

다는 생각에 잠을 못 이뤘는데요. 며칠 후 다른 곳에서 판권을 먼저 가져가게 됐다고 죄송하

다는 메일이 왔습니다(그래서 잠을 또 못 이룸). 그런데 며칠 후 위키북스에서 메일이 와서

이 책의 번역을 의뢰해주시더군요. 나름 인연이 있는 책인 것 같습니다.

이 책은 HTML5와 CSS3를 이용해 간단한 웹 페이지의 레이아웃을 만드는 방법을 다룹니

다. 총 6개의 장으로 구성돼 있는데요. 1장에서는 레이아웃을 만드는 기본적인 테크닉을 알

아보고, 2장에서는 예제에서 사용할 요소를 마크업하고, 3장부터 6장까지에 걸쳐 예제를 만

들어보며 실습합니다. 쓸데없이 페이지를 많이 낭비한다는 느낌이 들 정도로 자세하게 다루

는데요. 레이아웃 만들기에 익숙하지 않은 분이라면 친절하다고 느낄 수 있을 것입니다.

이 책의 대상 독자는 HTML5와 CSS3의 기본을 알고 있는 분입니다. 따라서 두 가지를 전혀

모른다면 읽어 나갈 수 없습니다. 너무 깊이 알 필요는 없답니다. HTML5와 CSS3에서 새로

추가된 기능 가운데 책에서 사용하는 내용(반응형 웹 디자인 등)은 추가적인 설명으로 다룹

니다.

책을 진행할 수 있게 도와주신 위키북스와 책의 편집을 맡아주신 이대엽 님께 감사의 말씀

을 드립니다. 번역 워드 파일을 보내고 ‘이제 1주일 정도는 쉴 수 있겠구나’라고 생각했는데,

바로 다음 날 피드백이 와서 조금 놀랐었습니다. 그래서 저도 열심히, 빠르게 일을 진행해서

재미있게 일할 수 있었습니다.

역자 서문

모던 웹사이트 디자인의 정석

V

모던 웹사이트 디자인의 정석

들어가며

이 책은 『HTML5 & CSS3 레슨 북』을 읽은 독자 또는 HTML5/CSS3에 대한 기초 지식이 있

는 독자를 대상으로 합니다. 기본적인 HTML5/CSS3를 더 발전시켜 다양한 형태의 레이아

웃을 가진 웹 페이지를 만드는 방법을 알아보는 책입니다.

기존에는 2단 또는 3단으로 화면을 구분하는 레이아웃 패턴을 만드는 방법만 알아도 충분했

습니다. 하지만 이제는 반응형 웹 디자인도 고려하고, 스마트폰 또는 태블릿이라는 다양한

장치를 지원하는 레이아웃을 만들 수 있어야 합니다.

이 책에서는 기본적인 단 구조의 웹 페이지를 만드는 방법부터 반응형 웹 디자인까지, 레이

아웃의 기본이 되는 “박스 정렬”을 중심으로 자세히 설명합니다. 레이아웃을 만들 때 이 정

도의 내용만 기억해둔다면 문제 없을 것입니다.

이 책이 웹 페이지 레이아웃을 만드는 데 도움이 될 수 있다면 좋겠습니다.

10

이 책의 구성 4

이 책의 예제 8

페이지 구성 9

1-1 웹 페이지의 단 구조 18

단 구조 18

웹 페이지에서의 단 구조 19

웹 페이지 레이아웃의 발전 20

CSS3로 구현하는 단 구조 21

1-2 박스 가로 정렬 22

박스 가로 정렬 23

가로 정렬할 대상 변경 26

가로 정렬할 박스의 개수 변경 28

clearfix 구조 29

1-3 박스 분할 32

박스 분할 32

분할하고 싶은 만큼 박스 개수를 추가 33

1-4 박스의 너비를 지정 34

박스의 너비를 지정 34

너비의 합이 100%를 넘는 경우 36

칼럼 탈락을 사용할 때의 주의 사항 38

한쪽 박스의 너비를 픽셀로 고정 40

웹 페이지의

단 구조

01장

목차

11

1-5 박스 정렬 순서 지정 44

박스 정렬 순서 지정 44

1-6 반응형 웹 디자인과 관련된 설정 46

반응형 웹 디자인의 기본 46

반응형 웹 디자인 응용 48

주요 스마트폰 또는 태블릿의

브라우저 화면 크기 52

중간 단계를 추가 53

반응형 웹 디자인에서 중복된 설정을

하나로 합치기 56

중간 단계를 칼럼 탈락으로 구현 57

박스를 겹쳐 올리는 레이아웃 58

2-1 요소 준비 62

2-1-1 사이트 이름 63

2-1-2 기사 65

2-1-3 메뉴(세로 정렬) 67

2-1-4 메뉴(가로 정렬) 69

2-1-5 저작권 71

2-2 웹 페이지 준비 72

DOCTYPE 선언 73

언어 종류 73

<head> 태그와 <body> 태그 73

웹 페이지 제작 준비

02장

목차

12

HTML 파일 인코딩 73

페이지 제목 74

뷰 포트 74

스타일시트 적용 74

스타일시트 파일의 인코딩 75

한국어 폰트 75

뷰 포트 설정과 웹 페이지 출력 76

3-1 레이아웃 기본 구조 만들기 80

박스 준비 81

박스를 가로 정렬 82

반응형 웹 디자인 설정 83

3-2 박스 내부에 요소 추가 84

사이트 이름 85

내비게이션 86

기사 87

사이드 메뉴 88

저작권 92

본문 내부의 그림 93

출력 확인 94

다양한 너비의 브라우저 화면에서 출력 확인 95

3-3 레이아웃 조정 96

박스를 바 형태로 디자인 97

박스 사이에 구분선 삽입 98

블로그/뉴스 스타일

사이트의콘텐츠 페이지

03장

목차

13

목차

요소의 간격을 조정(세로 방향) 99

요소의 간격을 조정(가로 방향) 100

3-4 반응형 웹 디자인과 관련된 조정 102

3-4-1 조정에 필요한 @media 설정을 추가 104

3-4-2 내비게이션 메뉴를 간소화 105

3-4-3 사이트 이름과 기사 제목을 간소화 107

3-4-4 서브 메뉴를 2단 구조로 변경 110

3-4-5 레이아웃 전체의 너비를 고정 113

3-5 요소 추가와 수정 114

3-5-1 웹 폰트로 사이트 이름 출력 115

Google Fonts의 웹 폰트 사용법 117

3-5-2 기사의 작성일에 아이콘을 붙여 출력 118

Font Awesome 121

3-5-3 기사 분류를 라벨의 형태로 출력 122

3-5-4 기사에 소제목을 추가 127

3-5-5 메뉴에 리스트 마크 추가 130

3-5-6 메뉴에 섬네일 그림 추가 132

3-5-7 섬네일 그림에 글자가 겹쳐진 메뉴 138

3-5-8 플랫 디자인의 SNS 공유 버튼 추가 144

공유 버튼 설정 152

3-5-9 관련 기사 메뉴 추가 154

3-6 내비게이션 바와 푸터가 화면의 너비를

꽉 채우도록 디자인 162

14

4-1 최상위 페이지 작성 170

최상위 페이지 작성 171

개요를 추가 172

“계속 읽기” 버튼 추가 176

개요를 더 추가하고 2개씩 가로로 정렬 178


4-2-1 페이지네이션 추가 185

4-2-2 원형 배지 추가 189

클래스 이름 변경과 마크업 조정 196

5-1 레이아웃 기본 구조 생성 200

박스 준비 201

박스를 가로로 정렬 202

반응형 웹 디자인과 관련된 설정 203

5-2 박스 내부에 요소를 추가 204

사이트 이름 205

내비게이션 206

헤더 그림 207

공지사항 208

저작권 210

출력 확인 211

블로그/뉴스 스타일의

최상위 페이지

04장

비즈니스 스타일

사이트의 최상위 페이지

05장

목차

15

목차

5-3 레이아웃 조정 212

내비게이션 메뉴를 오른쪽에 붙여 출력 213

헤더 그림을 화면에 꽉 차게 출력 215

푸터를 바의 형태로 수정 217

요소의 간격 조정(세로 방향) 218

각 박스에 배경색을 넣어 디자인 219

5-4 반응형 웹 디자인과 관련된 조정 220

5-4-1 조정에 필요한 @media 설정을 추가 222

5-4-2 내비게이션 메뉴를 간소화 223

5-4-3 날짜 아래에 글자가 파고들지 않게 수정 225

5-4-4 레이아웃 전체의 너비 고정 228

큰 화면에서도 헤더 그림을 너비를 꽉 채워

출력하는 경우 231

5-5 요소의 추가와 수정 232

5-5-1 사이트 이름을 그림으로 출력 233

5-5-2 사이트 이름을 나타내는 그림의 해상도를 높임 234

5-5-3 요소를 테두리로 감싸 디자인 237

5-5-4 SNS 메뉴 추가 238

5-5-5 말풍선 형태로 추가 설명 248

5-5-6 콘텐츠 개요 추가 252

padding 속성을 이용한 개요의 간격 조정 263

5-5-7 헤더 그림에 캐치 카피 올리기 264

16

5-6 내비게이션 메뉴를 토글 형태로 268

메뉴를 세로로 정렬 270

토글 버튼 생성 273

토글 버튼의 디자인과 위치 조정 276

클래스 이름 변경 또는 마크업 조정 282

6-1 콘텐츠 페이지 작성 286

콘텐츠 페이지 작성 287

기사의 레이아웃 구성 288

사이드 메뉴의 레이아웃 구성 292


6-2-1 기사의 디자인을 조정 297

6-2-2 빵 부스러기 리스트 추가 302

6-2-3 메뉴를 테두리로 감싸서 디자인 306

멀티 칼럼 기능을 이용한 단락 만들기 311

인터넷 익스플로러 8 지원 312

칼럼 및 요소 색인 314

비즈니스 사이트

스타일의 콘텐츠 페이지

06장

부록

목차

웹 페이지의 단 구조

1CHAPTER

1웹

페이지의

단

구조

18

1장 웹 페이지의 단 구조


“단 구조”라고 하는 것은 현대 페이지 레이아웃의 기본입니다. 여기서 “단”이란 원래 인쇄 매체에서의

“단”과는 조금 다른 개념입니다.

1-1


단 구조

“단 구조”란 글자 또는 그림을 여러 개의 단으로 나누는 레이아웃을 의미합니다.

1개의 단으로 콘텐츠를 배치하면 글자 수가 많을 때 읽기 힘들어지는 경우가 있습니다. 이럴

때는 콘텐츠를 2단 또는 3단으로 나누어 배치하면 쉽게 읽을 수 있게 됩니다. 따라서 신문

또는 잡지 등 다양한 매체에서 사용되고 있습니다.

1단 구조 2단 구조 3단 구조

1장

1웹

페이지의

단

구조

19

1-1 웹 페이지의 단 구조

웹 페이지에서의 단 구조

웹 페이지는 글자를 출력할 때 기본적으로 브라우저 화면의 너비에 맞춰 글자를 출력합니

다. 따라서 브라우저 화면의 너비가 커지면 한 줄에 더 많은 글자가 들어가게 되어 읽기 힘

들어집니다. 그래서 웹 페이지도 일반적인 인쇄 매체처럼 단 구조를 사용하려는 움직임이

나타납니다.

하지만 웹 페이지를 구성하는 HTML과 CSS에는 단을 나누는 기능이 없습니다.

하지만 여러 개의 박스를 가로로 나열하고, 박스 내부에 글자 또는 그림을 넣으면 단 구조처

럼 보이게 만들 수 있습니다.

웹 페이지의 기본 레이아웃입니다.

브라우저 화면 너비에 맞춰 글자를

출력합니다.

웹 페이지 내부에 가로로 박스를 배치 각 박스에 글자 또는 그림을 삽입

1웹

페이지의

단

구조

20


웹 페이지 레이아웃의 발전

원래는 이렇게 단을 나누고자 사용했던 상자에 글자 또는 그림뿐만 아니라 메뉴 등의 여러

요소를 넣어 웹 페이지 레이아웃을 구성하기 시작했습니다.

현대 웹 페이지는 박스를 사용해 다양한 레이아웃을 구현합니다.

따라서 페이지 레이아웃을 잡는다는 것은 “어떻게 박스를 자신이 원하는 형태로 구성할 것

인가”라고도 할 수 있습니다.

MENU

MENU

MENU

MENU

1웹

페이지의

단

구조

21

1-1 웹 페이지의 단 구조

웹 페이지를 구성하는 HTML과 CSS에는 인쇄

매체에서 사용하는 단을 만들 수 있는 기능이

원래 없었습니다. 하지만 CSS3에서는 Multi-

column Layout(멀티 칼럼) 기능이 추가되어 인

쇄 매체에서 사용하는 단 구조를 손쉽게 만들 수

있습니다.

멀티 칼럼 기능을 이용하면 1개의 박스로도 콘텐

츠를 2단 또는 3단으로 구성할 수 있습니다.

자세한 내용은 311쪽에서 살펴보겠습니다.

CSS3로 구현하는 단 구조

1웹

페이지의

단

구조

22


아무런 설정도 하지 않은 웹 페이지는 요소를 세로 정렬합니다. 따라서 요소를 가로 정렬하려면 별

도의 처리를 해야 합니다. 이번 절에서는 요소를 가로 정렬하는 방법을 살펴보겠습니다.

웹 페이지에서 연속돼 있는 박스를 가로로 정렬할 수 있습니다. 예를 들어, 4개의 박

스가 있는 웹 페이지는 다음과 같은 형태로 박스를 배치할 수 있습니다.

가로 정렬 패턴

박스 가로 정렬1-2

웹 페이지의 단 구조1장

1웹

페이지의

단

구조

23

1-2 박스 가로 정렬

박스 가로 정렬

1 박스 준비

일단 박스를 4개 준비합니다. 박스 내부에는 다양한 요소를 넣을 것이라고 생각해주세요.

박스는 일반적으로 <div> 태그를 사용해 만듭니다. 이렇게 코드를 작성하면 기본적으로 오

른쪽과 같이 박스가 세로 정렬됩니다.

가로 정렬을 하려면 스타일시트를 적용해야 하므로 각 박스에 box1, box2, box3, box4라

는 클래스를 지정했습니다. 또한 각 박스를 구분하기 쉽게 박스 내부에는 BOX1과 같은 글

자를 넣었습니다.

그럼 박스를 가로 정렬하는 방법을 살펴보겠습니다. 이

번 예제에서는 4개의 박스를 준비하고 2번째와 3번째

박스를 가로로 정렬해보겠습니다.

<div class="box1">

BOX1

</div>

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

<div class="box4">

BOX4

</div>

4개의 박스를 만들었습니다. 기본적으로는

세로 정렬됩니다.

이 책과 함께 제공되는 예제에서는 박스 구조와 관련된

이해를 돕고자 박스의 높이를 200픽셀로 조절하고 테

두리를 둘렀습니다.

이는 예제에 있는 grid-guide.css가 적용되기 때문입니

다. 자세한 사항은 예제 파일의 readme.md 파일을 참

고해 주세요.

MEMO

1웹

페이지의

단

구조

24


2 가로 정렬할 박스를 그룹화

가로로 정렬하고 싶은 박스를 <div> 태그로 그룹화합니다. 현재 예제에서는 2번째와 3번째

박스를 그룹화하겠습니다. <div class="box2">와 <div class="box3">를 <div>로 감싸줍

니다. 그룹화에 사용한 <div>에는 boxA라는 클래스를 지정하겠습니다.

3 그룹화한 박스를 가로로 정렬

그룹화한 2개의 박스를 가로로 정렬하겠습니다. <div class="box2">와 <div class=

"box3">의 float을 left로 지정합니다.

이렇게 하면 float을 지정한 박스는 자신이 가진 너비 만큼을 차지하며, 순서대로 왼쪽에 붙

어 위치를 잡습니다. 따라서 가로로 정렬되는 것이지요.

하지만 float을 지정한 박스는 플로팅 박스(floating box)라는 특수한 박스로 처리됩니다.

플로팅 박스는 다른 박스의 존재를 인식하지 못합니다. 따라서 4번째 박스가 2번째와 3번째

박스 뒤에 곧바로 붙어 출력됩니다.

<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

</div>

<div class="box4">

BOX4

</div> 2번째와 3번째 박스를 <div class="boxA">로

그룹화했습니다.

.box2 {float: left}

.box3 {float: left}

그룹화한 박스를 가로로 정렬했습니다.

1웹

페이지의

단

구조

25


4 4번째 박스가 뒤에 붙지 않게 조작

float을 지정한 박스 뒤에 4번째 박스가 곧바로 붙었는데요, 이를 떨어뜨려보겠습니다.

float을 지정한 박스를 그룹화한 <div class="boxA">에 아래와 같이 설정을 적용합니다.

이렇게 설정하면 float을 지정한 요소가 이후의 요소에 영향을 주지 않게 됩니다. 이러한

기술을 clearfix(클리어픽스)라고 하며, 레이아웃을 만드는 주요한 기술 중 하나입니다.

clearfix의 구조에 대해서는 29쪽에서 설명합니다. 이후에 해당 내용을 참고해주세요.

5 박스의 너비를 지정

박스 내부의 요소와 관계 없이 지정된 너비로 출력하게 만들겠습니다. 간단하게 박스의 너

비를 지정하기만 하면 되는데, width를 50%로 지정해 두 박스의 합이 100%가 되게 만들었

습니다.

지금까지 설명한 내용이 박스를 가로 정렬하는 가장 기본적인 방법입니다.

4번째 박스가 가로로 정렬된 박스 아래에 출력

됩니다.

.boxA:after {content: "";

display: block;

clear: both}

.box2 {float: left}

.box3 {float: left}


display: block;

clear: both}

.box2 {float: left;

width: 50%}

.box3 {float: left;

width: 50%}

4번째 박스가 가로로 정렬된 박스 아래에 출력

됩니다.

1웹

페이지의

단

구조

26


어떻게 그룹화하느냐에 따라 다음과 같은 다양한 패턴을 만들 수 있습니다.


display: block;

clear: both}

.box3 {float: left;

width: 50%}

.box4 {float: left;

width: 50%}

<div class="box1">

BOX1

</div>

<div class="box2">

BOX2

</div>

<div class="boxA">

<div class="box3">

BOX3

</div>

<div class="box4">

BOX4

</div>

</div>


display: block;

clear: both}

.box1 {float: left;

width: 50%}

.box2 {float: left;

width: 50%}

<div class="boxA">

<div class="box1">

BOX1

</div>

<div class="box2">

BOX2

</div>

</div>

<div class="box3">

BOX3

</div>

<div class="box4">

BOX4

</div>

가로 정렬할 대상 변경

1웹

페이지의

단

구조

27


모든 박스를 2개씩 그룹화하면 다음과 같은 모양도 됩니다.

<div class="boxA">

<div class="box1">

BOX1

</div>

<div class="box2">

BOX2

</div>

</div>

<div class="boxA">

<div class="box3">

BOX3

</div>

<div class="box4">

BOX4

</div>

</div>


display: block;

clear: both}

.box1 {float: left;

width: 50%}

.box2 {float: left;

width: 50%}

.box3 {float: left;

width: 50%}

.box4 {float: left;

width: 50%}

현재 예제에서는 모든 박스에 같은 float과 width 설정을

적용하고 있습니다. 이러한 경우에는 오른쪽의 코드처럼

선택자를 쉼표로 연결해서 모든 박스에 같은 설정을 적용

할 수 있습니다.

앞으로는 계속해서 각 상자마다 설정을 하나하나 변경할

것이므로 예제에서는 상자마다 하나씩 설정을 적용했습

니다.

MEMO 스타일시트 일괄 설정


display: block;

clear: both}

.box1, .box2, .box3, .box4

{float: left;

width: 50%}

1웹

페이지의

단

구조

28


가로 정렬하는 박스의 개수를 변경하고 싶으면 그룹화하는 박스의 개수를 변경합니다. 예를

들어, 3개의 박스를 가로 정렬하고 싶다면 3개의 박스를 그룹화하고 너비를 “1/3”로 지정합

니다. 다만 width를 1/3 형태로는 입력할 수 없으므로 33.3333%로 지정합니다.

마찬가지로 4개의 박스를 모두 가로 정렬하고 싶다면 전체를 그룹화하고 각 박스의 너비를

1/4 = 25%로 지정합니다.

<div class="boxA"><div class="box1">BOX1</div>

<div class="box2">BOX2</div>

<div class="box3">BOX3</div></div>



display: block;

clear: both}

.box1 {float: left;

width: 33.3333%}

.box2 {float: left;

width: 33.3333%}

.box3 {float: left;

width: 33.3333%}

.boxA:after {content: ""; display: block; clear: both}

.box1 {float: left; width: 25%}




<div class="boxA"><div class="box1">BOX1</div>



<div class="box4">BOX4</div></div>

가로 정렬할 박스의 개수 변경

1웹

페이지의

단

구조

29


clearfix(클리어픽스)는 플로팅 박스가 뒤에 있는 박스의 레이아웃에 영향을 주지 않게

만드는 기술입니다. 예를 들어, 25쪽의 4 에서는 플로팅박스(BOX2와 BOX3)의 뒤에

BOX4가 레이아웃을 무너뜨리고 들어오는 것을 막고자 사용했습니다.

그럼 clearfix를 좀 더 자세히 알아보겠습니다. 구조를 확실하게 볼 수 있게 24쪽

의 2 에서 BOX2와 BOX3를 감싸고 있는 BOX A 내부에 글자를 넣겠습니다. <div

class="boxA">의 :after의 content 속성으로 글자를 넣고 display 속성을 block으로

지정합니다. 이렇게 하면 BOX A 뒤에 글자가 삽입됩니다.

또한 박스 구조를 쉽게 확인하고자 BOX A에 하늘색 배경색과 윤곽선을 넣었습니다.

clearfix 구조

BOX A 내부에 글자를 넣었습니다.

BOX A

/* BOX A */

.boxA {border: solid 8px #00a0e9;

background-color: #a0e0fe;

color: #00a0e9}

.boxA:after {content: "BOX A 내부에 출력을 확인하기

위해 넣은 글자입니다.";

display: block}

<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

</div>

<div class="box4">

BOX4

</div>

1웹

페이지의

단

구조

30


BOX2와 BOX3를 가로 정렬했습니다. 박스 내

부의 글자는 BOX2와 BOX3를 피해 위치를 잡

습니다.

글자가 플로팅 박스 오른쪽이 아니라

아래에 출력됩니다.

/* BOX A */



color: #00a0e9}

.boxA:after {content: "BOX A 내부에 출력을

확인하기 위해 넣은 글자입니다.";

/* BOX2와 BOX3를 가로 정렬 */

.box2 {float: left}

.box3 {float: left}

/* BOX A */



color: #00a0e9}

.boxA:after {content: "BOX A 내부에 출력을

확인하기 위해 넣은 글자입니다.";

display: block;

clear: both}

/* BOX2와 BOX3를 가로 정렬 */

.box2 {float: left}

.box3 {float: left}

BOX4가 BOX2와 BOX3 뒤를 파고드는 것을 막으려면 BOX A 내부의 글자가 오른

쪽에 들어가는 것을 막으면 됩니다. 이를 위해 <div class="boxA">의 :after의 clear

속성을 both로 지정합니다. 이렇게 하면 글자가 오른쪽에 붙지 않고 플로팅 박스 아래

에 출력됩니다.

24쪽의 설정을 적용하고 BOX2와 BOX3를 가로 정렬합니다. 이렇게 하면 BOX2와

BOX3는 플로팅 박스가 됩니다. 따라서 다른 박스로부터 존재하지 않는 것으로 취급

됩니다. 결과적으로 BOX A로부터 BOX2와 BOX3가 밀려나오고, BOX4가 BOX2와

BOX3를 밀고 들어오게 됩니다.

그런데 박스 내부의 글자는 플로팅 박스와 중첩되지 않게 됩니다. 따라서 BOX A와

BOX4 내부의 글자는 BOX2와 BOX3를 피해 위치를 잡습니다.

1웹

페이지의

단

구조

31


/* BOX A */.boxA {border: solid 8px #00a0e9; background-color: #a0e0fe; color: #00a0e9}


/* BOX2와 BOX3를 가로 정렬 */.box2 {float: left}

.box3 {float: left}

/* BOX A */.boxA {border: solid 8px #00a0e9; background-color: #a0e0fe; color: #00a0e9}



.box3 {float: left}

글자를 빈 문자열로 변경했습니다.

BOX A의 스타일을 제거했습니다.

큰 따옴표(")를 2개

입력해주세요.

이제 글자가 출력되지 않게 만들어 줍시다. 글자를 빈 문자열(" ")로 만들어줍니다. 이렇게

하면 다음과 같이 BOX2와 BOX3가 BOX A 내부에 딱 맞게 들어갑니다. 또한 BOX4가 오

른쪽으로 파고들어 가는 것도 방지됩니다.

BOX A의 테두리와 배경색 설정을 제거하면 clearfix 설정이 완료됩니다. 25쪽의 4와 같은

결과가 나오는 것을 확인할 수 있습니다.

제거

clearfix 대신 BOX A에 overflow: hidden을 적용해도

BOX4가 BOX2와 BOX3를 밀고 들어오는 것을 막을 수

있습니다. overflow: hidden을 적용한 박스는 CSS의 블

록 서식 문맥(Block formatting context)으로 취급되어 박

스 내부의 플로팅 박스를 포함해 영역을 잡게 됩니다.

하지만 4장의 배지(189쪽)처럼 BOX A를 벗어나는 위치

에 자식 요소를 배치하면 삐져나오는 부분이 숨겨진다는

(hidden) 점에 주의하기 바랍니다.

MEMO overflow를 이용한 방법

/* BOX A */.boxA {overflow: hidden}


.box3 {float: left}

clearfix 대신 overflow를 사용한 경우입니다.

1웹

페이지의

단

구조

46


반응형 웹 디자인과 관련된 설정을 하면 다양한 장치에 적합한 출력 결과를 만들어낼 수 있습니다.

반응형 웹 디자인의 기본

가로 정렬을 해제한 상태의

출력 결과

가로 정렬을 했을 때의 출력 결과

박스의 가로 정렬을 해제하면 박스는 설정하기 이전과 같은 세로 정렬 상태로 돌아갑니다. 어떤 형태로

가로 정렬을 하든 가로 정렬 설정을 해제하면 세로 정렬 상태로 돌아갑니다.

이를 통해 브라우저 화면의 너비에 따라 가로 정렬을 해제하면 화면의 너비가 작을 때는 세로 정렬 상태

로, 클 때는 가로 정렬해서 출력하는 것이 가능합니다. 이처럼 웹 페이지 화면의 크기에 따라 최적화된

형태로 출력하는 것이 “반응형 웹 디자인”의 기본입니다.

반응형 웹 디자인과 관련된 설정1-6

웹 페이지의 단 구조1장

1웹

페이지의

단

구조

47

1-6 반응형 웹 디자인과 관련된 설정

실제로 브라우저 화면의 너비에 따라 가로 정렬을 해제하려면 가로 정렬과 관련된 설정

을 @media() { ~ }(미디어 쿼리)로 감싸고 해제할 너비를 지정합니다. 예를 들어, “min-

width: 768px”이라고 지정하면 브라우저 화면의 너비가 768픽셀 이상일 때는 스타일시트

가 적용되어 가로 정렬되지만 767픽셀 이하일 때는 스타일시트가 적용되지 않아 가로 정렬

이 해제됩니다.

참고로 @media()로 지정한 가로 정렬을 해제하는 지점(예제에서는 768픽셀)을 “브레이크

포인트”라고 하며, 주요 스마트폰 또는 태블릿 등의 화면 크기를 참고해서 페이지 디자인을

조정합니다. 자세한 내용은 52쪽을 참고해주세요.

이러한 내용이 반응형 웹의 기본이지만 페이지 레이아웃이 엉키면 박스의 정렬 방법, 가로

정렬 해제 순서처럼 머리를 아프게 하는 골칫거리들이 많이 생깁니다. 따라서 이어지는 내

용에서는 조금 복잡한 패턴을 살펴보겠습니다.

<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

</div>

@media (min-width: 768px) {


display: block;

clear: both}

.box2 {float: left;

width: 70%}

.box3 {float: left;

width: 30%}

}

브레이크 포인트

768px 이상767px 이하 768px

@media()를 지정했으므로 브라우저 화면의 너비에 따라 가로

정렬이 해제됩니다.

1웹

페이지의

단

구조

48


반응형 웹 디자인 응용

응용 예제로 박스 3개의 가로 정렬을 해제하는 경우를 살펴봅시다. 다음은 자주 사용되는 웹 사이트 구

조로서 가로 정렬을 해제했을 때 두 번째 위치에 오는 것이 가로 정렬을 했을 때 가운데로 오게 만들어봅

시다.


가로 정렬을 해제한 상태의 출력 결과

메인 콘텐츠

메인 콘텐츠

일단 지금까지 배운 간단한 방법을 사용하면 세로 정렬했을 때 세 번째에 위치하는 BOX3

가 중앙에 온다는 것을 알 수 있습니다.


가로 정렬을 해제한 상태의 출력 결과

목 표

1웹

페이지의

단

구조

49


<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

<div class="box4">

BOX4

</div>

</div>


display: block;

clear: both}

.box2 {float: left;

width: 20%}

.box3 {float: left;

width: 60%}

.box4 {float: left;

width: 20%}

현재 BOX2의 위치를 메뉴로 사용한다면 메뉴의 디자인을 조정해서 목표에 근접하게 만들

수 있습니다. 예를 들어, 박스의 가로 정렬이 해제됐을 때 메뉴를 간소화된 디자인으로 만들

면 두 번째에 위치하는 것처럼 만들 수 있습니다.

가로 정렬을 했을 때의 출력 결과가로 정렬을 해제한 상태의 출력 결과

MENU

하지만 이는 목표와 근접한 상태이지 목표를 달성한 것은 아닙니다. 목표를 달성하려면 머

리를 조금 더 써야 합니다.

1웹

페이지의

단

구조

50


간단한 구조에서는 BOX A로 그룹화한 BOX2~BOX4가 순서대로 가로로 정렬돼 있습

니다. 따라서 여기서 BOX2와 BOX3의 배치를 반대로 만든다면 BOX2가 중앙에 오게

만들 수 있을 것입니다.

배치를 반대로 만들려면 일단 BOX2와 BOX3를 <div> 태그로 감싸서 그룹화합니다.

이 <div> 태그의 클래스 이름은 boxB로 지정합니다. 이렇게 하면 다음과 같은 박스 구

조가 됩니다.

1

2

<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="boxB">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

</div>

<div class="box4">

BOX4

</div>

</div>

BOX B

BOX A

BOX 4

1웹

페이지의

단

구조

51


BOX A를 사용해 BOX B와 BOX4를 가로로 정렬합니다. 그러려면 26쪽의 설정을 적

용하고 너비를 조정하면 됩니다.

또한 BOX B 내부는 2개의 박스로 세로 정렬돼 있는 상태가 됩니다. 따라서 BOX B의

높이는 BOX4의 두 배가 됩니다. 이는 32쪽에서 박스를 분할할 때와 같은 형태입니다.

이제 BOX B 내부만 살펴봅시다. 목적에 따라 BOX2와 BOX3를 가로 정렬하면 되는데,

예제에서는 BOX2를 오른쪽에 붙이는 설정을 적용하겠습니다. 너비는 BOX B를 기준

으로 비율로 지정했습니다.

3

4


display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}

80% 20%

예제에서는 gr id-guide-rwd.css의 설정으로

BOX2~4의 높이가 400px로 고정됩니다. 따라서

BOX B의 높이는 BOX4의 두 배가 됩니다. grid-

guide-rwd.css 설정을 제거하면 박스 내부의 내용

물의 양에 따라 높이가 결정됩니다.

MEMO


display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}

.boxB:after {content: "";

display: block;

clear: both}

.box2 {float: right;

width: 75%}

.box3 {float: left;

width: 25%}

75%25%

1웹

페이지의

단

구조

52




display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}

브라우저 화면의 너비에 따라 가로 정렬이 해제됩니다.

브레이크 포인트

768px 이상767px 이하 768px

마지막으로 반응형 웹 디자인으로 기능하도록 가로 정렬과 관련된 설정을 47쪽의

@media () { ~ }로 감싸줍니다.

5

반응형 웹 디자인에서는 화면의 너비를 기준

으로 박스의 가로 정렬을 언제 해제할 것인지

등을 검토합니다. 이런 변화가 생기는 지점을

“브레이크 포인트(break point)”라고 합니다.

브레이크 포인트를 정할 때는 주요 스마트폰

또는 태블릿의 브라우저 화면 크기를 참고합

니다. 예를 들어, 47쪽에서는 아이패드의 768

픽셀을 브레이크 포인트로 지정했습니다.

주요 스마트폰 또는 태블릿의 브라우저 화면 크기

주요 스마트폰 또는 태블릿 브라우저 화면 크기

아이폰 4/4S 320×480

아이폰 5/5S 320×568

아이폰 6/6S(표준) 375×667

아이폰 6/6S(확대) 320×568

아이폰 6 플러스(표준) 414×736

아이폰 6 플러스(확대) 375×667

넥서스 4(4인치 안드로이드 기기의 대표적인 기종) 384×640



아이패드 768×1024


1웹

페이지의

단

구조

53


중간 단계를 추가

반응형 웹 디자인에서 중간 단계를 추가해 박스의 정렬을 3단계로 변화시켜보겠습니다. 모두 가로 정렬

을 설정하고 해제하는 것만으로 구현할 수 있습니다.

BOX B와 BOX4의 가로 정렬을

해제했을 때

BOX2와 BOX4의 가로 정렬을 해

제했을 때

중간 상태

박스를 가로 정렬했을 때

박스의 가로 정렬을

해제했을 때

1웹

페이지의

단

구조

54


예를 들어, BOX2와 BOX3의 가로 정렬을 해제한 상태는 BOX B와 BOX4의 가로 정렬 설

정만 적용하면 곧바로 구현됩니다.

반대로 BOX B와 BOX4의 가로 정렬을 해제한 상태는 BOX2와 BOX3의 가로 정렬 설정

만 적용하면 곧바로 구현됩니다.


display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

BOX2와 BOX4의 가로 정

렬을 해제한 상태

BOX B와 BOX4의 가로

정렬을 해제한 상태

<div class="box1">

BOX1

</div>

<div class="boxA">

<div class="boxB">

<div class="box2">

BOX2

</div>

<div class="box3">

BOX3

</div>

</div>

<div class="box4">

BOX4

</div>

</div>

예제에서는 grid-guid-middle.css 설정에 따라

BOX4의 높이를 조정해서 BOX B와 맞춰줬습니다.

MEMO

1웹

페이지의

단

구조

55


박스의 정렬을 3단계로 변화시키려면 52쪽의 설정에 중간 단계 설정을 추가해서 @media

() { ~ }로 감싸면 됩니다. 예제에서는 BOX B와 BOX4의 가로 정렬을 해제한 상태를 중간

상태로 추가했습니다.

또한 중간 상태는 브라우저 화면의 너비가 “600픽셀 이상 ~ 767픽셀 이하” 상태에만 적용

하고자 @media를 “(min-width: 600px) and (max-width: 767px)”로 설정했습니다.



display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}

@media (min-width: 600px) and (max-width: 767px) {


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}

브레이크 포인트 브레이크 포인트

600px 이상 ~ 767px 이하 768px 이상599px 이하 600px 768px

지금까지 박스를 가로 정렬하는 것부터 시작해서 반응형 웹 디자인을 설정하는 것까지 레이

아웃의 기본을 모두 살펴봤습니다. 복잡한 레이아웃도 이러한 방법을 이용하면 쉽게 만들

수 있을 것입니다.

실제로 페이지를 작성할 때는 세부적인 기법들도 필요합니다. 이러한 기법은 2장 이후부터

예제를 만들어보면서 살펴보겠습니다.

1웹

페이지의

단

구조

56


반응형 웹 디자인에서 중복된 설정은 하나로 합치는 것이 가능합니다.

예를 들어, 55쪽에 나온 설정의 경우 BOX2와 BOX3를 정렬하는 똑같은 설정이 2개

의 @media () { ~ }의 내부에 중복되어 작성돼 있습니다. 브라우저 화면이 600~767

픽셀일 때와 768픽셀 이상일 때 같은 설정이 들어가 있는 것이지요.

이 설정은 브라우저 화면이 600픽셀 이상일 때 적용하게 만들어도 문제 없습니다. 따

라서 오른쪽처럼 설정을 빼내서 @media (min-width: 600px) { ~ }로 감싸줍니다.

반응형 웹 디자인에서 중복된 설정을 하나로 합치기



display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}

@media (min-width: 600px) and

(max-width: 767px) {


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}



display: block;

clear: both}

.boxB {float: left;

width: 80%}

.box4 {float: left;

width: 20%}

}



display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

}

@media (min-width: 600px) and

(max-width: 767px) {

}

1웹

페이지의

단

구조

57


BOX B와 BOX4의 가로 정렬 해제는 칼럼 탈락 현상(36쪽)을 이용해서도 구현할 수

있습니다. BOX B와 BOX4의 너비를 100%로 지정하기만 하면 됩니다.

중간 단계를 칼럼 탈락으로 구현


display: block;

clear: both}

.boxB {float: left;

width: 100%}

.box4 {float: left;

width: 100%}


display: block;

clear: both}


width: 75%}

.box3 {float: left;

width: 25%}

칼럼 탈락으로 BOX B와

BOX4의 가로 정렬을 해

제한 상태

1웹

페이지의

단

구조

58


박스를 정렬하는 것뿐만 아니라 Z축 방향으로 겹쳐 올려서 출력 위치를 자유롭게 지정

하는 것도 가능합니다. 예를 들어, BOX1의 왼쪽 위에 BOX2를 겹쳐 올리고 싶을 때는

다음과 같이 설정합니다.

박스를 겹쳐 올리는 레이아웃

1 일단 BOX1과 BOX2를 BOX A(<div class="boxA">~</div>)로 그룹화합니다.

이해하기 쉽게 예제에서는 BOX A를 하늘색, BOX1을 노란색, BOX2를 분홍색으

로 설정했습니다. 또한 BOX1과 BOX2는 높이를 각각 200픽셀과 100픽셀로 설정

했습니다.

2 BOX A의 position 속성을 relative, BOX2의 position 속성을 absolute로 지

정합니다. 이렇게 하면 BOX2가 BOX A를 기준으로 출력 위치를 정하게 됩니다.

BOX A의 왼쪽 위에 BOX2를 놓고 싶다면 BOX2의 top 속성을 0, left 속성을 0으

로 지정합니다. 이렇게 하면 BOX2가 BOX A의 왼쪽 위에 겹쳐 올려지게 됩니다.

또한 position 속성을 지정함에 따라 BOX2는 자신의 내용물에 맞춰 너비를 갖게

되며, 다른 박스로부터 존재하지 않는 것처럼 취급됩니다.

/* 박스의 색과 높이 */



color: #00a0e9}

.boxA .box1 {border: solid 8px #e0e03d;

background-color: #ffffee;

color: #e0e03d;

line-height: 200px}

.boxA .box2 {border: solid 8px #eb6877;

background-color: #ffc2c9;

color: #eb6877;

line-height: 100px}

<div class="boxA">

<div class="box1">

BOX1

</div>

<div class="box2">

BOX2

</div>

</div>

BOX1과 BOX2를 BOX A로 그룹화했습니다.

1웹

페이지의

단

구조

59


3 BOX A의 위에서 30픽셀, 왼쪽에서 60픽셀 떨어진 곳에 위치를 잡게 하고 싶다면 top

속성을 30px로, left 속성을 60px로 지정합니다.

4 BOX2가 BOX A에서 벗어난 위치에 출력하게 만들 수도 있습니다. 예를 들어, top 속성

을 150px로, left 속성을 60px로 지정하면 다음과 같은 형태가 됩니다.

/*박스의 색과 높이 */

…생략…

line-height: 100px}

/* 박스를 중첩하는 설정 */

.boxA {position: relative}

.box2 {position: absolute;

top: 0;

left: 0}


…생략…

line-height: 100px}




top: 30px;

left: 60px}


…생략…

line-height: 100px}




top: 150px;

left: 60px}

BOX2가 BOX A의 왼쪽 위에 위치를 잡습니다. BOX 1

에 겹쳐 올려진 형태가 됐습니다.

BOX2가 지정된 위치에 출력됩니다.

BOX2가 BOX A로부터 벗어난 위치에 출력됐습니다.

60px

60px

30px

150px

1웹

페이지의

단

구조

60


5 출력 위치는 top, bottom, left, right 속성으로 지정할 수 있습니다. 예를 들어,

BOX A의 오른쪽 아래를 중심으로 위치를 잡고 싶다면 bottom 속성과 right 속성

으로 지정합니다.


…생략…

line-height: 100px}




bottom: 30px; right: 60px}

BOX2를 아래에서 30픽셀, 오른

쪽에서 60픽셀에 해당하는 위치

에 출력했습니다.

60px30px

지금까지 박스를 겹쳐 올리는 설정에 대해 모두 살펴봤습니다. 이후에 살펴보는 예제

에서는 그림에 배지 또는 글자를 올리는 디자인을 만들 때 사용합니다.

5장(198쪽)에서 작성하는 예제입니다. 그림에

글자를 겹쳐 올려 디자인합니다.

4장(168쪽)에서 작성하는 예제입니다. 그림에

배지를 겹쳐 올려 디자인합니다.

모던 웹사이트 디자인의 정석: HTML5 & CSS3로 만들고 반응형 웹 디자인까지...

Documents

Transcript of 모던 웹사이트 디자인의 정석: HTML5 & CSS3로 만들고 반응형 웹 디자인까지...