[CSS3] 반응형 웹(Responsive Web) 기초

반응형 웹(Responsive Web)
- 정의 : 하나의 웹 사이트에서 pc, 태블릿pc, 스마트폰 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

- 웹사이트를 pc용과 태블릿pc, 모바일 용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다는 장점이 있음.

- 웹페이지의 내용을 수정할 경우, 하나의 웹 페이지만 수정하면 pc와 태블릿 px 모바일등 다양한 디바이스에서 동일하게 반영되는 장점이 있음.

- 반응형 웹의 핵심 기술은 가변 그리드, 유연한 이미지, 그리고 미디어 쿼리가 중요한 핵심 개념임.

- 가장 많이 사용되고 있는 반응형 웹 제작 도구는 부트스트랩 프레임워크가 있음.

* 고정 그리드 레이아웃은 단위가 픽셀(px)이기 때문에 브라우저의 크기가 확대/축소될 때 글자 및 웹 요소가 안 보이는 경우가 발생. 레이아웃을 잡기는 수월하기 때문에 특정한 기기에만 사용한다.

* 가변 그리드 레이아웃 방식에서 각각의 요소의 너비를 구하는 공식(중요함) :
(요소의 너비 / 컨텐츠 전체를 감싸는 요소의 너비) * 100
요소를 백분률로 처리할 때 소숫점 이하 값이 길게 나오는 경우에는 3~4자리 정도로 끊어주는 것이 좋다.

* viewport: 웹페이지에서 사용자의 보이는 영역(visible area). 사용자의 영역은 기기마다 달라짐.
- width : viewport의 가로 크기
- device-width : 기기의 스크린 너비에 맞추라는 의미
- initial-scale : 웹 페이지에 접속했을 때 보여질 확대 비율

<meta name="viewport" content="width=device-width, initial-scale=1">

* text rem 단위

rem 기준이 되는 기본 크기를 지정한 뒤 하위 요소에서 사용한다.
rem단위는 root 즉, body의 사이즈를 기준으로 조절되는 것이다. 따라서 body의 기준 크기는 변경되지 않는다.

* srcset 속성

[ ]:생략가능
형식) srcset="파일 위치[픽셀밀도][너비값]"
- srcset : 픽셀의 밀도와 너비값을 줄 수 있는 속성.
- 밀도 : 픽셀이 얼마나 빽빽하게 차 있는지를 의미.

* 미디어쿼리: 접속하는 장치(미디어)에 따라서 특정한 CSS스타일을 사용하는 것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 그리드 레이아웃</title>
<style type="text/css">
	/* div 영역 */
	#wrapper {
		width: 960px;
		margin: 0 auto;
	}
	
	header{
		width: 960px;
		height: 120px;
		background-color: #066cfa;
		border-bottom: 1px solid black;
	}
	
	/* h1 태그 영역 디자인*/
	.header_text {
		font-size : 40px;
		color: #fff;
		text-align: center;
		line-height: 120px;
	}
	
	.content {
		float: left;
		width: 600px;
		height: 400px;
		padding: 15px;
		background-color: #ooff90;
	}
	
	.right_side {
		float: right;
		width: 300px;
		height: 400px;
		padding: 15px;
		background-color: #C4B73B;
	}
	
	footer {
		clear:both;
		height: 120px;
		background-color: #C35;
	}
</style>
</head>
<body>
	<div id ="wrapper">
		<header>
			<h1 class="header_text">고정 그리드 레이아웃</h1>
		</header>
		
		<section class="content">
			<h4>여기는 본문 영역입니다.</h4>
		</section>
		
		<aside class="right_side">
			<h4>사이드 바</h4>
		</aside>
		
		<footer>
			<h4>푸터</h4>
		</footer>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/* div 영역 */
	#wrapper {
		width: 85%;
		margin: 0 auto;
	}
	
	header{
		width: 100%;
		height: 120px;
		background-color: #066cfa;
		border-bottom: 1px solid black;
	}
	
	/* h1 태그 영역 디자인*/
	.header_text {
		font-size : 32px;
		color: #fff;
		text-align: center;
		line-height: 120px;
	}

	.content {
		float: left;
		width: 62.5%;
		height: 400px;
		padding: 1.5625%;
		background-color: #ooff90;
	}
	
	.right_side {
		float: right;
		width: 31.25%;
		height: 400px;
		padding: 1.5625%;
		background-color: #C4B73B;
	}
	
	footer {
		clear: both;
		width: 100%;
		height: 120px;
		background-color: #C35;
	}
