풀스택 개발자 과정 54일차

너구·2026년 7월 24일

풀스택 성장과정

목록 보기
57/79

애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        #container {
            width: 500px;
            margin: 20px auto;
        }

        .box {
            width: 100px;
            height: 100px;
            float: left;
            margin: 50px;
        }

        #box1 {
            background-color: #4cff00;
            border: 1px solid transparent;
            animation-name: shape;
            /* 애니메이션 지정 */
            animation-duration: 3s;
            /* 애니메이션 실행 시간 */
        }

        #box2 {
            background-color: #8f06b0;
            border: 1px solid transparent;
            animation-name: rotate;
            /* 애니메이션 지정 */
            animation-duration: 3s;
            /* 애니메이션 실행 시간 */
        }

        @keyframes shape {
            /* shape 애니메이션 정의 */
            from {
                border: 1px solid transparent;
                /* 1px짜리 투명한 테두리 */
            }

            to {
                border: 1px solid #000;
                /* 검정색 테두리 */
                border-radius: 50%;
                /* 테두리를 둥글게 */
            }
        }

        @keyframes rotate {
            /* rotate 애니메이션 정의 */
            from {
                transform: rotate(0deg);
                /* 시작은 0도에서 */
            }

            to {
                transform: rotate(45deg);
                /* 45도까지 회전 */
            }
        }
    </style>
</head>
<body>
    <div id="contatiner">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
    </div>
</body>
</html>

