기 타 간단히 보기 표시
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 | - | - |
| 98991 | 하드웨어| 테블릿을 외장하드에 바로 연결해서 쓸수 있나여? [5] | High][Land | 288 | 02-03 |
| 98990 | 윈 도 우| 계정관리 문의 [3] | 가장자리 | 213 | 02-03 |
| 98989 | 하드웨어| SSD 사용량 질문입니다 [8] | 열린하늘 | 488 | 02-03 |
| 98988 | 기 타| 파폭 부가기능 xpi 수정 방법 | 달그림 | 193 | 02-03 |
| 98987 | 윈 도 우| BIOS 나 UEFI 의 설정정보가 내장디스크에 기록될 수 있나요? [4] | ton3d | 506 | 02-02 |
| 98986 | 윈 도 우| 탐색기 mp3만 썸네일이 안보여요 도와주세요~ [10] | JayJ | 303 | 02-02 |
| 98985 | 윈 도 우| IFEX 명령문에 관한 문의 [6] | 동백66 | 183 | 02-02 |
| 98984 | 소프트웨어| 한컴 재설치 질문입니다. [5] | 파풍초 | 792 | 02-02 |
| 98983 | 윈 도 우| 윈도우 기간 을 리셋 하는방법 | jgbyuk | 563 | 02-02 |
| » | 기 타| 간단히 보기 표시 [6] | 그루터기 | 413 | 02-02 |
| 98981 | 윈 도 우| 윈도우10 LSTC도 21H2 에서 22H2 로 업그레이드가 되나요? [8] | MSTSC | 702 | 02-02 |
| 98980 | 윈 도 우| 윈도우 서버 2012 한글 언어팩 [5] | jgbyuk | 247 | 02-02 |
| 98979 | 윈 도 우| win10 랜카드 드라이버 통합 [3] | 수리수리 | 396 | 02-02 |
| 98978 | 소프트웨어| YouTube는 1분 이동, 5분 이동 단축키가 없는 것 같은데 [7] | Abundance | 403 | 02-02 |
| 98977 | 소프트웨어| 프리미어 프로의 기본 저장 경로 위치 바꾸기 [1] | brucex | 364 | 02-01 |
| 98976 | 윈 도 우| 윈11유저분들 우클릭메뉴 순정상태로 쓰시나요? [9] | chrome' | 582 | 02-01 |
| 98975 | 소프트웨어| 크롬 최근 업데이트이후에 화면깜빡임 문제에 대 해서 | shy1911 | 292 | 02-01 |
| 98974 | 윈 도 우| 바탕화면에서 파일이름 변경시 위치 강제 이동 | Amattare | 492 | 02-01 |
| 98973 | 윈 도 우| 다른 드라이브에 윈도우 인플레이스 설치 하는방법이 있을... [1] | 다이키리 | 243 | 02-01 |
| 98972 | 윈 도 우| 읜도우 시스템 앱 삭제 하는 방법이 궁금합니다 [8] | Leaaaa | 354 | 02-01 |
<!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>