[HTML] 5. 간단한 사진 갤러리 만들기

Mar 06, 2025

Contents


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>사진 갤러리</h1>
    <hr><!--가로줄-->
    <div>
        <img src="/ch01/lion.png" width="300px" height="300px">
    </div>
    <div>
        <img src="/ch01/lion.png" width="300px" height="300px">
    </div>
</body>
</html>

설명

💡

✅ <h1> → 페이지 제목 (사진 갤러리)

✅ <hr> → 제목 아래에 가로줄 추가

✅ <div> → 개별 이미지를 감싸는 컨테이너 역할

✅ <img> → 사자(lion.png) 이미지 추가 (300x300px 크기)

HTML

[HTML] 5. 간단한 사진 갤러리 만들기

백하림

Mar 06, 2025

Contents

설명


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>사진 갤러리</h1>
    <hr><!--가로줄-->
    <div>
        <img src="/ch01/lion.png" width="300px" height="300px">
    </div>
    <div>
        <img src="/ch01/lion.png" width="300px" height="300px">
    </div>
</body>
</html>

설명

💡

✅ <h1> → 페이지 제목 (사진 갤러리)

✅ <hr> → 제목 아래에 가로줄 추가

✅ <div> → 개별 이미지를 감싸는 컨테이너 역할

✅ <img> → 사자(lion.png) 이미지 추가 (300x300px 크기)