본문 바로가기

Community / NOTICE

반응형 홈페이지란?

페이지 정보

작성자 운영자 작성일 18-01-23 23:05 61

본문

홈페이지는 PC, 스마트폰, 태블릿등 어떤 기기에서 보느냐에 따라 홈페이지 구성이 변화 되도록 제작 할 수 있습니다.

즉, 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지를 반응형 홈페이지라 합니다.

해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다.

예전에는 PC버전, 모바일버전에 따라 홈페이지를 각각 만들기도 했습니다. 하지만 스마트폰은 새로운것이 계속 나오고 그때마다 대응을 한다는 것이 어렵기 때문에 반응형 홈페이지가 필요하게 된것입니다. PC버전, 모바일버전 구분 없이 하나의 사이트를 만들어 해상도에 따라서 레이아웃, 콘텐츠가 자동으로 변경되어 모바일 버전을 따로 제작관리할 필요가 없습니다.

 

가로폭

명칭

480px

스마트폰

800px

태블릿

1024px

넷북

1600px

데스크톱

 

즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다.

 

해상도(화면의 크기) 600 픽셀 미만일 경우

@media screen and (max-width:6000px) {

#article {font-size:1.25em; background:#fff; color:#000;}

}


해상도(화면의 크기) 601픽셀과 800픽셀 사이일 경우

@media all and (min-width:601px) and (max-width:800px) {

#article {background:#000;}

}


해상도(화면의 크기) 1200픽셀 이상일 경우

@media screen and (min-width:1200px) {

#article {font-size:1.25em; background:#fff; color:#000;}

}


각각에 따라 화면의 구성을 변하게 해서  보이도록 하자는 것이 반응형 홈페이지입니다.

  Total 6건 1 페이지
NOTICE 목록
번호 제목
글쓴이
6 네이버, 다음, 네이트, 구글 검색사이트 등록대행
글쓴이: 운영자 | 일자: 04-23
운영자
04-23
5 IE(인터넷 익스플로러) 최신 버전 업데이트
글쓴이: 운영자 | 일자: 01-24
운영자
01-24
4 랜섬웨어 예방을 위한 행동 요령 안내
글쓴이: 운영자 | 일자: 01-24
운영자
01-24
3 발송한 메일이 아닌데 본인 메일주소로 수신되는 현상(멀웨어,랜섬웨어)
글쓴이: 운영자 | 일자: 01-23
운영자
01-23
열람중 반응형 홈페이지란?
글쓴이: 운영자 | 일자: 01-23
운영자
01-23
1 반응형 홈페이지의 3가지 핵심 기법
글쓴이: 운영자 | 일자: 01-18
운영자
01-18
게시물 검색

이용약관 | 개인정보처리방침 | 오시는길 | 로그인
상호 1004pr, 대표 최종미, 개인정보관리책임자 최종미, 사업자등록 204-14-38221, 통신판매신고 동대문구 제02773호(사업자정보확인)
서울 동대문구 장한로33길 34-13 (2층), Tel: 02)2248-7420, Fax: 0303-0200-1234
Copyright © 믿음의일터 All rights reserved. hosting by 1004pr