반응형 웹에 필요한 4가지 기본 개념 🍎 가변 그리드 Fluid Layout / Flexible Layout / Flexible Grid 반응형은 px로 작업할 수 없다. 대신 퍼센트(%)로 작업해야한다. 퍼센트(%)로 작업해야지 가변 폭에 따라 내용들도 가변적으로 늘어났다 줄어들었다 할 수 있다. 💡 가변, 가변적이다 "어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것" 💡 그리드, 그리드 작업 그리드란 격자, 눈금을 말함 웹 디자인에서는 웹페이지의 가로크기, 세로크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용 🍎 미디어쿼리 & 뷰포트 퍼센트로만 css를 작업한다고해서 반응형 웹이 되는 것은 아니다. 비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조..

Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 미디어 쿼리 사용법 /* 미디어쿼리 구문은 대소문자 구별 X */ @media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) { CSS 작성... } 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 not tv : tv를 제외한 모든 미디어 유형에만 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함 [media type] screen (화면대상) tv (티비) print (인쇄물) all (모든 디바이스 대상) projection, handheld..