반응형 웹 디자인
• 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법
• 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적
-> 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인
모바일 기기를 위한 뷰포트(viewport)
• 뷰포트 : 실제 내용이 표시되는 영역
• PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않음
-> 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시
뷰포트 지정하기
일반적인 사용법 : 뷰포트의 너비를 스마트폰 화면 너비에 맞추고
초기 화면 배율을 1로 지정
뷰포트 단위
뷰포트(viewport)
• 스마트폰의 브라우저에서 웹 페이지를 보여주는 영역
• <meta> 태그를 이용하여 뷰포트를 설정
미디어 쿼리(media queries)
• 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하는 방법
미디어 쿼리 구문
• @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정함
• <style> 태그와 </style> 태그 사이에 사용
미디어 쿼리를 이용해 제작된 사이트들 모아놓은 곳 : http://mediaqueri.es 참고
미디어 쿼리의 다양한 조건
웹 문서의 가로 너비와 세로 높이(뷰포트)
• 실제 웹 문서 내용이 나타나는 영역의 너비와 높이를 조건으로 사용
단말기의 가로 너비와 세로 높이
• 대부분의 단말기 해상도와 실제 브라우저의 너비가 다르다는 점에 주의
화면 회전
• 스마트폰이나 태블릿에서 기기를 가로나 세로로 돌려보는지 확인
미디어 쿼리 중단점
•중단점(breakpoint) : 서로 다른 CSS를 적용할 화면 크기
•대부분 기기의 화면 크기 기준.
•모든 기기를 반영할 수 없기 때문에 스마트폰과 태블릿, 데스크톱 정도로 구분
•모바일 퍼스트(mobile first) : 모바일 기기 레이아웃을 기본으로 작성 -> 태블릿 & PC 레이아웃 작성
미디어 쿼리 적용하기
1. 외부 CSS 파일 연결
방법) <link> 태그 사용하기
<head> 와 </head> 사이에 삽입
방법) @import 구문 사용하기
<style>와 </style> 사이에 삽입
2. 웹 문서에서 직접 정의
방법) <style> 태그 안에서 media 속성 사용하기
방법) @media문 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
body{
font-family: "맑은 고딕", "돋움";
font-size: 100%;
}
[class*="c_"]{
float: left;
padding: 10px;
}
/* 너비가 600픽셀 미만인 스마트폰을 위한 기본 설정 */
[class*="c_"]{
width: 100%;;
}
/* 너비가 600픽셀 이상인 태블릿을 위한 기본 설정 */
@media only screen and (min-width:600px) {
.c_m_1{width: 8.33%;}
.c_m_2{width: 16.66%;}
.c_m_3{width: 25%;}
.c_m_4{width: 33.33%;}
.c_m_5{width: 41.66%;}
.c_m_6{width: 50%;}
.c_m_7{width: 58.33%;}
.c_m_8{width: 66.66%;}
.c_m_9{width: 75%;}
.c_m_10{width: 83.33%;}
.c_m_11{width: 91.66%;}
.c_m_12{width: 100%;}
}
/* 너비가 768픽셀 이상인 데스크톱 컴퓨터, 노트북 등 */
@media only screen and (min-width:768px) {
.c_1{width: 8.33%;}
.c_2{width: 16.66%;}
.c_3{width: 25%;}
.c_4{width: 33.33%;}
.c_5{width: 41.66%;}
.c_6{width: 50%;}
.c_7{width: 58.33%;}
.c_8{width: 66.66%;}
.c_9{width: 75%;}
.c_10{width: 83.33%;}
.c_11{width: 91.66%;}
.c_12{width: 100%;}
}
header{
height: 80px;
padding: 20px;
background-color: #66c0e7;
}
aside #menu{
color: #ffffff;
}
aside#menu li{
padding: 10px;
margin: 5px 0 0 0;
background-color: #b52d89;
}
section#main{
padding: 15px;
}
section#main p{
padding: 5px;
font-size: 0.95em;
line-height: 130%;
}
aside#photos img{
width: 100%;
}
aside#photos li{
margin: 5px 0 0 0;
}
footer{
height: 60px;
padding: 10px;
clear: both;
text-align: center;
background-color: #eeeeee;
}
</style>
</head>
<body>
<header class="c12">
<h1>루바토의 사진 아카데미</h1>
</header>
<aside id="menu" class="c_m_3 c_3">
<ul>
<li>사진의 역사</li>
<li>노출이란?</li>
<li>카메라 동작 모드</li>
<li>렌즈의 종류</li>
</ul>
</aside>
<section id="main" class="c_m_9 c_6">
<h1>사진의 역사</h1>
<p> 사진이 발명되기 이전에도 사람들은 카메라 옵스큐라라는 장치로
피사체의 이미지를 얻는 방법을 알고 있었다. 13세기나 14세기 무렵에 발명된 카메라 옵스큐라는
한쪽 면에 구멍이 뚫린 암실 박스로, 암실 박스의 구멍으로 빛이 들어와 박스 안의 반대쪽 벽면에
이미지가 형성된다.</p>
<p>그 후 카메라 옵스큐라는 발전을 거듭하여 오늘날의 카메라에 이르게 되었다.
이제 예술의 한 장르로 인정받는 사진은 우리의 생활 곳곳에 스며들어 있다.</p>
</section>
<aside id="photos" class="c_m_12 c_3">
<h4>포토갤러리</h4>
<ul>
<li><img src="cherry.jpg"></li>
<li><img src="cherry.jpg"></li>
</ul>
</aside>
<footer class="c12">
COPYRIGHT(C) 루바토 All Rights Reserved.
</footer>
</body>
</html>실행 결과
'HTML／CSS' 카테고리의 다른 글
| HTML / CSS 반응형 웹과 미디어 쿼리(그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) (0) | 2021.06.19 |
|---|
