기 타 간단히 보기 표시
2024.02.02 10:59
스마트폰에서 웹 문서를 보면
"간단히 보기 표시" 라는 것이 나타나는데...
html에서 어떤 태그 작업을 해야
위 내용과 같이 스마트폰에서
"간단히 보기 표시"가 나타날까요?
html 고수님의 가르침을 부탁드립니다.
댓글 [6]
-
아프리카태양 2024.02.02 12:04
-
아프리카태양 2024.02.02 12:04
이 코드는 미디어 쿼리(Media Query)를 사용하여 스마트폰 화면과 데스크톱 화면에 따라 다르게 보이도록 설정합니다. 스마트폰에서는 "간단히 보기 표시"가 나타나고, 데스크톱에서는 "상세 내용이 여기에 들어갑니다."가 나타납니다. 이 예제를 기반으로 필요에 맞게 내용을 수정하고 스타일을 추가하세요.
GPT가 알려준거예요
-
그루터기 2024.02.02 12:21
감사합니다.
덕분에 잘 사용하겠습니다.
-
아프리카태양 2024.02.02 12:07
소스대로 하고 해상도를 줄이니 바로 모바일 페이지가 보여지네요 good
-
그루터기 2024.02.02 12:35
그런데 너무 복잡하네요.
html 소스를 보면 어떤 이유인지는 모르지만..
태그 몇 개와 내용만 있는데, 어떤건 " 간단히 보기 표시" 나타나고
또 어떤 건 나타나지 않네요..
-
아프리카태양 2024.02.02 12:48
html에 안보이는건 이미 css에서 소스를 적어놔서 html이 간단히 보이는것같아요
번호 | 제목 | 글쓴이 | 조회 | 등록일 |
---|---|---|---|---|
[공지] | 질문과 답변 게시판 이용간 유의사항 | gooddew | - | - |
99155 | 소프트웨어| 만능윈도우 시 크롬 시작그룹 특정 페이지 또는 페이지 모... | 넥스트타인 | 88 | 02-19 |
99154 | 소프트웨어| Windows에 설치된 프로그램 복제 [5] | 삼사일언 | 219 | 02-19 |
99153 | 소프트웨어| 크롬 다운로드 히스토리 안남기는법 없나요? [4] | 컴알못러 | 347 | 02-19 |
99152 | 소프트웨어| 포토샵 실행시에.... [4] | Pureunsan | 381 | 02-19 |
99151 | 윈 도 우| 바이러스 감염 확장자에 .lkfr 로 바꼈어요! 해결 방법이 ... [4] | dansan | 641 | 02-19 |
99150 | 윈 도 우| 제어판 아이콘은 있는데 실핼이 안되네요 [5] | 깨비꼬레아 | 301 | 02-19 |
99149 | 윈 도 우| 윈도우 로그인 관련 질문입니다 [3] | asklee | 223 | 02-19 |
99148 | 윈 도 우| 크롬 탭 닫을때 왜 창이 최대화로 되나요? [1] | MSTSC | 124 | 02-19 |
99147 | 윈 도 우| 레지스트리에서 블루투스 정보 삭제가능한 방법이 없을까요? [1] | 뒤로가기 | 211 | 02-18 |
99146 | 기 타| 이 폰트 이름은 뭘까요? [2] | sorry2late | 536 | 02-18 |
99145 | 소프트웨어| 윈도우 업데이트 후 크롬 기본앱 설정이 안됩니다. | 언덕위풍차 | 131 | 02-18 |
99144 | 윈 도 우| 윈도우10 김진광 에디션 찾습니다 | damada | 377 | 02-18 |
99143 | 소프트웨어| GImageX를 이용하여 Wim파일 마운트 오류 [6] | QOR | 270 | 02-18 |
99142 | 하드웨어| 16년만여만에 컴퓨터를 바꿀려고 합니다. [16] | 감사합니다 | 1195 | 02-17 |
99141 | 소프트웨어| adobe media encoder에서 "flac" 파일을 어떻게 ... [5] | brucex | 277 | 02-17 |
99140 | 소프트웨어| 파일 수정 변환 문의 [4] | 바람구름사 | 251 | 02-17 |
99139 | 기 타| 오디오 출력표시 질문 [4] | 줄기야 | 224 | 02-17 |
99138 | 윈 도 우| 윈도우12 CPU 사양이 궁금해요 [3] | slhyou | 841 | 02-17 |
99137 | 하드웨어| 이 노트북 팔면 어느정도 받을 수 있을까요? [3] | High][Land | 614 | 02-17 |
99136 | 윈 도 우| 윈98에 있는그림판 [2] | 바람구름사 | 385 | 02-17 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단히 보기 표시 예제</title>
<style>
/* 모든 스타일은 여기에 추가됩니다. */
/* 스마트폰에서 보여질 스타일 */
@media only screen and (max-width: 600px) {
.simple-view {
display: block;
}
.detailed-view {
display: none;
}
}
/* 데스크톱에서 보여질 스타일 */
@media only screen and (min-width: 601px) {
.simple-view {
display: none;
}
.detailed-view {
display: block;
}
}
</style>
</head>
<body>
<!-- 스마트폰에서 보일 내용 -->
<div class="simple-view">
<p>간단히 보기 표시</p>
</div>
<!-- 데스크톱에서 보일 내용 -->
<div class="detailed-view">
<!-- 데스크톱에서 보여질 내용을 추가하세요. -->
<p>상세 내용이 여기에 들어갑니다.</p>
</div>
</body>
</html>