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

팁게시판

div를 반응형으로 만들기

137 2017.06.22 06:03

별점

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

짧은주소

본문

아래를 해당페이지에서 불러들이는 css파일속에 넣어줍니다.

 

@media (min-width: 767px) { 

.okmenu {display:none;}}


​그리고 웹페이지에 모바일에서 나타낼 부분에 

 

<div class="okmenu"> 들어갈 내용 </div> 

 

을 넣어줍니다.

 

-------------------------

위 코드를 설명드리자면, 

 

(min-width: 767px) ​는 최저 767px 해상도 이상에서 { } 안의 코드를 사용하겠다는 것입니다. 

그러니까 .okmenu {display:none;} ​라는 코드를 사용하겠다는 말인데, 

그것은 아래 class="okmenu" ​를 화면에 나타내지 않겠다는 말입니다.

그러므로, 767px이상에서는 okmenu클래스가 들어가 있는 div코드를 나타내지 않겠다는 것이죠.

  

클래스명은 홈페이지에 있는 다른 클래스(class)와 겹치지 않게 자신이 원하는 클래스명으로 바꿔주시면 됩니다.

767px도 400px이하에서만 보이게 하고싶으시면 400px로 바꾸시면 됩니다.

위의 코드설명 참조하시면 CSS 초보도 가능합니다.


댓글목록

등록된 댓글이 없습니다.

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

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

알림 플러스친구 안내

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