Responsive Design
현재 컴퓨터뿐만 아니라 모바일로도 인터넷을 사용하고 있고 그 인터넷으로 많은 사이트들을 이용한다. 그런데 컴퓨터와 모바일의 크기는 다르다. 그래서 어느 한 쪽에만 맞게 디자인을 하게 된다면 다른 한쪽에서는 사용하기가 많이 불편헐 것이다. 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절게 동작해야할 필요성 대두되었다.
화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인이 반응형 디자인이다.
@media
@media는 반응형 디자인을 구성하는 핵심적인 기술이다. style 태그 내에 @media(조건문) { 실행 } 형식으로 작성한다. 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수 있다.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border:5px solid green;
font-size:60px;
}
@media(min-width:800px) { /* 화면 크기가 800px보다 큰 경우 */
div {
display:none; /* div 태그의 display를 안 보이게 처리 */
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>위 예시사 반응형 디자인의 간단한 예시이다.
화면이 800px보다 더 지면 div태그를 보이지 않게 해주는 것이다.
개발자 되기