💛[부스트코스_웹 UI 개발] 20. 반응형 웹

👾·2021년 2월 28일

HTML & CSS

목록 보기

20/20

반응형 웹 소개

반응형 웹이란?

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지.

하이퍼텍스트 생성 언어 버전 5(HTML5) 시대가 도래됨에 따라 기능 완성 형태의 새로운 마크업 언어의 등장으로 스마트한 웹페이지 구현이 가능하다.

즉 하나의 사이트를 다양한 디바이스에서 최적화된 디자인과 레이아웃으로 이용할 수 있도록 제작된 사이트.

처음에는 pc용 사이트와 모바일용 사이트를 따로 만들어서 제공하는것이 당연시되었다. 이를 적응형 웹이라고 한다.
점점 스마트 기계가 보편화되고 스마트폰에 최적화된 사이트에 대한 needs가 발생을 하면서 두개의 사이트를 유지 보수해야되는 적응형 웹보다는 하나의 소스로 관리하고 유지보수비용이 적게드는 장점이 있는 반응형 웹 기술이 발전하게 되었다.

사용 예시

네이버 포스트 메인 페이지
네이버 오디오클립 사이트
네이버 지식인 페이지

개발자 도구에서 다양한 프리셋에서 보이는 화면을 확인할 수 있다.
실제로 보는 디바이스 화면과 차이가 있을 수 있음을 유의

반응형 웹 - 제작 가이드

PC, TABLET, MOBILE 3가지 디바이스의 크기별로 변화하는 3가지의 디자인 필요
PC를 기준으로 먼저 코딩, 태블릿과 모바일의 형태를 미디어 쿼리 기술 이용해서 적용

실제로 사용자들 대부분이 모바일을 기준으로 더 많은 사이트를 접하고 있고 굉장히 복잡한 컴포넌트들이 모바일에 배치되는게 좀 더 복잡도가 있기 때문에 모바일을 먼저 mobile first라는 기준을 잡고 기획의 구성이나 디자인, 마크업 작업을 하는것이 일반적.

PC 레이아웃

-> header의 로고와 메인메뉴가 위치
리스트는 한 라인에 다섯개씩 나오는 섬네일형 리스트
타이틀은 말줄임
하단에 footer
스타일 정보
header: 배경색 pink, 폰트 14/#fff
content: 최대 가로 길이 900px, 리스트 간격 10px, 리스트 폰트 14px/#000
footer: 배경식 #ccc, 폰트 14/#000

TABLET 가이드

header : LOGO가 가운데 들어오고 메뉴가 아래로 떨어짐
메뉴가 길어질때는 좌우로 스크롤되는 형태
이미지 섬네일이 한 라인에 4개씩
타이틀이 이미지 위로 올라가는 형태
footer의 색상 변경
스타일 정보
header: 배경색 lightseagrenn, 로고폰트 40/#fff, 메뉴폰트 25/#fff
content: 리스트 간격 8px, 리스트 배경 rgba(0,0,0,0,2), 리스트폰트 14px/#fff
footer: 배경색 lightcoral, 폰트 14/#000

모바일 가이드

메인메뉴는 햄버거 버튼을 눌러서 나오는 토글형 메뉴로 변경
리스트는 섬네일이 작아지고 텍스트가 길게 제공되는 구조
마지막에 footer
스타일 정보
header: 배경색 lightseagreen, 로고폰트 40/#fff
header GNB: 배경색 lightslategray, 폰트 25/#fff
content: 리스트 폰트 14px/#fff, 말줄임 없음
footer: 배경색 lightcoral, 폰트 14/#000

반응형 웹에서 구성할때 먼저 설정되어야 할 것
-> 변환되는 시점에 대한 사이즈 정보

주요 태그 및 속성

HTML
div, header, footer, nav, section
HTML5 태그들을 이용해서 좀 더 명확하고 시멘틱한 마크업 코드 제작
CSS
미디어 쿼리의 특성(논리연산자 이용하기)

반응형 웹 - PC용(기본) 제작

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width==device-width, initial-scale=1.0"> <!--미디어쿼리에서는 항상 뷰포트 설정 넣어줘야함-->
		<title>반응형 웹</title>
		<link rel="stylesheet" href="./reset.css"><!--초기화-->
		<link rel="stylesheet" href="./responsive.css">
	</head>
	<body>
		<div class="wrap">
			<header>
				<a href="#" class="logo"><h1>LOGO</h1></a>
                <a href="#" class="gnb_menu">gnb menu</a><!--햄버거 버튼-->
				<nav>
					<a href="#">MENU1</a>
					<a href="#">MENU2</a>
					<a href="#">MENU3</a>
					<a href="#">MENU4</a>
					<a href="#">MENU5</a>
					<a href="#">MENU6</a>
					<a href="#">MENU7</a>
					<a href="#">MENU8</a>
				</nav>
			</header>
			<section><!--콘텐츠 영역-->
				<ul class="list">
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀을 길게 써보도록 하겠습니다. 썸네일보다 길게
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
				</ul>
			</section>
			<footer>
				Copyright © NAVER Corp. All Rights Reserved.
			</footer>
		</div>
	</body>
