반응형 웹2 반응형 웹에서의 자바스크립트를 반응형으로 사용하기 반응형 웹을 만들기 위해서 CSS3 미디어 쿼리를 이용하여 화면 크기에 따라 적용하는 스타일을 달리하는 방법은 "반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)" 에서 알아 보았었습니다. 화면 크기에 따라 스타일 시트를 변경하여 페이지내의 요소들의 사이즈를 늘리고 줄이거나, 위치를 변경하고, 보이거나 감추거나 하는 작업을 할 수 있습니다. 원하는 디자인이 이러한 것들 뿐만 아니라 제목의 길이를 줄이거나, 이미지를 교체하거나, 특정 요소를 클릭했을 때의 동작을 변경하거나 하는것이 필요하다면 CSS만으로는 구현하기가 힘듭니다. PC에서 보여줄 것과 휴대기기에서 보여줄것을 따로 만들고, 각각에 필요한 이벤트를 자바스크립트로 구현한 후 화면 크기에 따라 숨기거나 보여주는 CSS를 이용해서.. 2018. 4. 9. 반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries) 미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다. 미디어 쿼리는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러옵니다. media속성의 "screen and (max-width: 768px)"의 의미는 미디어 .. 2018. 4. 9. 이전 1 다음
