기 타 간단히 보기 표시
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 | - | - |
| 99367 | 윈 도 우| arm 윈도우10/11 튜닝 버젼 한글화된게있을까요? [1] | MSTSC | 131 | 09-29 |
| 99366 | 소프트웨어| 윈도우 업데이트 후 크롬 기본앱 설정이 안됩니다. | 언덕위풍차 | 131 | 02-18 |
| 99365 | 하드웨어| [notebook] Legion 7 모듈 방열판 질문 | XCOPY | 131 | 04-30 |
| 99364 | 기 타| 스마트폰 윈포접속시 메뉴 안보입니다 [5] | 서기다 | 132 | 09-08 |
| 99363 | 소프트웨어| 스트리밍 서버 부하 테스트 툴? | 토르망치 | 132 | 10-08 |
| 99362 | 윈 도 우| PE 빌드 관련하여 질문 드립니다 | 싸마구 | 132 | 10-25 |
| 99361 | 윈 도 우| 윈도우 메일이 자동 받기가 안됩니다. [1] | tuyyo | 132 | 04-29 |
| 99360 | 하드웨어| ups 관련하여 문의드립니다. [1] | 윈포우도럼 | 132 | 07-22 |
| 99359 | 서버 / IT| xampp를 설치해서 phpmyadmin을 열었는데, 문제가 있습니다. [2] | brucex | 132 | 08-13 |
| 99358 | 윈 도 우| pe 이미지에 3dp에서 추출한 드라이버들 심을 수 있을까요? | 아름드리나 | 132 | 06-24 |
| 99357 | 윈 도 우| 방화벽 설정 여쭤요 [2] | 뷰리풀투데 | 132 | 09-28 |
| 99356 | 하드웨어| 샌디시절 놋북의 rgb출력 해상도 문의드립니다 [1] | SummerSnow | 132 | 01-29 |
| 99355 | 윈 도 우| 오랜만에 unattend 파일 질문입니다 | 고양이뜰채 | 132 | 05-27 |
| 99354 | 윈 도 우| cmd에서 tasklist의 pid를 파싱하려면 어떻게해야 될까요? [3] | 감기걸렸어 | 132 | 02-26 |
| 99353 | 기 타| 드래그로 사이트 바로 열기 질문 | rthgh | 132 | 04-03 |
| 99352 | 윈 도 우| 언어추가 오류 | 도파니 | 132 | 09-24 |
| 99351 | 윈 도 우| PDF 파일 다운로드 오류 문의 [1] | 강남역5번 | 132 | 12-14 |
| 99350 | 윈 도 우| 홈페이지+어플 기획 업체 추천 요청 [1] | skecjac | 133 | 06-16 |
| 99349 | 윈 도 우| esd decrypt하기 [2] | Dr.Nick | 133 | 11-25 |
| 99348 | 윈 도 우| 1909 서비스스택 관련입니다. [3] | 타임머신 | 133 | 08-09 |
<!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>