[CSS] 화면 스크린 크기에 따라 표시 / 숨김 > 기술자료 | 해피정닷컴

[CSS] 화면 스크린 크기에 따라 표시 / 숨김 > 기술자료

본문 바로가기

사이트 내 전체검색

[CSS] 화면 스크린 크기에 따라 표시 / 숨김 > 기술자료

HTML [CSS] 화면 스크린 크기에 따라 표시 / 숨김

페이지 정보


본문

화면 스크린 크기에 따라 표시 / 숨김 - 반응형 테마에서 모바일 데스크탑에서만 보이게 / 안보이게


1. 화면 사이즈가 450px 이하일 때만 보이는 코드

/* 화면 사이즈가 450px 이하일 때만 표시 */
@media screen and (min-width: 450px) {
    #HTML {display:none;}
}

/* 화면 사이즈가 999px 이상일 때만 표시 */
@media screen and (max-width: 999px) {
    #HTML {display:none;}
}
 


2. 접속하는 화면 크기에 따라, 보여줄 내용을 각각 다르게

(1) CSS 내용

/* 접속하는 화면 크기에 따라 표시/숨김을 제어 */
/* 640보다 작을경우 */
@media all and (max-width: 639px) {
    .SizeVisibleClass .ViWidthS{display:block;}
    .SizeVisibleClass .ViWidthM{display:none;}
    .SizeVisibleClass .ViWidthL{display:none;}
}
/*  640보다 크고 1200보다 작을경우  */
@media all and (min-width: 640px) and (max-width: 1200px) {
    .SizeVisibleClass .ViWidthS{display:none;}
    .SizeVisibleClass .ViWidthM{display:block;}
    .SizeVisibleClass .ViWidthL{display:none;}
}
/* 1024 이상 경우 */
@media all and (min-width: 1024px) {
    .SizeVisibleClass .ViWidthS{display:none;}
    .SizeVisibleClass .ViWidthM{display:none;}
    .SizeVisibleClass .ViWidthL{display:block;}
}


(2) HTML 내용
<div class="SizeVisibleClass">
    <div class="ViWidthL">데스크탑과 같은 큰 스크린으로 접속시 보여줄 내용</div>
    <div class="ViWidthM">타블렛과 같은 중간 크기 스크린으로 접속시 보여줄 내용</div>
    <div class="ViWidthS">스마트폰 같은 작은 크기 스크린으로 접속시 보여줄 내용</div>
</div>

 

댓글목록

등록된 댓글이 없습니다.


Total 200건 1 페이지
  • RSS
기술자료 목록
200
HTML   4477  2023-04-07 09:52 ~ 2023-04-07 09:59  
열람
HTML   3555  2023-02-02 13:54 ~ 2023-02-03 06:02  
198
HTML   4593  2022-01-30 10:50 ~ 2022-01-30 22:56  
197
HTML   8712  2021-11-18 16:00  
196
HTML   5188  2021-07-07 15:48 ~ 2021-07-07 15:51  
195
HTML   6782  2021-06-02 17:15 ~ 2021-06-02 17:15  
194
HTML   5129  2020-12-20 11:42  
193
HTML   5598  2020-09-08 23:42 ~ 2020-09-08 23:53  
192
HTML   5941  2020-06-07 18:40  
191
HTML   5902  2020-06-07 16:04 ~ 2020-12-12 09:09  
190
HTML   16238  2020-03-25 18:44 ~ 2021-09-23 18:51  
189
HTML   8140  2019-12-16 12:13 ~ 2019-12-16 12:46  
188
HTML   8925  2019-10-25 18:48 ~ 2019-10-25 18:49  
187
HTML   6906  2019-09-27 14:07 ~ 2019-09-27 14:08  
186
HTML   5326  2019-09-16 12:20  
185
HTML   5030  2019-08-11 13:03  
184
HTML   7025  2019-07-15 18:13 ~ 2019-07-15 22:48  
183
HTML   6363  2019-04-16 11:40  
182
HTML   12516  2019-04-02 00:12 ~ 2019-04-02 01:17  
181
HTML   17215  2019-01-11 23:20 ~ 2019-01-11 23:24  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.