반응형웹

 

 

반응형웹이란 다양한 기기(PC, 태블릿, 휴대포)에서 해당 장치의 브라우저의 환경에 반응하여, 그것에 어울리는 형태로 각각 다르게 표시되는 웹페이지를 말합니다.

이런 반응형 웹 페이지를 만들기 위해서는 <mata> 태그의 선언이 필요 합니다.

 

반응형 웹 페이지를 만들기 위한 기초 메타태그 입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

동일한 웹페이지이지만 뷰포트(viewport) 메타 태그를 선언 한 경우와 하지 않은 경우를 먼저 눈으로 확인 해 보도록 하겠습니다.(소스는 아래에 있습니다)

 

일반웹과 반응형웹 비교

 

 

두 화면을 비교 해 보면, 이미지 및 텍스트의 차이점을 확인 할 수 있습니다.

선언하지 않은 화면의 이미지는 오른쪽 부분이 다 보이지 않지만, 선언 한 화면은 모두 보이게 됩니다.

선언하지 않은 화면을 드래그 해 보면 화면전체 스크롤이 발생하는 것을 확인 할 수 있습니다.

그리고 텍스트의 경우 선언하지 않은 화면은 읽기가 힘들정도로 작게 보이지만, 선언 된 화면은 모바일 크기에 어울리게 자동으로 텍스트 크기가 바뀐 모습을 확인 할 수 있습니다.

 

 

 뷰포트 메타태그 자세히 알아보기

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • meta : 메타태그 정의(이것은 메타태그 입니다.
  • name="viewport" : 메타태그 이름(뷰포트라는 메타태그 입니다.)
  • content="" : 내용정의
  • width=device-width : 너비설정(장치의 너비에 맞춥니다.)
  • initial-scale=1.0 : 초기화면 배율설정(1.0dms 100%를 의미 합니다.)

※ 최소, 최대 화면배율을 지정 할 수 있습니다. minimum-scale:1.0, maximun-scale=2.0

 

 

실습소스

 

<!DOCTYPE html>
<html>
<head>
  <title>링크태그연습</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <img src="img.png" width="100%" max-width="device-width"><br>
  반응형 웹 테스트를 위한 예제 입니다.<br>
  반응형웹이란 모든 기기에서 그 환경에 반응하여 해당 화면에 어울리는 모양으로 표시되는 웹페이지를 말합니다.<br>
  이제 어떻게 반응형 웹을 만들 수 있는지 그 방법에 대하여 알아봅시다.<br>
  알면 간단한 반응 형 웹 만들기 입니다.<br>
</body> 
</html>

 

 

반응형 웹을 더욱 멋지게 완선하기 위한 또 하나의 기술로 CSS media 태그가 입니다.

media 태그의 경우 브라우저의 사이즈에 따라 style을 다르게 지정 할 수 있는 태그 입니다.

이 부분에 대하여는 다음에 포스팅을 올려 보도록 하겠습니다. 

 

Posted by 행복한 유유로그

댓글을 달아 주세요

  1. 공수래공수거 2018.06.01 07:53 신고  댓글주소  수정/삭제  댓글쓰기

    이렇게 설명해 주시니 차이를 금방 알수 있겠군요

    활기찬 6월 시작하시기 바랍니다



티스토리 툴바