Post

[CSS] CSS 효과

CSS2에서 CSS3로 넘어오면서 포토샵이나 Flash를 활용해야만 했던 효과들이 CSS만으로 구현 가능하게 되었습니다. 이 포스팅에서는 새로 추가된 효과 중에서 널리 사용되는 속성들을 모아봤습니다.

Posted
Preview Image
By
25 min read
[CSS] CSS 효과

CSS 효과

CSS3가 등장하면서, 과거에는 포토샵이나 Flash를 사용해야만 가능했던 다양한 시각적 효과들을 이제는 CSS만으로도 쉽게 구현할 수 있게 되었습니다. 이 문서에서는 CSS3의 새로운 기능 중에서 가장 널리 사용되고 실용적인 효과들을 중심으로 교안을 재구성했습니다. 각 섹션은 이론 설명과 함께 직접 실행해볼 수 있는 실습 예제로 구성되어 있습니다.

#01. 박스 모서리 및 그림자 효과

CSS를 사용하면 박스(box) 요소의 모서리를 부드럽게 둥글리거나, 입체감을 주는 그림자 효과를 쉽게 추가할 수 있습니다. 이러한 효과들은 웹 페이지의 디자인을 한층 더 세련되게 만들어 줍니다.

1) 이론 및 핵심 개념

border-radius

  • 설명: 박스의 각 모서리를 둥글게 만듭니다. 값을 하나만 지정하면 네 모서리에 모두 적용되고, 2~4개의 값을 지정하면 특정 모서리에만 다른 값을 적용할 수 있습니다.
  • 주요 값:
    • border-radius: 20px;: 모든 모서리를 20px만큼 둥글게 만듭니다.
    • border-radius: 20px 0 20px 0;: 좌측 상단과 우측 하단 모서리만 20px만큼 둥글게 만듭니다.
    • border-top-left-radius: 20px;: 좌측 상단 모서리만 개별적으로 지정할 수도 있습니다.

box-shadow

  • 설명: 박스에 그림자 효과를 적용합니다. inset 키워드를 사용하면 박스 안쪽으로 그림자를 만들 수 있습니다. 쉼표(,)로 구분하여 여러 그림자 효과를 중첩할 수도 있습니다.
  • 문법: box-shadow: [inset] x-offset y-offset blur-radius color;
    • x-offset: 그림자의 수평 거리 (양수: 오른쪽, 음수: 왼쪽)
    • y-offset: 그림자의 수직 거리 (양수: 아래, 음수: 위)
    • blur-radius: 그림자의 번짐 정도. 값이 클수록 부드럽게 퍼집니다.
    • color: 그림자 색상. rgba()를 사용하면 투명도를 조절할 수 있습니다.

2) 실습 예제

아래 예제는 세 개의 박스를 통해 border-radius와 box-shadow의 다양한 조합을 보여줍니다.

  • 박스 1: 모든 모서리를 둥글게 하고, 바깥쪽에 부드러운 그림자를 적용했습니다.
  • 박스 2: 우측 상단과 좌측 하단 모서리만 둥글게 하고, 안쪽에 그림자를 적용했습니다.
  • 박스 3: 모서리 둥글기와 함께, 바깥쪽 그림자와 안쪽 그림자를 모두 적용하여 입체감을 더했습니다.

실습: 01-corner-shadow.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-corner-shadow</title>
    <style type="text/css">
        .box {
            background-color: #6bb2ff;
            height: 100px;
            width: 80%;
            padding: 10px;
            margin-bottom: 20px; /* 박스 간 간격 추가 */
        }

        /* 모든 모서리를 둥글게, 바깥쪽 그림자 */
        .corner1 {
            border-radius: 20px;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
        }

        /* 특정 모서리만 둥글게, 안쪽 그림자 */
        .corner2 {
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);
        }

        /* 모서리 부분 적용 및 그림자 중첩 */
        .corner3 {
            border-radius: 20px 0 20px 0;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5),
                inset 3px 3px 5px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <section>
        <p class="box corner1">박스1</p>
        <p class="box corner2">박스2</p>
        <p class="box corner3">박스3</p>
    </section>
</body>
</html>

#02. 이미지 효과

