media query (다른 기기에서는 다른 화면 전환)

by H_Develop 2022. 6. 26. 17:23

반응형 웹 기술
미디어 쿼리는 웹 접속 기기의 브라우저 해상도, 즉 뷰 포트의 크기에 반응하여 거기에 맞는 CSS적용시켜주는 기술
반응형 웹의 최신 기술인, 플렉서블(flexible 가변적인) 박스를 알아보고 사용되는 CSS속성을 알아보자

미디어 쿼리
CSS의 미디어 쿼리(Media Queries)는 특정 미디어의 성능과 상황에 따라 특정한 CSS를 적용할 때 사용된다.
반응형 웹에서는 접속 기기를 판단하기 위해 뷰 포트의 너비를 체크한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport 설정 -->
<style>

	body {background-color : skyblue;}
	@media only screen and (max-width:600px) {	/* viewport 너비가 600px 이하면, */
    	body {background-color : yellow}		/* yellow */
    }

</style>
</head>
<body>

	<p>브라우저 너비가 600px 이하에서는 노란색이 된다.</p>

</body>
</html>

데스크 탑과 스마트폰

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * { margin : 0; padding : 0; box-sizing : border-box; }
  li { list-style-type : none; }
  header { height : 80px; padding : 30px 0 0 30px; background-color : #33b30b;
	   color : #ffffff; }
  .row { margin-top : 10px; }
  .row::after { content : ""; clear : both; display : block; } 

	/*  .row:after after가 들어가면, 가상 요소 (Pseudo-Element)를 생성한다.
		content 속성이 이 선택자와 같이 사용되는데 content 속성에 의해 콘텐츠(문자열, 속성 등)를 삽입
		일반적으로 content 속성은 장식용 텍스트(특수문자)를 추가할 때 사용된다.
		예를 들어 a::after { content : "->"; } 로 링크가 걸린 글자 뒤에 -> 를 추가하게 된다.
		p::before { content : "*"; } p 테그 내용 앞에 * 을 삽입
		contennt : ""; 는 row클래스 다음 content 속성으로 빈 텍스트(NULL)를 넣는다
		clear : both;는 선택된 요소에서 사용된 float(float : left 나 float : right)를 해제한다.
		display : block 은 이 가상 요소의 display 속성을 block으로 설정한다.*/

  .menu li { padding : 10px; margin-bottom : 12px; background-color : #3ea3d9;
  	     color : #ffffff; box-shadow : 3px 3px 5px #aaaaaa; }
  .menu a:link, .menu a:visited, .menu a:hover, .menu a:active { /* a:link / a 테그 링크 속성  */
  	color : #ffffff; 	text-decoration : none; }
  .menu li:hover {background-color : orange;}
section p {
	line-height : 150%;
	padding-top : 10px;
}
footer {
	height : 80px;
	background-color : #eeeeee;
  	color : #000000;
  	text-align : center;
  	font-size : 0.9em;
  	padding-top : 30px;
  	margin-top : 10px;
}
/* 데스크 탑 */
.col_1 {width : 8.33%;}
.col_2 {width : 16.66%;}
.col_3 {width : 25%;}
.col_4 {width : 33.33%;}
.col_5 {width : 41.66%;}
.col_6 {width : 50%;}
.col_7 {width : 58.33%;}
.col_8 {width : 66.66%;}
.col_9 {width : 75%;}
.col_10 {width : 83.33%;}
.col_11 {width : 91.66%;}
.col_12 {width : 100%;}
[class*="col_"] {
  	float : left;
  	padding : 15px;
}
/* 미디어 쿼리 */
@media only screen and (max-width : 768px) {
/* 스마트 폰 */
  	[class*="col_"] {
    	width : 100%;
  	}
}
</style>
</head>
<body>
<header>
	<h3>웹 프로그래밍 강좌</h3>
</header>
<div class="row">
	<nav class="col_3 menu">
		<ul>
		<li><a href="#">웹 페이지란?</a></li>
		<li><a href="#">HTML/CSS</a></li>
		<li><a href="#">PHP 프로그래밍</a></li>
		<li><a href="#">자바스크립트/jQuery</a></li>
		</ul>
	</nav>
	<section class="col_9">
		<h2>웹 페이지란?</h2>
		<p>웹 페이지는 웹 서핑을 할 때 보는 각각의 화면을 말한다. 웹 페이지는 HTML과 CSS로 구성된 HTML 문서와 관련된 이미지, 동영상, 음악 파일 등의 데이터 파일로 구성된다.</p>
		<p>웹 브라우저는 웹 서버에서 보내온 웹 페이지에 관련된 파일들을 해석하여 브라우저 화면에 내용을 보여준다.</p>
	</section>
</div> <!-- row -->
<footer>
	<p>Copyright 2021. (goldmont) all rights reserved.</p>
</footer>
</body>
</html>

'FrontEnd > HTML 반응형 웹' 카테고리의 다른 글

플렉서블 박스 (Flexable Box), (Container, Item) (0)	2022.06.26
Variable 가변 이미지 (width, max-width) (0)	2022.06.26
12열_그리드_시스템, [class="col_"], [attribute=value] (0)	2022.06.26
반응형 웹 폰트 (em, rem) (0)	2022.06.26
그리드 뷰 (Grid View) (0)	2022.06.24