• 북마크
  • 접속자 5
  • FAQ
  • 1:1문의
  • 새글

팁게시판

반응형이 가능하기 위해 필요한 기법들

220 2017.06.22 06:06

별점

  • - 별점통계:
  • - 평점 : 0점 (0명 참여)

짧은주소

본문

반응형 웹 기법들

CSS3 미디어 쿼리 (media query)

CSS3 이전에서 ‘print’, ‘screen’ 등 미디어 타입등을 사용하던 것을, CSS3에서는 스크린 폭/높이 등 (예: min-width: 320px) 디바이스관련 여러 정보를 이용하여 스타일을 바꿀 수 있게 되었습니다.  사실상 반응형 웹이 가능하게 된 큰 이유이기도 합니다.

유동형 그리드 (fluid grids)

반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리, EM등이 제안하는 유동형 그리드는, 고정된 px이 아닌 em이나 %를 사용하는 것 입니다. 또한, 반응형 유동형그리드라고 제안되는 경우, CSS3 미디어쿼리를 이용하여 특정 스크린에 따라서 그리드 시스템을 바꿀 수 있습니다.

유동형 이미지 (fluid/flexible images)

유동형 그리드와 마찬가지로, 고정된 px이 아닌 em과 %를 이용하는 접근방법으로, 특히 이 경우, max-width를 사용하고, 이를 처리하지 못하는 IE7-의 경우 적절한 javascript를 사용하는 것을 의미합니다.

반응형 레이아웃 (responsive layouts)

아직 통용되는 단어는 아니지만, 결국 반응형 웹을 완성하기 위해서는 반응형 레이아웃을 구현해야 합니다. 그렇지 않다면, 스크린별 레이아웃을, 수많은 if-and-else로 나누어서 브라우져에 보내줘야 하는 일이 발생합니다.

반응형 네이게이션/메뉴

모바일에서 메뉴를 어떻게 (줄여서) 보여줄것인지도 고민해야 합니다. 많은 경우, 내림버턴 등을 이용해서 필요할 때만 보이게 합니다.

 

 

내용출처: sir.kr

댓글목록

등록된 댓글이 없습니다.

댓글쓰기
Note: 댓글은 자신을 나타내는 얼굴입니다. 무분별한 댓글, 욕설, 비방 등을 삼가하여 주세요.
자동등록방지 숫자를 순서대로 입력하세요.

알림 1:1 문의 및 제작상담 안내

알림 플러스친구 안내

사이트 통계
  • 오늘방문자 : 574
  • 어제방문자 : 1,418
  • 최대방문자 : 2,185
  • 전체방문자 : 1,295,248
  • 신규회원수 : 27
  • 전체회원수 : 28,522