반응형 웹과 적응형 웹의 차이

반응형

1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌
2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임

 

적응형

사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌. 

 

Viewport

 

반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함
기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소
디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함

 

@media(미디어 쿼리)

 

<style>
@midia screen and (min-width: 480px) {
	body{
    	background-color : lightgreen;
    }
}
</style>

 

용어 정리	의미	코드 상의 예시
미디어 유형	All(전부)/print(인쇄)/Screen(전부)	screen
크기 규칙	min(최소 뷰포트 넓이) max(최대 뷰포트 넓이) 지정 기준을 결정	min-width, min-height
Breakpoint	중단점 media query가 적용될 기준점 규칙없이 정할 경우, 프론트엔드 개발에 혼란이 생길 수 있음 현업에선 각 breakpoint마다 layout을 변경하는 방법을 씀	480px 주로, 480px, 768px<= 1024px, 1600px를 기준으로 삼음
orientation	landscape(가로 모드) : height가 더 클때 portrait(새로 모드) : width가 더 클때

 

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다