미디어 쿼리 https://mediaqueri.es/
미디어쿼리와 반응형 웹
미디어쿼리는 서로 다른 미디어나 모바일 기기라 할지라도 각각의 스타일 시트를 만든 후 조건에 맞는 스타일 시트를 적용할 수 있습니다. 이것을 “반응형웹 디자인(Responsive Web Design)” 이라고 합니다. 특히 @media 명령어를 사용하면 같은 스타일 시트 안에서 미디어별 경우에 맞게 다른 스타일을 편리하게 지정할 수 있습니다. 예를 들어 브라우저 화면에는 글자 서체를 ‘나눔고딕’으로 표시하고 인쇄할 때는 ‘나눔명조’로 출력하고 싶다면 다음처럼 @media 다음에 미디어 특성에 해당되는 값을 주고 {} 안에 조건에 맞는 스타일을 작성하면 됩니다.
<style>
@media screen{
h1{
font-family:"나눔고딕";
}
}
@media print{
h1{
font-family :"나눔명조";
}
}
</style>
CSS3 미디어쿼리 이해
내부 스타일 시트에서 사용하는 반응형 웹을 위한 미디어쿼리
앞의 간단한 사례처럼 원래 미디어쿼리의 개념은 다양한 디바이스에 따라 다른 스타일시트를 지정하고자 사용되었습니다. 하지만 최근에 여러 가지 모바일 기기와 운영체제가 나타나면서
다양한 화면 크기를 지원하기 위해 @media screen 에 집중하게 되었습니다. 화면에 나타나는 브라우저의 너비를 이용하여 스타일을 다르게 주는 방식이 바로 ‘반응형 웹’ 개념으로 발전하였습니다. 이를 위해 ‘min-width’, ‘max-width’, ‘orientation’, ‘and’ 같은 속성값과 연산자를 조합하여 브라우저의 너비와 디바이스의 방향을 구분할 수 있습니다.
다음의 예는 스마트폰, 태블릿 PC, 데스크탑 PC의 경우 각각 ‘화면크기 <= 792px, ’800px<=화면크기 <= 1023px, 1024px <= 화면크기 인 경우 조건에 맞는 스타일 시트를 사용하겠다는 의미입니다. 여기서 미디어를 구분하는 너비 값은 정해져 있는 것은 아니며 지원하는 단말기의 특성에 맞춰서 바꿔 사용하면 됩니다. 그리고 지금 소개한 예를 실제 페이지에 적용할 때는 주석(/**/) 부분의 내용르 제거한 후 HTML5 태그에 지정하고 싶은 스타일을 직접 선언한 후 사용하세요.
<style>
@media (max-width:799px){
/* 스마트폰용 스타일 */
}
@media only screen and (min-widht:800px) and (max-width:1023px){
/* 태블릿 PC용 스타일 */
}
@media only screen and (min-width:1024px){
/* 데스크탑 PC */
}
</style>
내부 스타일 시트로 반응형 웹 만들기
:after 라는 유사 클래스 선택자
=> 이 유사 클래스 선택자는 모든 엘리먼트에 붙어서 사용할 수 있으며 브라우저가 실행되는 도중에 지정한 내용값을 추가해 보여 줍니다. 추가할 내용값은 다음처럼 ‘content’ 라는 특성을 이용하면 됩니다.
엘리먼트 : after { content : “내용값” ; };
예를 들어 다음 예제는 h1 태그 다음에 ‘반갑습니다!’를 추가해 주는 것입니다.
<style>
h1:after {
content:"반갑습니다!"
};
</style>
결과 >>
안녕하세요 반갑습니다.!
이제 본격적으로 간단한 반응형 웹 디자인을 해 보겠습니다. 다음 예제는 스마트폰으로 접속하면 배경색을 흰색으로 하고 제목을 ‘스마트폰’이라고 표시합니다. 반면 태블릿 PC 로 접속하면 연한 회색의 배경과 검은 글씨를 표시합니다. 데스크탑 PC 는 짙은 회색의 배경에 흰색글씨를 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>미디어 쿼리</title>
<style>
/* 스마트폰 */
@media (max-width:799px){
body { background-color: #FFFFFF} /* 배경색은 흰색 */
#title:after { content : " : 스마트폰 " ;} /* 스마트폰 접속 표시 */
}
/* 데스크탑 */
@media only screen and (min-width :800px) and (max-width :1023px){
body { background-color :#CACACA} /* 배경색은 흰색 */
#title:after { content : " : 태블릿 PC " ;} /* 태블릿 PC 접속 표시 */
}
/* 데스크탑 */
@media only screen and (min-width :1024px){
body { background-color :#606060} /* 배경색은 흰색 */
#title:after { content : " : 데스크탑 PC " ;} /* 데스크탑 PC 접속 표시 */
}
</style>
</head>
<body>
<h1 id="title">접속기기</h1>
</body>
</html>
외부 스타일 시트로 반응형 웹 만들기
<link href="mystyle.css" rel="stylesheet" type="text/css" >
위 예는 mystyle.css 라는 외부 스타일시트 파일을 이용하기 위해 <link> 태그를 사용하여 가져오는 경우입니다.
<link> 태그는 href 라는 특성(attribute) 에 스타일시트 파일을 지정하도록 되어 있습니다. <link< 태그는 href 뿐만 아니라
여러 개의 특성을 사용하도록 되어 있는데 그 중 media 라는 특성을 사용해서 디바이스별로 다른 스타일을 쓸 수 있도록 확장할
수 있습니다.
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)" >
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)" >
desktop_pc.css
@charset "utf-8";
body {
background-color: #fff; /* 배경 색상을 흰색 */
}
#mobile_view {
display : none; /* mobile_view선택자 영역은 화면에서 생략 */
}
mobile.css
@charset "utf-8";
body {
color: #FFF; /* 글자 색상을 흰색 */
background-color: #000; /* 배경 색상을 검정 */
}
#pc_view {
display : none; /* pc_view 영역은 화면에서 생략 */
}
ALL 전체 media_query.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<title></title>
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)" >
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)" >
</head>
<body>
<h1>미디어 쿼리 연습</h1>
<div id="pc_view">
<h2>데스크탑 PC 화면</h2>
<p>브라우저의 너비를 800 px보다 작게 줄여보세요. </p>
<p>배경이 검정색에 글자가 흰색으로 바뀔 겁니다. </p>
</div>
<div id="mobile_view">
<h2>모바일 화면</h2>
<p>브라우저의 너비를 800 px이상으로 크게 늘여보세요. </p>
<p>배경이 흰색에 글자가 검정색으로 바뀔 겁니다. </p>
</div>
</body>
</html>
visibility 과 display 의 유사점과 차이점
화면에서 엘리먼트가 나타나게 하거나 사라지게 할 때 유사한 기능을 하는 두 개의 속성으로 visibility와 display가 있습니다.
이 둘은 기능이 비슷해서 헷갈리기 쉽습니다. 차이점을 살펴보는 쪽이 훨씬 더 이해하기 쉬울 것입니다. 예를 들어 다음처럼 h1엘리먼트에서
visibility 속성에 hidden 값을 지정하면 화면에서 사라집니다. 또한 h2 엘리먼트에서 display 속성값으로 none 을 지정해도 역시 화면에서
사라집니다. 또한 다음처럼 h2 엘리머트에서 dispaly 속성값으로 none 을 지정해도 역시 화면에서 사라집니다. 차이점이 무엇일까요?
그것은 페이지 안에서 공간을 차지하느냐 여부입니다.
h1 { visibility :hidden; /* 화면에서 사라짐. 공간은 남음 */ }
h2 { display :none; /* 화면에서 사라짐. 공간도 사라짐 */ }
댓글 ( 4)
댓글 남기기