본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그

by 이쟝 2022. 2. 7.
  • 반응형 웹: 웹 페이지 하나로 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지 
  • 미디어쿼리: 미디어 타입에 따라 CSS를 적용할 수 있는 기능
  • 반응형 웹 페이지는 미디어 쿼리를 사용해 개발한다.
  • 지원하는 미디어 타입: all(모든 장치), screen(화면), print(프린터), aural(음성 장치), projection(프로젝터), tv(텔레비전) 등등..

미디어 쿼리의 사용법

1. <link>를 사용(비추천, 모든 css를 내려받아서 size가 커진다.)

 <link real="stylesheet" media="screen and (max-width: 768px)" href="style.css"/>
  • 미디어 타입이 스크린이고, 화면의 최대 넓이가 768px로 지정-> 화면의 너비 768이하일 때 적용된다.

 

2. @media 사용(css 파일 안에서)

@media screen and (max-width: 768px) {
	body {
    	background-color: green;
    }
}
  • (max-width:768px)을 생략하면 all이 기본값이 되서 모든 미디어타입에 적용된다. 
  • 보통 screen이나 all을 사용하는 것이 일반적이다. 

반응형 웹을 만들 때의 기준

1. 모바일을 우선할 경우(mid-width 사용)

/* 모바일에 적용될 스타일을 먼저 작성 */

@media screen and (min-width:769px) {
	/* 데스크탑에서 사용될 스타일을 여기 작성 */
}

 

2. 데스크탑을 우선할 경우(max-width 사용)

/* 데스크탑에서 사용될 스타일을 먼저 작성한다. */

@media screen and (max-width:768px) {
	/* 모바일에 사용될 스타일을 여기에 작성 */
}

예제1)

1. HTML 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>media_query</title>
	<link rel="stylesheet" href="newFile.css" type="text/css"></link>
</head>
<body>
	<ul>
	   <li>대체불가능토큰(NFT)이 글로벌 빅테크 기업들의 격전지로 떠오르고 있다.</li>
	   <li>NFT는 블록체인에 존재하는 디지털 자산의 일종이다.</li>
	   <li>비트코인 등 암호화폐가 다른 비트코인과 1 대 1로 ‘대체 가능한’ 토큰이라면,</li>
	   <li>NFT는 각각의 토큰이 모두 달라 그 가치가 천차만별이다.</li>
	   <li>따라서 미술품 같은 유형자산의 ‘디지털 공증’ 역할을 할 수 있다는 장점이 있다.</li>
	</ul>
	<img src="../img/img1.jpg"/><img src="../img/img2.jpg"/>
</body>
</html>

2. CSS파일

@charset "UTF-8";

/*초기화*/
body, ul, li{margin:0; padding:0; list-style-type: none;}
body {background-color:#F5FCC1;}

img{width:50%; height:200px;}
li{background-color: white; border: 2px solid gray; margin-top: 5px;}

 

3. 반응형 쿼리 적용하기 (320px ~600px) 

@charset "UTF-8";

/*반응형 스타일 적용하기*/
/*320px ~ 600px*/
@media all and (min-width:320px) and (max-width:600px) {
		li{background:pink;}
		img{width:100%;}
}

4. 반응형 쿼리 적용하기 (601px ~900px) 

@charset "UTF-8";

/*601px ~ 900px*/
@media all and (min-width:601px) and (max-width:900px) {
		li{background:#000; color:white;}
		img{width:30%;}
}

5. 반응형 쿼리 적용하기 (901px~) 

@charset "UTF-8";


/*901px ~ */
@media all and (min-width:901px) {
		li{background:skyblue; color:green; font-weight:bold;}
		img{width:50%;}
}

데스크탑말고도 다른 기기로 보기 

  • IP주소:9090/webApp/html5_css3/css10_media.html

Meta 태그

  • 현재 페이지의 참조 내용을 표시한다. (문서 그 자체를 설명하는 태그)
  • 닫는태그가 없는 태그 <meta .../>와 같이 작성한다. 

 

메타태그의 속성

content = "정보값" 메타 정보의 내용을 지정한다.  name속성과 http-equiv와 연관된 값 줌
name = "정보 이름" 몇 개의 meta 정보의 이름을 정할 수 있고, 지정하지 않으면 http-equiv와 같은 기능
http-equiv = "항목명" 웹 브라우저 서버에 명령을 내리는 속성으로 name 속성을 대신해 사용할 수 있음
html  문서가 응답 해더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때만
의미를 가짐

 

메타태그 종류

description 해당페이지의 설명
keywords 검색엔진에 검색어를 검색되는 단어를 적는 곳
author 작성자
refresh 일정한 시간간격으로 페이지가 다시 실행됨
http-equiv = "Refresh" 페이지가 일정시간 후 자동으로 이동
charsset 문자 코드의 종류 설정(문자깨짐현상 같은 오류를 방지하기 위해 인코딩 선언!)

 

<meta name="description" content="현재페이지 공부를 하기 위한 페이지"/>
<meta name="keywords" content="컴퓨터, it, html, 자바, 달리기"/>
<meta name="author" content="hong gildong"/>
<meta http-equiv="refresh" content="10"/>  10초간격으로 새로고침
<meta http-equiv="Refresh" content="7;css10_media.html"/> 입력한 주소로 7초 후 이동
<meta charset="UTF-8">

 

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택)  (0) 2022.02.09
프론트엔드2-3. tab메뉴 만들기  (0) 2022.02.08
프론트엔드2-1. div로 layout / Semantic 태그로 layout  (0) 2022.02.07
프론트엔드1-10. css transition(예제) / visibility와 display  (0) 2022.02.07
프론트엔드1-9. margin과 padding  (0) 2022.02.07

관련글

티스토리툴바