CSS를 이용하면 이미지에도 그림자를 넣거나, 원 모양으로 자르는 등 다양한 효과를 적용할 수 있습니다. 또한, object-fit 속성을 사용해 이미지의 크기 조절 방식을 제어하여 레이아웃이 깨지는 것을 방지할 수 있습니다.

1) 이론 및 핵심 개념

이미지에 box-shadow 및 border-radius 적용

  • box-shadow는 이미지에도 박스와 동일하게 적용되어 입체감을 줍니다.
  • border-radius: 50%;를 이미지에 적용하면 완벽한 원 모양의 이미지를 만들 수 있습니다. 프로필 사진 등에 자주 사용되는 기법입니다.

object-fit

  • 설명: <img>나 <video> 같은 대체 요소의 콘텐츠가 주어진 공간에 어떻게 맞춰질지를 결정합니다. 이미지의 비율을 유지하면서 컨테이너에 맞추고 싶을 때 매우 유용합니다.
  • 주요 값:
    • fill: 기본값. 이미지 비율을 무시하고 컨테이너를 가득 채웁니다. 이미지가 왜곡될 수 있습니다.
    • contain: 이미지 비율을 유지하면서 컨테이너 안에 완전히 보이도록 크기를 조절합니다. 컨테이너와 비율이 다르면 여백이 생깁니다.
    • cover: 이미지 비율을 유지하면서 컨테이너를 완전히 덮도록 크기를 조절합니다. 컨테이너와 비율이 다르면 이미지 일부가 잘려나갈 수 있습니다.
    • none: 이미지 크기를 조절하지 않고 원본 크기 그대로 표시합니다.
    • scale-down: none과 contain 중에서 이미지가 더 작게 표시되는 값을 선택합니다.

2) 실습 예제

이 예제는 이미지에 그림자와 원형 효과를 적용하는 방법, 그리고 object-fit의 각 값들이 이미지를 어떻게 다르게 표시하는지를 보여줍니다.

실습: 02-Image효과.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-Image효과</title>
    <style type="text/css">
        img {
            width: 250px;
            height: 250px;
            margin: 10px;
        }
        .img-shadow {
            box-shadow: 7px 7px 12px #000;
        }
        .img-circle {
            border-radius: 50%;
        }

        /* object-fit 예제를 위한 스타일 */
        .img-default {
            width: 320px;
            height: 160px;
            border: 3px solid red;
            background-color: #eee; /* 여백 확인을 위한 배경색 */
        }
        .fill { object-fit: fill; }
        .cover { object-fit: cover; }
        .contain { object-fit: contain; }
        .none { object-fit: none; }
        .scale-down { object-fit: scale-down; }
    </style>
</head>
<body>
    <h1>기본 효과</h1>
    <img src="img/spring.jpg" title="기본" />
    <img src="img/summer.jpg" class="img-shadow" title="그림자" />
    <img src="img/autumn.jpg" class="img-circle" title="원형" />
    <img src="img/winter.jpg" class="img-circle img-shadow" title="원형 + 그림자" />

    <h1>Object-fit 속성</h1>
    <div><p>default (fill)</p><img src="img/ship.png" class="img-default" /></div>
    <div><p>object-fit: fill</p><img src="img/ship.png" class="img-default fill" /></div>
    <div><p>object-fit: cover</p><img src="img/ship.png" class="img-default cover" /></div>
    <div><p>object-fit: contain</p><img src="img/ship.png" class="img-default contain" /></div>
    <div><p>object-fit: none</p><img src="img/ship.png" class="img-default none" /></div>
    <div><p>object-fit: scale-down</p><img src="img/ship.png" class="img-default scale-down" /></div>
</body>
</html>

#03. 투명도 효과 (Opacity)

opacity 속성을 사용하면 어떤 요소든 투명하게 만들 수 있습니다. 이 속성은 사용자와의 상호작용(예: 마우스 호버)에 따라 요소를 서서히 나타나거나 사라지게 만드는 데 자주 활용됩니다.

1) 이론 및 핵심 개념

opacity

  • 설명: 요소의 투명도를 조절합니다. 값은 0.0(완전 투명)부터 1.0(완전 불투명) 사이의 숫자로 지정합니다.
  • 예시:
    • opacity: 0;: 요소를 보이지 않게 만듭니다. (공간은 차지함)
    • opacity: 0.5;: 요소를 반투명하게 만듭니다.
    • opacity: 1;: 요소를 불투명하게 만듭니다.

