반응형
사진 갤러리를 만드는 간단한 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>사진 갤러리</title>
<style>
/* 갤러리 스타일 */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>사진 갤러리</h1>
<!-- 사진 갤러리 -->
<div class="gallery">
<img src="img1.jpg" alt="사진 1">
<img src="img2.jpg" alt="사진 2">
<img src="img3.jpg" alt="사진 3">
<!-- 필요한 만큼 사진 추가 -->
</div>
</body>
</html>
결과보기
아래 갤러리 처럼 볼수 있습니다.
반응형
'HTML 예제' 카테고리의 다른 글
| 사용자 입력을 그래프로 표시 (0) | 2023.12.07 |
|---|---|
| 마우스 오버 이벤트 (0) | 2023.12.07 |
| 화면 크기에 따른 반응형 디자인 (0) | 2023.12.07 |
| 간단한 게시판 형식 (0) | 2023.12.07 |
| 날짜 및 시간 표시 (0) | 2023.12.07 |
