반응형 웹디자인 | HTML, CSS 반응형 정리 #4

반응형 웹디자인

다양한 사이즈의 테블릿과 핸드폰에서 웹사이트을 이용할 때 유용

반응형으로 웹사이트를 만들면 사이즈에 따라 컨텐츠들이 유동적으로 변함

Content is like water

컨텐츠를 물과같이 유동적으로 만들어라!

어떤 컨테이너에 담기든지 상관없이 컨텐츠가 잘 보여져야한다.

유동적이기 위해 요즘은 고정적인 px 대신 Flex grid, Flex box, %, vw, vh 사용

컨텐츠가 자동적으로 늘어나거나 줄어듦.

but

어느 수준 이상으로 줄어들면 레이아웃 재배치됨.

데스크탑: 3개 feature

tablet: 2개 컨텐츠

mobile: 1개 컨텐츠

강조하고자 하는 내용을 위로 배치 // 유동적

@media 스크린이 min-width 최소의 너비가 800px이면 (적어도 800) 컨테이너가 50%차지

자세한 내용은 mdn 웹사이트에서 beginner's guide to media queries 확인

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

developer.mozilla.org

반응형 웹디자인 \| CSS 반응형 유닛 정리 #5 (0)	2021.04.19
CSS Flexbox 완전 정리 #3 (0)	2021.04.14
CSS 레이아웃 정리 display, position 완성 #2 (0)	2021.04.14
CSS 셀렉터 #1 (0)	2021.04.14
HTML 태그 완성 (0)	2021.04.14

Pomaika'i