transition과 함께 사용하기

  • opacity는 transition 속성과 함께 사용될 때 그 진가를 발휘합니다. 예를 들어, 평소에는 반투명 상태였다가 마우스를 올렸을 때(:hover) 불투명하게 만들면, transition이 두 상태 사이의 변화를 부드러운 애니메이션으로 만들어 줍니다.

2) 실습 예제

아래 예제는 이미지에 opacity와 transition을 적용하여 마우스를 올렸을 때 이미지가 선명해지는 효과를 보여줍니다. 처음에는 이미지가 반투명 상태(opacity: 0.5)로 보이다가, 마우스를 올리면 0.3초 동안 부드럽게 불투명 상태(opacity: 1)로 전환됩니다.

실습: 03-Opacity.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-Opacity</title>
    <style type="text/css">
        figure {
            text-align: center;
        }
        figure img {
            width: 50%;
            /* 초기 상태: 반투명 */
            opacity: 0.5;
            /* 모든 속성 변화를 0.3초 동안 부드럽게 전환 */
            transition: all 0.3s;
        }
        /* 마우스를 올렸을 때의 상태: 불투명 */
        figure img:hover {
            opacity: 1;
        }
        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #555;
        }
    </style>
</head>
<body>
    <figure>
        <img src="img/spring.jpg" title="봄" />
        <figcaption>새싹이 피어나는 이른 아침</figcaption>
    </figure>
</body>
</html>

#04. 요소 변형 (Transform)

transform 속성은 CSS의 강력한 기능 중 하나로, 요소를 이동시키거나, 회전시키거나, 크기를 조절하거나, 기울이는 등 다양한 2D 및 3D 변형을 가능하게 합니다.

1) 이론 및 핵심 개념

transform

  • 설명: 하나 이상의 변형 함수를 사용하여 요소의 형태를 바꿉니다. 여러 함수를 적용할 때는 공백으로 구분하여 나열합니다.
  • 주요 함수:
    • rotate(angle): 요소를 지정된 각도만큼 회전시킵니다. (예: 45deg)
    • rotateX(angle), rotateY(angle): X축 또는 Y축을 기준으로 3D 회전시킵니다.
    • translate(x, y): 요소를 수평(x) 및 수직(y) 방향으로 이동시킵니다. (예: 50px, 50px)
    • translateX(x), translateY(y): 특정 축으로만 이동시킵니다.
    • scale(x, y): 요소의 크기를 수평(x) 및 수직(y) 방향으로 조절합니다. (예: 2, 2는 2배 확대)
    • scaleX(x), scaleY(y): 특정 축으로만 크기를 조절합니다.
    • skew(x-angle, y-angle): 요소를 수평 및 수직 방향으로 기울입니다. (예: 20deg, 20deg)
    • skewX(angle), skewY(angle): 특정 축으로만 기울입니다.

2) 실습 예제

이 예제는 transform의 다양한 함수들을 보여줍니다. 각 박스 위에 마우스를 올리면, transition 효과와 함께 해당 transform 변형이 적용되어 시각적인 변화를 확인할 수 있습니다.

