(45) [CSS] 3일 반응형 웹(Responsive Web)

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

장점
웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.
웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다.

뷰포트(Viewport)

웹 페이지가 사용자에게 보여지는 영역.반응형 웹(Responsive Web)은 모바일, 테블릿, PC 등 다양한 디바이스의 디스플레이에 맞춰 뷰포트가 변하는 웹 사이트를 말하는 것이다. 즉, 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태를 말한다.

뷰포트 속성

속성	의미
width	뷰포트의 너비를 지정
height	뷰포트의 높이를 지정
inital-scale	뷰포트의 초기 배율을 지정한다. 기본값은 1이며, 1보다 작은 값을 사용하여 축소된 페이지를 표시하고, 1보다 큰 값을 사용하여 확대된 페이지를 표시한다.
user-scalable	뷰포트의 확대/축소 여부를 지정한다. 기본값은 yes이며 no로 설정하면 사용자가 페이지를 확대 할 수 없다.
minimum-scale	뷰포트의 최소 축소 비율을 지정한다. 기본값은 0.25이다.
maximum-scale	뷰포트의 최대 확대 비율을 지정한다. 기본값은 1.6이다.

미디어 쿼리(Media Queries)

CSS3의기술로 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것
미디어 쿼리는 @media로 시작하며 미디어 쿼리 구문은 미디어 타입과 미디어 특성으로 이루어져 있다.
주요 미디어 타입에서는 all, print, screen 이 있다.

기본 문법

형식 : @media [only 또는 not] [미디어유형] [and 또는 ,] (조건문) {실행문}

       <link rel="stylesheet" href="style.css" >
       <link rel="stylesheet" media="all and (min-width:320px)" href="style.css" >
       @import url(style.css) all and (min-width:320px);
       
       /*미디어 쿼리 작성시 주의 사항*/
       - min을 사용할때는 반드시 작은 순서대로 작성 한다.(min은 최소 또는 그이상이라 는 뜻으로, 점차 커지는 것을 의미하기 때문에)
          @media (min-width:320px){실행문}
          @media (min-width:768px){실행문}
          @media (min-width:1024px){실행문}

          /*min-width를 사용하는 경우 스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 하고,
          점차 확장되어가는 형태로 CSS를 작성*/
			
        - max 사용시 큰순서대로 작성 한다.(max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)
          @media (max-width:1600px){실행문}
          @media (max-width:1024px){실행문}
          @media (max-width:768px){실행문}

          /*max-width를 사용하는 경우 데스크탑용의 가장 큰 화면 사이즈의 레이아웃을 
          기본으로 하고, 점차 축소하는 형태로 CSS를 작성*/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
  - 데스크탑에 대응하도록 만들어진 문서를 스마트폰으로 열면 보통 3~4배 이상 줌 아웃 되어
    글씨를 알아 볼 수 없는 형태로 작게 표시한다.
    이를 해결하기 위해 viewport를 설정한다.
  - 모바일 뷰 포트를 재설정하는 <meta>
    스마트폰 웹 브라우저에서만 해석
    뷰 포트를 문서가 아닌 스크린 영역으로 재 설정
    웹 문서를 강제로 스크린 사이즈에 맞게 줌 아웃 하지 않음
  - content 속성
    width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정.
       즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 설정
    initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 설정
       기본값은 1이며, 1보다 작으면 축소된 페이지, 1보다 크면 확대된 페이지를 표시
-->

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	margin: 30px auto;
	border: 3px dotted #333;
	padding: 10px;
	background: #e6e6e6;
}

@media ( max-width :600px) {
	.box {
		display: none; /*브라우저 넒이가 600이하이면 none*/
	}
}
</style>
</head>
<body>

	<h3>반응형 웹(Responsive Web)</h3>

	<p>미디어 쿼리 : 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것</p>

	<div class="box"></div>

</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>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

.container {
	width: 1200px;
	margin: 20px auto 10px;
	border: 3px solid black;
}

.header {
	width: 100%;
	background: #e4f7ba;
	padding: 20px;
	text-align: center;
}

.body-main {
	content: '';
	clear: both;
	display: block;
}

.article {
	float: left;
	width: 75%;
	height: 500px;
	background: #eee;
	padding: 15px;
}

.side {
	float: left;
	width: 25%;
	height: 500px;
	background: yellow;
	padding: 15px;
}

.footer {
	width: 100%;
	background: gray;
	padding: 20px;
	text-align: center;
}


/*
	-max-width를 사용 하는 경우
	가장 큰 화면 사이즈의 레이아웃을 기본으로 하고 점차 축소하는 형태로 css 작성
	-

*/


/*화면 너비:0~768*/
@media ( max-width :1200px) {
	.container {
		width: 95%;
		border: 3px solid red;
	}
}

/*화면 너비:0~468*/
@media ( max-width :768px) {
	.container {
		width: 100%;
		border: 3px solid green;
	}
}

/*화면 너비:0~320*/
@media ( max-width :468px) {
	.container {
		width: 100%;
		border: 3px solid green;
	}
	.header {
		height: 300px;
	}
	.article {
		float: nene;
		width: 100%;
		height: 300px
	}
	.side {
		float: none;
		width: 100%;
		border: 3px solid red;
	}
}

@media ( max-width :320px) {
	.container {
		width: 100%;
		border: 3px solid tomato;
	}
}
</style>
</head>
<body>

	<div class="container">
		<div class="header">
			<h1>헤더입니다.</h1>
		</div>
		<div class="body-main">
			<div class="article">메인입니다.</div>
			<div class="side">사이드입니다.</div>
		</div>
		<div class="footer">
			<h3>푸터입니다.</h3>
		</div>
	</div>

</body>
</html>

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

(45) [CSS] 3일 레이아웃과 포지셔닝 - Grid (0)	2024.04.18
(44) [CSS] 2일 레이아웃과 포지셔닝 - flex (0)	2024.04.17
(44) [CSS] 2일 레이아웃과 포지셔닝 (0)	2024.04.17
(43) [CSS] 1일 텍스트 및 배경 관련 스타일 (0)	2024.04.16
(43) [CSS] 1일 CSS 기초 (0)	2024.04.16

Power Up!

(45) [CSS] 3일 반응형 웹(Responsive Web)

뷰포트(Viewport)

뷰포트 속성

미디어 쿼리(Media Queries)

기본 문법

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

티스토리툴바

(45) [CSS] 3일 반응형 웹(Responsive Web)

뷰포트(Viewport)

뷰포트 속성

미디어 쿼리(Media Queries)

기본 문법

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

관련글

티스토리툴바