HTML_반응형 웹

 

 

 

(1) 반응형 웹 

디바이스 해상도에 맞춰 자동으로 레이아웃이 변하여 화면이 조절되는것 

-width, padding , margin을 가변성있게 제작한다 (% calc() vw vh 단위사용 )

-flex , grid 사용

- 미디어 쿼리 사용 

(2) 적응형 웹 

pc와 모바일이 각각의 사이트 주소를 가지고 분리되어있는 경우 

레이아웃이 복잡하거나 앱이 따로 있을경우에 사용한다 

 

[2] 반응형 웹 적용하기 

---

(1) @media 

 

스마트폰 세로 ~480px

스마트폰 가로 , 태블릿 : 481~768px

태블릿 가로 , 노트북 : 769px ~1279px

데스크탑 1280px ~ 

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (min-width:1024px) and (max-width:1279px) {...} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {...} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {...} 

/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {...}

 

 

(2) 미디어타입 

all	모든 타입
print	프린터
screen	zjavbxj ghkaus
스크린 리더	speech

 

(3) 가로형 세로형 

@media (orientation: portrait) {...세로형...}
@media (orientation: landscape) {...가로형...}

@media (min-width: 700px) and (orientation: portrait) { …세로형일경우 }

 

 

 

참고 https://uxkm.io/publishing/css/03-cssMiddleclass/09-css_media_part1#gsc.tab=0