실습: 04-transform.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-transform</title>
    <style type="text/css">
        body { display: flex; flex-wrap: wrap; }
        .jb-box {
            width: 150px;
            height: 150px;
            margin: 50px;
            background-color: orange;
            /* 변형 효과를 부드럽게 만듦 */
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }
        .jb-circle {
            font-size: 40px;
            font-weight: bold;
            width: 100%;
            height: 100%;
            border: 15px solid #ffffff;
            border-radius: 50%;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 각 transform 효과 */
        .trans1:hover { transform: rotate(45deg); }
        .trans2:hover { transform: rotate(-45deg); }
        .trans3:hover { transform: rotate(720deg); }
        .trans4:hover { transform: rotateX(180deg); }
        .trans5:hover { transform: rotateY(180deg); }
        .trans6:hover { transform: translate(50px, 50px); }
        .trans7:hover { transform: translateX(50px); }
        .trans8:hover { transform: translateY(50px); }
        .trans9:hover { transform: scale(1.5); } /* 1.5배 확대 */
        .trans10:hover { transform: scaleX(1.5); }
        .trans11:hover { transform: scaleY(1.5); }
        .trans12:hover { transform: skew(20deg, 20deg); }
        .trans13:hover { transform: skewX(20deg); }
        .trans14:hover { transform: skewY(20deg); }
    </style>
</head>
<body>
    <!-- 각 transform 효과를 테스트하는 박스들 -->
    <div class="jb-box trans1"><div class="jb-circle">1</div></div>
    <div class="jb-box trans2"><div class="jb-circle">2</div></div>
    <div class="jb-box trans3"><div class="jb-circle">3</div></div>
    <div class="jb-box trans4"><div class="jb-circle">4</div></div>
    <div class="jb-box trans5"><div class="jb-circle">5</div></div>
    <div class="jb-box trans6"><div class="jb-circle">6</div></div>
    <div class="jb-box trans7"><div class="jb-circle">7</div></div>
    <div class="jb-box trans8"><div class="jb-circle">8</div></div>
    <div class="jb-box trans9"><div class="jb-circle">9</div></div>
    <div class="jb-box trans10"><div class="jb-circle">10</div></div>
    <div class="jb-box trans11"><div class="jb-circle">11</div></div>
    <div class="jb-box trans12"><div class="jb-circle">12</div></div>
    <div class="jb-box trans13"><div class="jb-circle">13</div></div>
    <div class="jb-box trans14"><div class="jb-circle">14</div></div>
</body>
</html>

#05. 비디오 배경

HTML5 <video> 태그를 사용하면 웹 페이지의 배경에 동영상을 재생하여 매우 동적이고 몰입감 있는 사용자 경험을 제공할 수 있습니다.

1) 이론 및 핵심 개념

<video> 태그 속성

  • src: 비디오 파일의 경로를 지정합니다.
  • autoplay: 페이지가 로드될 때 비디오가 자동으로 재생되도록 합니다. (주의: 대부분의 최신 브라우저는 muted 속성이 함께 있어야 자동 재생을 허용합니다.)
  • muted: 비디오의 오디오를 음소거합니다. autoplay를 위해 필수적입니다.
  • loop: 비디오 재생이 끝나면 자동으로 다시 시작하도록 합니다.
  • poster: 비디오가 로드되기 전이나 재생할 수 없을 때 표시될 이미지의 경로를 지정합니다.

CSS로 비디오 배경 만들기

  1. 컨테이너 설정: 비디오를 담을 컨테이너(div)를 만들고 원하는 크기(예: width: 100%, height: 100vh)와 position: relative를 설정합니다.
  2. 비디오 스타일링: <video> 요소의 width와 height를 100%로 설정하여 컨테이너를 가득 채웁니다. object-fit: cover를 사용하면 비디오 비율을 유지하면서 컨테이너를 꽉 채워줍니다.
  3. 콘텐츠 오버레이: 비디오 위에 텍스트나 버튼 등의 콘텐츠를 표시하려면, 별도의 div를 만들어 position: absolute로 설정하고 컨테이너의 전체를 덮도록 합니다. display: flex를 사용하면 콘텐츠를 쉽게 중앙에 배치할 수 있습니다.

2) 실습 예제

이 예제는 화면의 일부를 차지하는 비디오 배경을 만들고, 그 위에 텍스트 콘텐츠를 오버레이하는 방법을 보여줍니다. 비디오는 자동 재생되며, 소리는 꺼져 있고, 계속 반복됩니다.

실습: 05-videoBackground.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-videoBackground</title>
    <style>
        * { box-sizing: border-box; padding: 0; margin: 0; }
        /* 동영상을 감싸는 박스 */
        .video-box {
            width: 100%;
            height: 80vh; /* 화면 높이의 80% */
            position: relative;
            overflow: hidden; /* 비디오가 넘칠 경우를 대비 */
        }
        .video-box video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 비율 유지하며 꽉 채우기 */
        }
        /* 비디오 위에 올라갈 콘텐츠 레이어 */
        .video-overlay {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); /* 약간 어둡게 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .video-overlay-content {
            text-align: center;
            font-size: 48px;
            color: #fff;
            text-shadow: 2px 2px 4px #000; /* 텍스트 가독성 향상 */
        }
    </style>