Transform2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 60px auto;
            animation: rotate 1.5s infinite, background 1.5s infinite alternate;
            /* 키프레임이름 동작시간 무한반복 키프레임이름 동작시간 무한반복 홀수 from-> to 짝수 to -> form */
        }

        @keyframes rotate {

            /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }

            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }

            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }

        @keyframes background {

            /* 배경색을 빨강 -> 초록 -> 파랑 순서로 바꾸기 */
            from {
                background-color: red;
            }

            50% {
                background-color: green;
            }

            to {
                background-color: blue;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

Q1

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #container {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
        }

        h1 {
            margin-bottom: 20px;
            text-align: center;
        }

        .prod-list {
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;   
            gap: 20px;
        }

        .prod-list li {
            position: relative;
            overflow: hidden;
            flex: 1 1 300px;   
            max-width: 350px;
        }

        .prod-list img {
            width: 100%;
            display: block;
        }

        .caption {
            position: absolute;
            left: 0;
            bottom: -100%;
            width: 100%;
            height: 100%;
            padding-top: 60px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            text-align: center;
            transition: all 0.6s ease;
        }

        .prod-list li:hover .caption {
            bottom: 0;
        }

        .caption h2 {
            margin-bottom: 20px;
        }

        .caption p {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <div id="container">
        <h1>신상품 목록</h1>

        <ul class="prod-list">
            <li>
                <img src="images/prod1.jpg" alt="상품1">
                <div class="caption">
                    <h2>상품1</h2>
                    <p>상품 1 설명 텍스트</p>
                    <p>가격 : 12,345원</p>
                </div>
            </li>

            <li>
                <img src="images/prod2.jpg" alt="상품2">
                <div class="caption">
                    <h2>상품2</h2>
                    <p>상품 2 설명 텍스트</p>
                    <p>가격 : 12,345원</p>
                </div>
            </li>

            <li>
                <img src="images/prod3.jpg" alt="상품3">
                <div class="caption">
                    <h2>상품3</h2>
                    <p>상품 3 설명 텍스트</p>
                    <p>가격 : 12,345원</p>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>

Q2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q2</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .top-menu {
            margin: 50px auto;
            padding: 0;
            list-style: none;
            width: 605px;
            height: 35px;
            box-shadow: 0 3px 4px #8b8b8b;
            background-color: #dadada;
        }

        .top-menu li {
            float: left;
            border-right: 1px solid #929292;
        }

        .top-menu li a:link {
            color: black;
            text-decoration: none;
            text-align: center;
            display: block;
            width: 100px;
            height: 35px;
            line-height: 35px;

            transition: all 0.5s ease-in;
        }

        .top-menu li:last-child {
            border-right: none;
        }

        .top-menu li:not(:last-child) a:hover {
            background-color: #555;
            color: #fff;
        }

        .top-menu li:last-child a:hover {
            background-color: #b30000;
            color: #fff;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="top-menu">
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
            <li><a href="#">메뉴5</a></li>
            <li><a href="#">메뉴6</a></li>
        </ul>
    </nav>
</body>

</html>

Q3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q4</title>

    <style>
        img {
            display: block;
            margin: 100px auto;
            animation: rotate 5s infinite;
            border-radius: 50%;
            animation: rotate 2.5s infinite;
            box-shadow: 5px 5px 15px gray;
        }

        @keyframes rotate {
            /* 시작 */
            from {
                transform: perspective(200px) rotateY(0deg);
            }

            /* 50% */
            50% {
                transform: perspective(200px) rotateY(-180deg);
            }

            /* 끝 */
            to {
                transform: perspective(200px) rotateY(-360deg);
            }
        }
    </style>
</head>
<body>
    <img src="images/bear.jpg" alt="bear">
</body>
</html>

Q4

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q4</title>

<style>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .spinner {
        width: 200px;
        height: 200px;
        background: url('images/ball.png') no-repeat center;
        background-size: 100%;

        animation: move 2s linear infinite;
    }

    @keyframes move {
        from {
            transform: translateX(0) rotate(0deg);
        }

        to {
            transform: translateX(1000px) rotate(360deg);
        }
    }
</style>
</head>
<body>

<div class="spinner"></div>

</body>
</html>

viewport units

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>viewport units</title>
    <style>
        h1 {
            font-size: 5vw;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>안녕하세요</h1>
</body>
</html>

미디어 쿼리 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리 사용하기</title>
    <style>
        body {
            background: url(images/bg0.jpg) no-repeat fixed;
            /* 기본 배경 이미지 저장 */
            background-size: cover;
        }

        @media screen and (max-width:1024px) {
            body {
                background: url(images/bg1.jpg) no-repeat fixed;
                /* 가로가 1024px 이하면 bg1.jpg 지정 */
                background-size: cover;
            }
        }

        @media screen and (max-width:768px) {
            body {
                background: url(images/bg2.jpg) no-repeat fixed;
                /* 가로가 768px 이하면 bg2.jpg 지정 */
                background-size: cover;
            }
        }

        @media screen and (max-width:320px) {
            body {
                background: url(images/bg3.jpg) no-repeat fixed;
                /* 가로가 320px 이하면 bg03.jpg 지정 */
                background-size: cover;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

Object-fit 속성

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object-fit 속성</title>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 5px;
        }

        .container {
            width: 200px;
            height: 400px;
            border: 1px solid #000;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .fill {
            object-fit: fill;
        }

        .contain {
            object-fit: contain;
        }

        .cover {
            object-fit: cover;
        }

        .none {
            object-fit: none;
        }

        .scale-down {
            object-fit: scale-down;
        }
        
    </style>
</head>

<body>
    <div class="container">
        <img src="images/cat.jpg" alt="고양이" class="fill">
        <h3>object-fit: fill</h3>
    </div>
    <div class="container">
        <img src="images/cat.jpg" alt="고양이" class="contain">
        <h3>object-fit: contain</h3>
    </div>
    <div class="container">
        <img src="images/cat.jpg" alt="고양이" class="cover">
        <h3>object-fit: cover</h3>
    </div>

    <div class="container">
        <img src="images/cat.jpg" alt="고양이" class="none">
        <h3>object-fit: none</h3>
    </div>

    <div class="container">
        <img src="images/cat.jpg" alt="고양이" class="scale-down">
        <h3>object-fit: scale-down</h3>
    </div>

</body>

</html>

플렉서블 박스 레이아웃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉서블 박스 레이아웃</title>
    <style>
        .container {
            display: flex;
            /* 플렉스 컨테이너 지정 */
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }

        .box {
            padding: 5px 45px;
            margin: 5px;
            width: 80px;
            background-color: #222;
        }

        #opt1 {
            flex-flow: row nowrap;
            /* 한 줄에 표시 */
        }

        #opt2 {
            flex-flow: row wrap;
            /* 여러 줄에 표시 */
        }

        #opt3 {
            flex-flow: wrap-reverse;
            /* 항목의 순서를 바꿔 여러 줄에 표시 */
        }

        p {
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
   </div>          
</body>
</html>

마무리

오늘도 CSS를 배웠다.

profile
너구
이전 포스트

풀스택 개발자 과정 53일차

다음 포스트

풀스택 개발자 과정 55일차

0개의 댓글