</style>
</head>
<body>
	<div id ="wrapper">
		<header>
			<h1 class="header_text">가변 그리드 레이아웃</h1>
		</header>
		
		<section class="content">
			<h4>여기는 본문 영역입니다.</h4>
		</section>
		
		<aside class="right_side">
			<h4>사이드 바</h4>
		</aside>
		
		<footer>
			<h4>푸터</h4>
		</footer>
	</div>
</body>
</html>

가변 그리드 레이아웃은 반응형이기 때문에 창을 줄이면 함께 크기가 줄어든다.

rem을 사용한 글자 사이즈 조절

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	body {
		font-size: 16px; 
		/* rem 기준이 되는 기본 크기를 지정함.
		rem단위는 root 즉, body의 사이즈를 기준으로 조절되는 것이다.
		따라서 body의 기준 크기는 변경되지 않는다.*/
	}
	
	.wrapper {
		width: 96%;
		margin: 0 auto;
		font-size: 12px;
	}
	
	.header_text {
		font-size: 2rem; /* 16px * 2 ==> 32px */
	}
	
	.text {
		font-size: 1.5rem; /* 16px * 1.5 ==> 24px */
	}

</style>
</head>
<body>
	<div class="wrapper">
		<header class="header_text">
			<p>em 단위를 제대로 알아보자.</p>
			<p class="text">em 단위의 특성</p>
		</header>
	</div>
</body>
</html>

srcset 속성 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
</head>
<body>
	<picture>
		<source srcset="images/shop-large.jpg"
				media="(min-width:1024px)">
		<source srcset="images/shop-medium.jpg"
				media="(min-width:768px)">
		<source srcset="images/shop-small.jpg"
				media="(min-width:320px)">
		<!-- 가로 크기에 따라 표현되는 이미지가 달라진다. -->
				
		<img src="images/shop.jpg" style="width: 100%;">
	</picture>
</body>
</html>

미디어쿼리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<style type="text/css">
	body {
		background: url("images/bg0.jpg") no-repeat fixed;
		background-size: cover;
	}
	
	/* 접속한 스크린의 최대 가로 크기가 1024px 이하인 경우 */
	@media screen and (max-width: 1024px) {
		body {
			background: url("images/bg1.jpg") no-repeat fixed;
			background-size: cover;
		}
	}
	
	/* 접속한 스크린의 최대 가로 크기가 768px 이하인 경우 */
	@media screen and (max-width: 768px) {
		body {
			background: url("images/bg2.jpg") no-repeat fixed;
			background-size: cover;
		}
	}
	
	/* 접속한 스크린의 최대 가로 크기가 320px 이하인 경우 */
	@media screen and (max-width: 320px) {
		body {
			background: url("images/bg3.jpg") no-repeat fixed;
			background-size: cover;
		}
	}
</style>
</head>
<body>
	<!-- body는 작성하지 않는다. -->
</body>
</html>

저작자표시

'Front > CSS' 카테고리의 다른 글

[CSS] :before :after 삭제(가상 요소 반응형 웹에서만 삭제하기) (0)	2021.07.27
[CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) (0)	2021.04.22
[CSS3] 그림자(shadow) 속성 (0)	2021.04.22
[CSS3] border선, 사각형 둥글게 만들기 (0)	2021.04.22
[CSS3] float 속성 (0)	2021.04.22

Hello, World!

[CSS3] 반응형 웹(Responsive Web) 기초

'Front > CSS' 카테고리의 다른 글

티스토리툴바

[CSS3] 반응형 웹(Responsive Web) 기초

'Front > CSS' 카테고리의 다른 글

관련글

티스토리툴바