반응형
화면 크기에 따라 반응형 디자인을 적용한 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>반응형 디자인</title>
<style>
/* 화면 크기에 따른 스타일 변경 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>반응형 디자인</h1>
<!-- 내용 표시 -->
<p>화면 크기에 따라 배경 색상이 변경됩니다.</p>
</body>
</html>
이 코드는 화면 크기가 600px 미만인 경우와 601px 이상인 경우에 따라 배경 색상을 변경합니다. 화면을 줄이거나 늘려보면 배경 색상이 변화하는 것을 확인할 수 있습니다.
결과 보기
창을 줄이면 아래처럼 색깔이 바뀔겁니다.
반응형
'HTML 예제' 카테고리의 다른 글
| 마우스 오버 이벤트 (0) | 2023.12.07 |
|---|---|
| 사진 갤러리 만들기 (0) | 2023.12.07 |
| 간단한 게시판 형식 (0) | 2023.12.07 |
| 날짜 및 시간 표시 (0) | 2023.12.07 |
| 다크 모드 토글 (0) | 2023.12.07 |
