식초의 지식보관소

미디어 쿼리란? -사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다 -접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다 미디어 쿼리 구문 @media |not |only| screen |and (min-width: 200px)| { } 연산자 and : 조건을 추가한다 only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not : 다음에 나오는 미디어 유형 제외 , : 동일한 스타일 유형을 사용할 때 쉼표 사용 미디어 유형 all : 모든 미디어 print : 인쇄 장치 screen : 컴퓨터, 스마트폰 tv aural : 화면을 읽어 소리로 출력 braille : 점자 tty embossed 미디어 쿼리 조건 1. 웹 문서의 가로 너비, 세로 높..

반응형 웹 디자인 -스마트폰, 태블릿, 스마트TV 등 브라우저 환경이 다양해짐 > 다양한 크기에 맞게 웹사이트 표시하는 방법 -화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현한다 ~장점 : 사이트 1개만 만들면 모든 기기에서 사용가능, 가로모드 가능, 사이트 유지 관리 편함 뷰포트 -뷰포트 = 스마트폰 화면에서 실제 내용이 표시되는 영역 -뷰포트 사용하면 접속한 기기 화면에 맞추어 확대, 축소해 표시하는 것이다 -pc화면과 모바일 화면의 픽셀 표현 방법이 다르다 -스마트폰 브라우저 : 웹키트 엔진을 기반으로 한다, 뷰포트 너비 980px 뷰포트 지정하기 ~가장 많이 사용하는 형태 content 속성 width : 뷰포트 너비 ~속성값: device-width | 크기 height : 뷰포..