기 타 간단히 보기 표시
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 | - | - |
99570 | 윈 도 우| Win11 Wifi 266mb ToolsBR v3.0 PE 수정 질문 입니다 [1] | 지룡자 | 234 | 04-04 |
99569 | 윈 도 우| 윈도우 11 재설치 정품인증 관련 [6] | 라팔 | 847 | 04-03 |
99568 | 소프트웨어| 연구 용도의 CD가 필요합니다. [4] | Niconii | 746 | 04-03 |
99567 | 하드웨어| MSI G274QPF 27인치 모니터를 구입했는데 느낌이 좋습니다 [1] | joe | 381 | 04-03 |
99566 | 윈 도 우| 윈도우즈 업데이트 관련 문의 [2] | joyleehk | 345 | 04-03 |
99565 | 하드웨어| RX570에서 4K 동영상 잘 돌아가나요? [3] | toto65 | 434 | 04-03 |
99564 | 기 타| 오피스2021 설치시 팀즈 제외설치 하는 설정 문의드립니다 [2] | 수리수리 | 297 | 04-03 |
99563 | 윈 도 우| ventoy iso파일 부팅문제 [4] | 마로94 | 328 | 04-03 |
99562 | 윈 도 우| 윈도우에서 레이드0으로 쓰고 싶습니다.. [2] | BSD | 252 | 04-03 |
99561 | 윈 도 우| 윈도우11 부팅 로그인할때 지문/암호 없이 그냥 로그인 됩... [2] | 쭈니아범 | 281 | 04-03 |
99560 | 기 타| 벤토이 오류? not a secure boot platform 14 [4] | 소나무_뿌 | 429 | 04-03 |
99559 | 윈 도 우| uefi 멀티부팅 복제 질문입니다. [4] | 양치기영감 | 272 | 04-03 |
99558 | 윈 도 우| 벤토이 부팅 질문 드립니다 [2] | 마로94 | 411 | 04-02 |
99557 | 소프트웨어| 갑자기 이럽니다. 넘 짜증이 나서... [2] | 맨션에살자 | 731 | 04-02 |
99556 | 소프트웨어| Trueimage 파일을 구합니다, [1] | 좋은데이 | 352 | 04-02 |
99555 | 모 바 일| 태블릿을 중고로 살 때 호갱당하지 않으려면 어떤 부분을 ... [5] | feynman | 385 | 04-02 |
99554 | 윈 도 우| Kms인증 [6] | 양말 | 1321 | 04-02 |
99553 | 하드웨어| amd cpu vs intel cpu 이 성능차이 맞는건가요?? [7] | COM메니아 | 494 | 04-02 |
99552 | 윈 도 우| 봉인 이후 자꾸 사진, 계산기가 사라집니다 살려주세요 [7] | 판타즈마 | 434 | 04-02 |
99551 | 하드웨어| Nvme 질문있습니다. [4] | 양치기영감 | 411 | 04-02 |
<!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>