반응형
모바일 웹, details 태그 예제
모바일 웹 환경을 위한 설정이 적용된 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그 연습</title>
<style>
body {
font-size: 16px; /* 모바일 웹 기본 폰트 크기 설정 */
}
pre {
white-space: pre-wrap;
word-break: break-all;
font-size: 1em; /* 폰트 크기를 body와 동일하게 설정 */
}
details {
margin-bottom: 1em; /* details 요소 사이에 간격 추가 */
}
summary {
font-weight: bold; /* summary 텍스트 굵게 표시 */
cursor: pointer; /* summary에 포인터 커서 표시 */
}
@media (max-width: 600px) { /* 화면 크기가 600px 이하일 때 */
body {
font-size: 14px; /* 폰트 크기 조정 */
}
}
</style>
</head>
<body>
<details>
<summary>
애국가 가사 (초기 축소형)
</summary>
<pre>
[가사 1절]
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
[가사 2절]
남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
</pre>
</details>
<details open>
<summary>
애국가 가사 (초기 확대형)
</summary>
<pre>
[가사 1절]
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
[가사 2절]
남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
</pre>
</details>
</body>
</html>
[화면] 모바일 웹 브라우저 시뮬레이션 화면
반응형
'HTML, CSS' 카테고리의 다른 글
| HTML 쿠키 저장, 읽기, 삭제 테스트 예제 (0) | 2025.01.07 |
|---|---|
| HTML, 확장/축소, <details> 태그 예제 (0) | 2024.12.20 |
| 모바일 웹 사이트 만들기 (with 피그마 & 제플린) (0) | 2024.12.19 |
| 모바일 웹 만들기 (0) | 2024.12.18 |
| 자바스크립트를 줄여야 하는 이유 (0) | 2022.06.16 |