</head>
<body>
    <div class="video-box">
        <video src="media/BigBuck.mp4" autoplay muted loop poster="media/BigBuck.png"></video>
        <div class="video-overlay">
            <div class="video-overlay-content">
                <h1>Hello World</h1>
                <p>Video Background Example</p>
            </div>
        </div>
    </div>
</body>
</html>

#06. 전환 효과 (Transition)

transition 속성은 CSS 속성 값이 변경될 때, 그 변화가 중간 단계를 거쳐 부드럽게 일어나도록 만들어 애니메이션 효과를 줍니다. 예를 들어, 색상, 크기, 위치 등이 서서히 변하게 할 수 있습니다.

1) 이론 및 핵심 개념

transition

  • 설명: 특정 CSS 속성의 변화에 대한 전환 효과를 설정합니다.
  • 문법: transition: property duration timing-function delay;
    • property: 전환 효과를 적용할 CSS 속성 이름 (예: background-color, transform, all).
    • duration: 전환이 일어나는 시간 (예: 0.5s, 300ms).
    • timing-function: 전환의 속도 곡선 (예: ease, linear, ease-in-out).
    • delay: 전환이 시작되기 전의 대기 시간.

:hover와 함께 활용

  • transition은 :hover와 같은 가상 클래스와 함께 사용될 때 가장 효과적입니다. 요소의 기본 상태와 :hover 상태의 CSS 속성 값을 다르게 지정하면, 마우스를 올리거나 내릴 때 transition이 부드러운 시각적 변화를 만들어냅니다.

2) 실습 예제

이 예제는 이미지 갤러리 형태의 레이아웃에서 transition을 활용하는 방법을 보여줍니다. 각 이미지 아이템 위에 마우스를 올리면, 이미지(img)가 transform: scale(1.1)을 통해 약간 확대됩니다. 이때 transition: all 0.5s; 설정 때문에 이미지가 0.5초 동안 부드럽게 커지는 것을 볼 수 있습니다.

실습: 06-transition.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-transition</title>
    <style>
        .imageList {
            width: 1000px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .imageItem {
            width: 24%; /* 간격을 고려하여 약간 작게 */
            margin-bottom: 20px;
        }
        .imageItem a {
            display: block;
            border: 1px solid #eee;
            color: #000;
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .imageItem a:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transform: translateY(-5px);
        }
        .imgArea {
            width: 100%;
            height: 150px;
            overflow: hidden; /* 확대된 이미지가 넘치지 않도록 */
        }
        .imgArea img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 초기 상태에 transition 설정 */
            transition: transform 0.5s ease;
        }
        /* 마우스 오버 시 이미지 확대 */
        .imageItem:hover .imgArea img {
            transform: scale(1.1);
        }
        .textArea {
            padding: 10px 15px;
        }
        .textArea h4 {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .textArea p {
            font-size: 12px;
            color: #777;
            /* 여러 줄 말줄임 처리 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="imageList">
        <!-- 반복되는 이미지 아이템 -->
        <div class="imageItem">
            <a href="#">
                <div class="imgArea"><img src="img/spring.jpg"></div>
                <div class="textArea">
                    <h4>봄의 정원</h4>
                    <p>새싹이 돋아나는 아름다운 봄의 풍경입니다.</p>
                </div>
            </a>
        </div>
        <div class="imageItem">
            <a href="#">
                <div class="imgArea"><img src="img/summer.jpg"></div>
                <div class="textArea">
                    <h4>여름 해변</h4>
                    <p>시원한 파도 소리가 들리는 여름의 해변가.</p>
                </div>
            </a>
        </div>
        <div class="imageItem">
            <a href="#">
                <div class="imgArea"><img src="img/autumn.jpg"></div>
                <div class="textArea">
                    <h4>가을 단풍</h4>
                    <p>울긋불긋한 단풍이 절정을 이룬 가을 산의 모습.</p>
                </div>
            </a>
        </div>
        <div class="imageItem">
            <a href="#">
                <div class="imgArea"><img src="img/winter.jpg"></div>
                <div class="textArea">
                    <h4>겨울 설경</h4>
                    <p>고요하고 평화로운 눈 덮인 겨울 풍경.</p>
                </div>
            </a>
        </div>
        <!-- 아이템 4개 더 추가 -->
    </div>
</body>
</html>
05.Frontend, HTML&CSS
Web Development Frontend CSS
This post is licensed under CC BY 4.0 by the author.