Porfolio Page - (3) 반응형 웹

Index

1. 반응형 웹

2. 반응형 웹 예제

3. PWA

4. PWA 예제

5. 4

Reference

---

1. 반응형 웹

반응형 웹 디자인(Responsive Web Design)

- 반응형 웹사이트를 통해 사이즈에 따라 content가 유동적으로 변화하게 구성

- 컨테이너에 맞게 보여짐

- Fluid Layout

- flex grid / flex box / % / vw / vh로 구현

- Media Queries로 구현 가능

- Desktop(1024px~) / Tablet(768px~1024px) / Mobile(320px~480px)로 디자인

 

(사용법)

- screen 대신 all, print, speech 가능

- and 대신 not, only, comma(,) 가능

@media screen and (min-width: 800px) {
  css 문법
}

 

 

2. 반응형 웹 예제

 

 

3.  PWA

PWA(Progessive Web App)

 

 

4. PWA 예시

 

 

5. 

 

 

---

Reference

[Video: 드림코딩(반응형 웹)] https://www.youtube.com/watch?v=8-uJ_4136uI

[Video: 드림코딩(PWA 개념과 따라만들기)] https://www.youtube.com/watch?v=FEBkne7Nyu4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=27