웹4 - 3강 (6.14)

[반응형과 고정형]

반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.
반응형 사이트는  특정한 상황을 제외하고 대부분 %로 구현된다.

 

 

[앱과 반응형 사이트]

앱은 플레이스토어에서 판매하는 상품이고반응형 사이트는 플랫폼에서 판매하는 앱이 아닌
url 주소로 접속하는 모바일 기기에 반응할 수 있는 사이트이다.

즉, 앱은 설치를 해야하고 반응형 사이트는 웹페이지이지만 모바일에서도 사용할 수 있도록 만든 것.

이 두가지는 개발되는 방식이 완전히 다르다.

 

 

[반응형 이미지]

https://codepen.io/kkkge/pen/PovOVBW

6.14 반응형 이미지

 

 

[높이가 고정된 반응형 이미지]

https://codepen.io/kkkge/pen/VwOrgoa

6.14 높이가 고정된 반응형 이미지

 

 

[미디어 쿼리]

https://codepen.io/kkkge/pen/LYoOaZN

6.14 미디어 쿼리

 

 

[max-width 주의사항과 해결방법]

https://codepen.io/kkkge/pen/OJYOqgv

6.14 max-width 주의사항과 해결방법

 

 

[원하는 느낌]

이미지

 

분위기 참고 -  https://www.gdweb.co.kr/sub/view.asp?displayrow=60&Txt_key=all&Txt_word=&Txt_agnumber=&Txt_fgbn=5&Txt_bcode1=&Txt_gbflag=&Txt_bcode2=&Txt_bcode3=&Txt_bcode4=050610001&Txt_bcode5=&Page=1&str_no=22084

분위기+ 모션위주 참고 - https://www.gdweb.co.kr/sub/view.asp?displayrow=60&Txt_key=all&Txt_word=&Txt_agnumber=&Txt_fgbn=5&Txt_bcode1=&Txt_gbflag=&Txt_bcode2=&Txt_bcode3=&Txt_bcode4=050610001&Txt_bcode5=&Page=1&str_no=22084