반응형 웹 디자인
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 73
Review
드디어 반응형을 배우다니...
포트폴리오를 그동안 거의 HTML과 CSS로만 만들어서 큰일이다.
수정 작업도 들어가야하고, 김버그님의 유튜브를 봤는데 포트폴리오를 만들 때
데스크톱 버전, 태블릿 버전, 모바일 버전 3가지로 만드는 것이 좋다고 한다.
그게 당연한 일이지만... 밤을 새서라도 만들어야지 휴우
이 힘든 것들이 나는 너무 재밌다.
재밌어서 다행이지 뭐. 비전공자니까 남들보다 훨씬 더 열심히 해야한다는 것을
알고 있다. 빨리 포트폴리오 완성해서 배포하고 싶당
파이팅 !
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 73
<반응형 웹이란?>
디스플레이(기기) 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지를 의미 한다.
HTML5 시대가 도래됨에 따라 기능 완성 형태의 새로운 마크업 언어의 등장으로 스마트한 웹 페이지
구현이 가능하다.
<왜 반응형 웹인가?>
1. 유지보수가 간편하다 !
: 모바일 버전과 데스크톱 버전 같이 2개의 웹사이트를 만들게 되면, 수정 시에도 2번 작업을 해야한다.
하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML과 CSS
파일에서 작업하기 때문에 유지보수가 간편하다.
2. 마케팅에 유리하다 !
: 반응형 웹이라는 기술을 이용하여 마케팅 웹사이트를 개발하면 환경이나 기기에 따라 최적화 된
구조로 웹사이트를 변경하여 보여줄 수 있기 때문에 전달하고자 하는 내용을 확실하게 전달할 수 있다.
그리고 두가지 버전의 웹사이트를 만들지않아도 되기 때문에 비용 측면에서도 상당한 절감 효과가 있다.
3. 검색 엔진 최적화가 가능하다!
: 검색 엔진 최적화란 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는
웹사이트 검색 결과의 상위 노출을 뜻한다.
만약 모바일 버전 PC 버전 같이 2개의 웹사이트가 있으면 주소가 2개이기 때문에 검색 결과에서
상위권에 배치되기 어렵다. 하지만 반응형 웹은 1개의 주소와 1개 파일(HTML)만 있어 검색 결과에 잘
노출될 수 있다.
4. 미래지향적 기술이다 !
: 시대가 변할수록 기기가 다양해지고, 고정 형태의 웹 사이트는 잘려서 보이는 문제가 발생한다.
하지만 반응형 웹은 웹 사이트의 구조를 환경에 따라 최적화 된 구조로 바꾼 웹 사이트를 보여준다.
앞으로 어떤 화면의 기기가 나올지 모르는 상황에서 반응형 웹은 웹 기술 중 가장 미래지향적이다.
<사례로 알아보는 반응형 웹>
1. 해외 반응형 웹 사례 – 보스턴글로브 The Boston Globe
The Boston Globe
New England’s best source for news, sports, opinion and entertainment. The Globe brings you breaking news, Spotlight Team investigations, year-round coverage of the Red Sox, Patriots, Celtics and Bruins, sharp editorials, stunning photography, and engagi
www.bostonglobe.com
: 신문사 웹 사이트는 내용이 많고 복잡해 디자인 설계가 어려워서 고정 크기로 웹 사이트를 제작하는
경우가 많다. 하지만 보스턴글로브는 반응형 웹 사이트로 개발하여 흰 바탕에 글자 위주로 디자인하고
각 영역을 회색의 선으로만 구분하여 간단한 디자인으로 구성되어 있다.
2. 국내 반응형 웹 사례
1) 중앙그룹 중앙그룹 (joonganggroup.com)
중앙그룹
세상과 당신 사이, 중앙그룹이 있습니다 중앙그룹이 있습니다
www.joonganggroup.com
: 와이드한 이미지와 블랙앤화이트 계열로 깔끔하게 구성하여 주목성, 디자인, 기획력까지 돋보이는
디자인이다. 다양한 인터랙션으로 사용자에게 신선한 경험을 제공한다.
화면이 작아지면 기존의 메뉴 영역을 감추고 다양한 토글 버튼을 제공하여 사용자 편리성을 강조하
하는 것이 돋보인다.
개인적으로 나는 중앙그룹의 웹 페이지 디자인이 굉장히 마음에 들었다.
2) 라한호텔 라한호텔 LAHAN HOTELS
라한호텔 LAHAN HOTELS
DELIGHTFUL STAY 라한에서의 모든 순간은 즐거운 기억이 됩니다.
www.lahanhotels.com
: 숙박업의 특성상 자칫 복잡해지기 쉬운 예약 사이트의 이미지와 정보를 효과적으로 전달해주는
반응형 웹으로 제작했다. 화면 크기를 작거나 크게 변경해도 사용자가 이질감을 느끼지 않도록 최대한
같은 환경을 보여주고 깔끔한 버튼 배치와 토글 버튼 등을 제공하고 있다.
<반응형 웹 제작의 핵심 기술>
1. 가변 그리드
: 픽셀의 한계를 대신하여 적용한다.
가변 그리드는 웹 사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수
있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술이다.
* 가변이란?
: 어떠한 객체 / 물체 또는 사물이 늘어나거나 줄어 들거나 성질이 변하는 것.
2. 미디어 쿼리(Media Queries)
: 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술이다.
컴퓨터나 기기에게 ‘너는 어떤 종류의 미디어니?’ 또는 ‘미디어의 화 면크기는 어느정도나 되니?’
라고 미디어에게 질문하고 감지한 후 웹사이트를 변경하는 기술이다.
CSS3의 속성 중 하나이고, 미디어 쿼리를 사용해 적용 스타일을 기기마다(화면 크기마다) 전환
시킬 수 있다. 컴퓨터나 기기의 환경 또는 종류를 알아야 그 기기에 맞게 웹사이트의 구조를 바꿀
수 있기 때문에 반응형 웹을 제작할 때 반드시 필요하다.
[only 또는 not] @media [미디어 유형] [and 또는 ,콤마] (조건문) {실행문}
3. 뷰포트(Viewport)
: 화면에 보이는 영역을 제어하는 기술로 수많은 기기의 화면크기를 감지해야 할 때 꼭 필요한
기술이다.
데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만 스마트 기기는 기본 설정값이
보이는 영역으로 지정된다.
미디어쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지할 수 없어 반응형 웹을 제작할 때는
뷰포트가 반드시 필요하다.
<모바일 환경과 해상도의 이해>
: 모바일 환경은 2000년 대 무선 인터넷폰 시절로 거슬러 올라간다.
PC 환경만큼은 아니지만 그동안 수많은 모바일 운영체제가 존재했다. 모든 운영체제를 알 필요는
없지만, 최근 스마트폰 열풍을 가지고 온 대표적인 두 주자인 iOS와 안드로이드 운영체제의 환경과
해상도는 반드시 알아야 한다.
스마트폰의 대중화로 모바일 전용 사이트가 만들어지고 있다.
각 해상도를 정확하게 이해하고 있어야만 그에 맞는 사이트를 구축할 수 있다. 매년이 아닌 매달
새로운 해상도의 신제품이 나오기 때문에 어느 해상도가 가장 우선인지는 서비스하는 목표에 따라
달라질 수 있으나, 최저 해상도는 아이폰 3GS의 320px과 갤럭시 S2의 480px을 기준으로 본다.
하지만 여기서 아주 흥미로운 사실이 있다.
디바이스의 해상도와 디바이스에 내장된 브라우저의 기본 표현 해상도가 다르다는 점이다.
아이폰 전 제품의 가로값은 320px이며, 갤럭시 S3는 360px이고, 갤럭시 노트는 400px로 보통
디바이스 해상도의 절반값을 갖고 있다.
기본적으로 해상도를 기준으로 디바이스를 구분하고 있으며, 다양한 해상도가 있지만 아래 표를
기준으로 하고 있다.
| 가로폭 | 명칭 |
| 480px | 스마트폰 |
| 800px | 태블릿 |
| 1024px | 넷북 |
| 1600px | 데스크톱 |
<미디어 쿼리의 기본 문법>
@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}
ex) @media only screen and (max-width: 786px){ width:100% }
[only 또는 not]
only 키워드는 미디어쿼리를 지원 하는 브라우저에서만 해석하게 해주는 키워드이다.
not은 다음에 오는 조건을 부정하는 키워드이다.
예를 들어 not tv일 경우 tv를 제외한 모든 미디어 유형에만 적용된다.
<CSS3의 매체 유형>
| 매체 유형 | 설명 |
| all | 모든 매체에 사용함. |
| 프린터 기기에 사용함. | |
| screen | 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함. |
| tv | 영상과 음성이 동시에 출력되는 장치 |
| projection | 프로젝터 장치 |
| handheld | 손에 들고 다니는 소형장치 |
| speech | 웹 페이지를 읽어주는 스크린 리더(screenreader) |
| aural | 음성 합성 장치(화면을 읽어 소리로 출력해주는 장치) |
| embossed | 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치) |
| tty | 디스플레이 기능이 제한된 장치 |
| braille | 점자 표시 장치 |
* handheld는 소형 기기라는 의미가 있지만 스마트 기기는 screen을 사용
<CSS3 미디어 쿼리(media query) 속성>
<미디어 쿼리 작성 시 주의사항>
1. 띄어쓰기 주의하여 입력하기
@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}
2. 조건문 접두사인 min을 사용할때는 반드시 작은 순서대로 작성 (min은 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미하기 때문에)
@media (min-width:480px){실행문}
@media (min-width:768px){실행문}
@media (min-width:1024px){실행문}
3. 조건문 접두사인 max 사용시 큰 순서대로 작성 (max는 최대 또는 그 이하라는 뜻으로, 점차 작아지 는 것을 의미하기 때문에)
@media (max-width:1200px){실행문}
@media (max-width:1024px){실행문}
@media (max-width:768px){실행문}
① 대형 해상도의 PC : 2560px * 1600px
② 와이드 해상도의 PC : 1920px * 1200px
③ 일반 해상도의 PC : 1280px * 960px
④ 낮은 해상도의 PC, 태블릿 : 1024px * 768px
⑤ 모바일 가로, 태블릿 : 480px ~ 767px
⑥ 모바일 : ~ 480p
<뷰포트 속성>
* minimum-scale과 maximum-scale 속성은 각각 값을 1.0으로 지정할 경우 user-scalable을 ‘yes’로 지정하더라도
사용자가 화면을 확대하거나 축소할 수 없음.
<반응형 웹 디자인을 위한 기본 설정>
: 기기의 가로 해상도 상황별로 총 6가지 디자인으로 이뤄져 있다.
각 해상도에 따라 변경되는 콘텐츠의 레이아웃과 노출 여부를 체크해야 한다.
① 대형모니터
② 와이드 모니터
③ 일반 모니터
④ 태블릿 PC
⑤ 소형 태블릿 PC
⑥ 스마트폰
사실 3가지(PC, 태블릿, 스마트폰) 정도만 구분하면 되지만, 예제를 디자인하고 구성할 때는 좀 더
복잡하더라도 사용자가 편리하게 사용할 수 있는 사이트를 구축해야한다.
1) 유동형 패턴(Mostly Fluid)
: Mostly Fluid 패턴은 반응형 웹디자인에서 가장 많이 사용하는 패턴이다.
중대형 화면에서 중간 크기의 화면까지는 여백 정도만 조정하고, 작은 화면이 되면 그리드가 움직이며
콘텐츠를 수직으로 배치한다.
- Wide PC에서는 가변이 아닌 고정형으로 가고 이보다 작아지면 내부는 가변적으로 변하게끔 설정하는
패턴이다.
- 태블릿 PC에서는 여백을 없애고 가로가 100%인 상태로 콘텐츠를 노출한다.
- 모바일에서는 작은 크기에서 최적화하기 위해 column들을 한 개씩 세로로 정렬(vertical align) 한다.
- HTML
<div id="wrap">
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
</div>
- CSS
#wrap {
width: 100%;
margin: 0 auto;
}
#box_a {
height: 400px;
background: #ccc;
}
#box_b {
float: left;
/* float은 인라인 속성과 비슷함. float을 주면 width 값을 주는 것이 좋음 */
width: 200px;
height: 400px;
background: #ddd;
}
#box_c {
float: right;
width: calc(100% - 200px);
height: 400px;
background: #eee;
}
@media screen and (max-width: 1024px) {
#wrap {
width: 90%;
}
}
@media screen and (max-width: 768px) {
#wrap {
width: 100%;
}
}
@media screen and (max-width: 480px) {
#box_b {
float: none;
width: 100%;
}
#box_c {
float: none;
width: 100%;
}
}
2) 컬럼 드롭 패턴(Column Drop)
: Column Drop 패턴에서는 가로로 정렬(Inline align)되어 있던 요소가 해상도에 따라 세로로 정렬
되는 모습을 볼 수 있다.
- HTML
<div id="wrap">
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
</div>
- CSS
#wrap {
width: 100%;
margin: 0 auto;
}
#box_a {
float: left;
width: 30%;
height: 400px;
background: #ccc;
}
#box_b {
float: left;
width: 50%;
height: 400px;
background: #ddd;
}
#box_c {
float: right;
width: 20%;
height: 400px;
background: #eee;
}
@media screen and (max-width: 1024px) {
#box_b {
width: 70%;
}
#box_c {
clear: left;
float: none;
width: 100%;
}
}
@media screen and (max-width: 768px) {
#box_a {
float: none;
width: 100%;
}
#box_b {
float: none;
width: 100%;
}
}
3) 시프터 패턴(Shifter)
: 세로와 가로 정렬이 혼합된 모습으로 PC 웹 사이트와 모바일 웹 사이트 사이의 GNB 영역
(Global Navigation Bar : 페이지마다 항상 위치하게 되는 주메뉴 영역)의 변화가 가장 크다.
자칫하면 다른 사이트로 보일 수도 있으나, 이질감이 느끼지 않게 룩앤픽(Look & Feel)을 유지하면서
변형한 다면 오히려 사용자들에게 참신하고 좋은 느낌을 줄 수 있다.
Shifter 패턴은 Mostyle Fluid 패턴처럼 큰 화면에서는 고정 픽셀이고 작은 화면에서는 퍼센트형으로
변경되는 특징이 있다. #box_a 요소는 GNB 역할로 왼쪽에 있다가 모바일 버전으로 가면서 위로 자리를
변경하게 된다. 레이아웃을 크게 변경하면 내부에 들어가는 요소의 디자인도 많이 변경해야 하므로
번거롭고, 새롭게 디자인해야 한다는 단점이 있다.
- HTML
<div id="wrap">
<div id="box_a"></div>
<div class="right">
<div id="box_b"></div>
<div id="box_c"></div>
</div>
</div>
- CSS
#wrap {
width: 80%;
margin: 0 auto;
}
#box_a {
float: left;
width: 20%;
height: 600px;
background: #ccc;
}
.right {
float: left;
width: 80%;
}
#box_b {
height: 300px;
background: #ddd;
}
#box_c {
height: 300px;
background: #eee;
}
@media screen and (max-width: 1024px) {
#wrap {
width: 90%;
}
}
@media screen and (max-width: 768px) {
#wrap {
width: 100%;
}
#box_a {
float: none;
width: 100%;
}
.right {
float: none;
width: 100%;
}
}
@media screen and (max-width: 480px) {
#box_c {
display: none;
}
}
4) 작은 리스트 패턴(Tiny Tweaks)
: PC부터 모바일까지 모두 같은 형태로 디자인하는 방식으로, 간단한 사이트 또는 리스트 형태로
꾸며진 사이트에 사용할 패턴으로 적합하다.
Tiny 패턴은 PC 버전부터 모바일까지 같은 형태로 작아지기만 하는 레이아웃이므로 자칫하면 꽤
지루하게 보일 가능성이 높다. 따라서 내부에 있는 리스트를 변경함으로써 지루함을 없애는 게
이 패턴의 노하우이다.
예시로 만든 코드 역시 내부의 리스트가 가로 5개에서 4개, 3개, 2개 로 점차 줄어들게 했다.
우선 ul, li 요소로 리스트를 구성했으면 ul 요소는 width 값을 80%로 설정하고 가운데 정렬을 했다.
지금부터가 중요한 부분이다.
우서 내부에 들어가는 li 요소를 가로로 배치하기 위해 float 속성 을 left로 설정했다.
이렇게 하면 한 줄에 몇 개의 li 요소가 노출되는가는 li 요소의 width 값 에 따라 달라진다.
li 요소의 width 속성의 합이 ul 요소의 width 값보다 커지면 자동으로 줄바꿈 되어서 나열되기 때문이다.
정확히 4개만 노출되기를 바란다면 margin 값까지 고려해서 계산해야 한다.
① 5개 노출되는 wide PC의 경우
(100%-10%) / 5 = 18%;
100% : li 요소를 감싼 ul 요소의 너비
10% : 각 li 요소의 margin 값의 합
5 : li 요소의 개수
② max-width: 1024px
(100%-8%) / 4 = 23%;
③ max-width: 800px
(100%-6%) / 3 = 31.333 ...%;
④ max-width:480px
(100% - 4%) / 2 = 48%;
이런 식으로 반응형에 따른 리스트 개수를 조절하는 방법을 활용하면 갤러리 리스트 또는네비게이션
메뉴에서 활용할 수 있다.
- HTML
<div id="box_a">
<ul class="list_man">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</div>
- CSS
@font-face {
font-family: pretendard;
src: url(../fontawesome-free-6.2.0-web/webfonts/Pretendard-Regular.woff)
format("woff");
}
* {
margin: 0;
padding: 0;
font-family: pretendard, sans-serif;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#box_a {
height: 400px;
background: #ccc;
}
.list_man {
width: 80%;
margin: 0 auto;
}
.list_man li {
margin: 1;
width: 18%;
float: left;
background: #fff;
border: 1px solid #000;
text-align: center;
}
@media screen and (max-width: 1024px) {
.list_man {
width: 95%;
}
.list_man li {
width: 23%;
/* margin 포함해서 4개로 만드는 것 */
}
}
@media screen and (max-width: 768px) {
.list_man li {
width: 31.333%;
/* margin 포함해서 3개로 만드는 것 */
}
}
@media screen and (max-width: 480px) {
.list_man li {
width: 48%;
/* margin 포함해서 2개로 만드는 것 */
}
}
5) 오프 캔버스 패턴(Off Canvas)
: PC 웹 사이트를 모바일 디바이스로 가져오면서 콘텐츠의 크기와 양을 줄이지 않는 새로운 방법으로,
일부 영역을 숨겨서 사용자의 제스쳐 혹은 액션에 따라 숨겨뒀던 영역을 보여주는 방식이다.
작은 디바이스에서 많은 것을 보여주는 방법보다 더 편한 UX를 적용해 사용하며 페이스북 모바일
웹, 앱 등에서 많이 사용하고 있는 패턴이다.
오프 캔버스 패턴은 단순하게 HTML과 CSS로 이뤄지는 경우는 없다. 대부분 자바스크립트와 제이쿼리
등을 이용해 작업한다.
max-width 800px 영역에서 각 부분의 width 값의 합은 절대로 100%가 될 수가 없으며,
이는 UI 개발을 하는 이에게 피로를 주는 주범 중 하나이다.
그러므로 간단하게는 세 개 중 한 개를 33.333%로 설정해 해결할 수 있다.
- HTML
<div id="wrap">
<div id="wrap_box">
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
</div>
</div>
- CSS
#wrap {
position: relative;
width: 80%;
max-width: 1280px;
margin: 0 auto;
}
#wrap_box {
width: 100%;
}
#box_a {
float: left;
width: 30%;
height: 400px;
background: #ccc;
}
#box_b {
float: left;
width: 40%;
height: 400px;
background: #ddd;
}
#box_c {
float: left;
width: 30%;
height: 400px;
background: #eee;
}
@media screen and (max-width: 1024px) {
#wrap {
width: 100%;
}
}
@media screen and (max-width: 768px) {
#wrap_box {
max-width: 150%;
}
#box_a {
width: 33.333%;
}
#box_b {
width: 33.333%;
}
#box_c {
width: 33.333%;
}
}
@media screen and (max-width: 480px) {
#wrap_box {
max-width: 300%;
margin-left: -100%;
}
}
<고정 가변 영역에 대한 이해>
1. 첫 번째 예제
- HTML
<div id="wrap">
<div class="main">
main 영역
main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역
</div>
<div class="side">side 영역</div>
</div>
- CSS
#wrap {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.main {
float: left;
background: #ccc;
margin-right: 300px;
}
.side {
position: absolute;
top: 0;
right: 0;
background: #ddd;
width: 300px;
}
2. 두 번째 예제
- HTML
<div id="wrap">
<div class="main">
main 영역
main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역
</div>
<div class="side">side 영역</div>
</div>
- CSS
#wrap {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.main {
float: left;
background: #ccc;
width: calc(100% - 300px);
}
.side {
position: absolute;
top: 0;
right: 0;
width: 300px;
background: #ddd;
}
3. 세 번째 예제
- HTML
<div id="wrap">
<div class="main">
main 영역
main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역main영역
</div>
<div class="side">side 영역</div>
</div>
- CSS
#wrap {
display: table;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.main {
display: table-cell;
background: #ccc;
}
.side {
display: table-cell;
width: 300px;
background: #eee;
}
4. 네 번째 예제
- HTML
<div id="wrap">
<div class="side">side영역</div>
<div class="main">main영역</div>
<div class="side">side영역</div>
</div>
- CSS
#wrap {
display: table;
width: 100%;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.main {
background: #ccc;
display: table-cell;
height: 300px;
}
.side {
display: table-cell;
width: 300px;
height: 200px;
background: #ddd;
}
5. 다섯 번째 예제
- HTML
<div id="wrap">
<div id="left">
<h1>
좌측 프레임 <br />
고정 레이아웃
</h1>
<br />
<p>웹 표준 실무 강의</p>
</div>
<div id="main">
<div class="top"><h1>상단 프레임 레이아웃</h1></div>
<div class="content">
<h1>Content (유동 레이아웃)</h1>
<br />
<p>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing
packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web
sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour
and the like).
</p>
</div>
</div>
</div>
- CSS
#wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
text-align: center;
}
#left {
float: left;
width: 300px;
height: 100vh;
background: #ccc;
}
#main {
float: left;
width: calc(100% - 300px);
box-sizing: border-box;
background: #eee;
}
.top {
padding: 20px;
}
.content {
background: #fff;
padding: 20px;
}