반응형웹이란 다양한 기기(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> |
반응형 웹을 더욱 멋지게 완선하기 위한 또 하나의 기술로 CSS media 태그가 입니다.
media 태그의 경우 브라우저의 사이즈에 따라 style을 다르게 지정 할 수 있는 태그 입니다.
이 부분에 대하여는 다음에 포스팅을 올려 보도록 하겠습니다.
' IT > 웹디자인' 카테고리의 다른 글
| HTML 콤보박스 선택 시 페이지 이동하기 (2) | 2018.06.06 |
|---|---|
| CSS 미디어 쿼리 - 반응형 웹 만들기 (0) | 2018.06.05 |
| HTML 링크 태그 사용법 / CSS 링크색상 지정하기 (3) | 2018.05.31 |
| HTML 문서 입력 창 만들기 / textarea 태그 (2) | 2018.05.28 |
| HTML 문서작성을 위한 목록태그 / 번호가 없는 리스트 (0) | 2018.05.27 |
댓글