</html>

@charset "UTF-8";
a{ /*reset*/
	text-decoration: none;
}
header{
	overflow:hidden; /*float 해제*/
	background-color: pink;
	padding: 20px;
}
.logo{
	float:left;
	font-size: 20px;
	color:#fff;
}
nav{
	float:right;
}
nav a{
	padding: 0 5px;
	font-size: 20px;
	color:#fff;
}
footer{
	height: 50px;
	line-height: 50px;
	text-align:center;
	background-color:#ccc;
	font-size: 14px;
	color:#000;
}
section{
	overflow: hidden; /*사이즈가 작아졌을때 좌우로 스크롤이 생기는것을 막아줌*/
	max-width: 900px;
	margin: 50px auto;
}
.list{
	margin: -5px; /*불필요한 간격 없앰*/
	overflow:hidden;
}
.list li{
	float:left;
	width: 20%; /*content가 1000%일때 한 줄에 썸네일 5개*/
}
.inner{
	display:block;
	margin: 5px;
	border:1px solid #000;
}
.thumb img{
	width: 100%;
	height: auto;
	vertical-align: top;
}
.title{ /*말줄임*/
	overflow:hidden;
	padding: 5px 0;
	text-align:center;
	font-size: 14px;
	color:#555;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.gnb_menu{ /*햄버거 메뉴는 모바일에서만 보이게*/
	display:none;
}

반응형 웹 - TABLET 제작

ipad 기준

@media screen and (max-width: 768px), screen and (max-height: 768px) and (orientation: landscape)  {
	header{
		background-color: lightseagreen;:
	}
	.logo{
		width: 100px;
		float: none;
		display: block; /*float정렬을 없애주면서 block요소가 풀렸으니 다시 block요소로 재선언*/
		margin: 0 auto;
		font-size: 40px;
		text-align: center;
	}
	nav{
		overflow-x: auto; /*넘치면 자동으로 스크롤 될 수 있도록*/
		overflow-y: hidden; /*위아래로 스크롤 될 일이 없으므로 막음*/
		margin-top: 20px;
		float: none; /*float 해제*/
		white-space: nowrap; /*개행되지 않게*/
	}
	nav a{
		font-size: 25px;
	}
	footer{
		background-color: lightcoral;
		color: #fff;
	}
	.list {
		margin: -4px;
	}
	.list li{
		width: 25%; /*한줄에 4개까지만*/
	}
	.inner{
		position: relative;
		margin: 4px
	}
	.title{ /*title이 섬네일 위로 올라오게*/ 
		position: absolute;
		left:0; right:0; bottom:0;
		padding: 10px 0;
		background-color: rgba(0,0,0,0.2);
		color:#fff;
	}
}

반응형 웹 - MOBILE 제작

아이폰 X 기준

@media screen and (max-width: 375px), screen and (max-height: 375px) and (orientation: landscape) {
	header{
		padding: 10px 0;
	}
	nav{
		display: none; /*메뉴 안보이게*/
		position: absolute;
		top: 60px;
		left:0;
		bottom: 0;
		z-index: 10; /*우선순위 높임*/
		width: 200px;
		margin:0; /*margin값 초기화*/
		background-color: lightslategray;
	}
	nav a{
		display: block;
		padding: 20px 10px;
		font-size: 20px;
		border-bottom: 1px solid #fff;
	}
	.gnb_menu{
		position: absolute;
		top: 12px;
		left:12px;
		display: block;
		width: 40px;
		height: 35px;
		font-size: 1px;
		color: transparent;
		background: linear-gradient(#fff 50%, transparent 50%); /*5px은 흰색, 5px은 투명하게*/
        /*좌우는 100% 꽉차게, 아래쪽으로는 10px씩만 반복되도록 설정*/
		background-size: 100% 10px;
	}
	section{
		margin: 0;
	}
	.list li {
		width: 100%;
	}
	.inner{
		display: table;
		table-layout: fixed;
		width: 100%;
		margin: 0;
		border: none;
		border-top: 1px solid #000;
	}
	.thumb{
		display: table-cell;
		width: 100px;
	}
	.title{
		display: table-cell;
        /*position 초기화*/
		position: relative;
		right:auto;
		left: auto;
		bottom: auto;
        
		vertical-align: middle;
		background-color:#fff;
		padding: 8px;
		color:#000;
        /*말줄임 해제*/
		text-overflow: inherit;
		white-space: inherit;
		text-align: left;
	}
}

gnb가 숨겨진 걸 나오게 하는것은 gnb 버튼을 컨트롤해서 자바스크립트나 제이쿼리 등으로 컨트롤해줘야 하는 부분이기 때문에 다루지 않음

orientation:landscape 가로모드
orientation:portrait 세로모드

👾

이전 포스트