기 타 간단히 보기 표시
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 | - | - |
99271 | 소프트웨어| BCD 설정에서 특정 부팅 항목 숨기기 [4] | 민트러브 | 201 | 03-03 |
99270 | 소프트웨어| PC용 무료 게임 찾습니다 [4] | asklee | 477 | 03-03 |
99269 | 기 타| 배경화면 글쓰기 예쁘게 안되서 부탁 드립니다 [6] | 수리수리 | 454 | 03-03 |
99268 | 윈 도 우| 왕**님 WimLib BR Simple(M) v3.0---------winpeboot부팅 [7] | 수리수리 | 275 | 03-03 |
99267 | 윈 도 우| pe 끌어서 부팅 배치파일 [3] | 수리수리 | 340 | 03-03 |
99266 | 기 타| 원본 대상 파일 이름 변경...도움을 청합니다. [6] | 메인보드 | 219 | 03-03 |
99265 | 기 타| 학생용 노트북 신기한 세팅입니다 [7] | 손쵸쵸쵸 | 896 | 03-02 |
99264 | 윈 도 우| 이거 버그인가요? [2] | 오늘도시작 | 331 | 03-02 |
99263 | 하드웨어| kt공유기 2대 연결할려면여~~ [5] | 알겠습니다 | 666 | 03-02 |
99262 | 윈 도 우| VHDMAN에서 자식 생성 후 BCD 등록과 관련해서 문의드립니다 [4] | 민트러브 | 213 | 03-02 |
99261 | 하드웨어| z97 보드 추천 [2] | tinsy | 344 | 03-02 |
99260 | 기 타| 최근 Youtube 재생 시 플렛폼 [2] | 쟁고 | 288 | 03-02 |
99259 | 소프트웨어| 포토샵 질문 드립니다. [4] | 예스어데이 | 345 | 03-02 |
99258 | 윈 도 우| C드라이브 캡쳐 백업에 대한 문의입니다, [10] | 좋은데이 | 335 | 03-01 |
99257 | 윈 도 우| ko_windows_7_ultimate_IE11_201512_x86x64_Lite_k1111 이 ... [2] | nuli | 632 | 03-01 |
99256 | 윈 도 우| 갑자기 사이트 접속불량이요 [2] | 세븐좋아 | 376 | 03-01 |
99255 | 기 타| 이자료의 주인님은 누구신가요? [2] | 사랑해요™ | 757 | 03-01 |
99254 | 소프트웨어| 크롬 백업 방법좀 [2] | 넥스트타인 | 315 | 03-01 |
99253 | 윈 도 우| Windows11 Pro.VHD확장 문의 [5] | 햇님 | 262 | 03-01 |
99252 | 하드웨어| 게이밍 노트북 살려는데요 [3] | High][Land | 249 | 03-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>