728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #container {
        display: grid; /* grid 형식으로 배치*/  
        /* grid-template-columns : 각 열들의 너비를 지정 */
        grid-template-columns: 200px 200px 200px 200px 200px;
        /* 너비가 전부 같은 열 3개 만드세여 */
        /* fr단위 : 비율 */
        grid-template-columns: repeat(3, 1fr);
        /* minmax(100px auto) : 줄 높이를 최소 100px로 해주세요  */
        grid-template-rows: 200px 300px; 
        /* grid-gap : 각 셀들의 간격을 지정( 세로, 가로 ) */
        grid-gap: 50px 30px;
        
    }

    .items {
        padding: 10px;
        border: 1px solid black;
        background-color: aquamarine;

    }

    /* 홀수번째 items */
    .items:nth-child(odd) {
        background-color: aqua;
    }


    </style>
</head>
<body>
    <div id="container">

        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        
    </div>
    

</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            width: 700px;
            box-sizing: border-box;
            border: 2px solid blue;
        }


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

        #opt1 {
            flex-direction: row-reverse;
        }

        #opt2 {
            flex-direction: column;
        }
        #opt3 {
            flex-wrap: wrap;
        }

        #opt4 {
            height: 400px;
            flex-direction: row; /* 기준 축을 설정함*/
            /* 가운데 정렬 담당 비슷한 친구 */
            justify-content: flex-end; /* 기준 축 기준 오른쪽 정렬*/
            justify-content: flex-start; /* 기준 축 기준 왼쪽 정렬*/
            justify-content: space-around; /* 모든 공간에서 동일하게 나눠 가짐*/
            justify-content: space-between; /* 양쪽은 붙이고 나머지 공간은 동일하게 (주축간격)*/
            align-items: center; /* 기준축의 반대 축을 기준으로 정렬 (교차축 정렬)*/
            align-content: center; /* 기준축의 반대 축들의 요소들의 나눠 가지는 영역을 지정 (교차축간격)*/
        }

        #opt1 > div:first-child{
            flex: 1;
            background-color: aqua;
        }
        #opt1 > div:last-child{
            flex: 2;
            background-color: aqua;
        }




    </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>
    <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>
    <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 class="box"><p>7</p></div>
        <div class="box"><p>8</p></div>
        <div class="box"><p>9</p></div>
        <div class="box"><p>10</p></div>
    </div>
    <div class="container" id="opt4">
        <div class="box"><p>1</p></div>
        <div class="box"><p>2</p></div>
        <div class="box"><p>3</p></div>
    </div>
</body>
</html>

실행창

728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

grid예제2  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
transform연습  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div{
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border-width: 5px;
            border-style: solid;
            background-color: aquamarine;
            border-color: rgb(255, 51, 0) rgb(251, 255, 0) darkcyan darkslategrey;
            animation-name: rotate;
            animation-duration: 2.5s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }


        @keyframes rotate {
            from{
                transform: rotate(0deg);
                margin-left: 0;
                bottom: 200px;
            }
            50% {
                bottom: 550px;
            }
          
            to{
                transform: rotate(2000deg);
                margin-left: 1000px;
                bottom: 0;    
            }
        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

grid 예제1  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
transform연습  (0) 2022.12.29
transition 연습  (0) 2022.12.29
728x90
반응형

 

 

 

 

 

1. HTML코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="2_애니메이션예제1.css">
</head>
<body>
    <div id="container">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
    </div>
</body>
</html>

 

 

 

 

 

2. CSS코드

#container {
    width: 500px;
    margin: 20px auto;

}


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


#box1 {
    display: block;
    position: relative;
    background-color: cadetblue;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* animation-fill-mode: backwards; */
    animation-duration: 3s;
}
#box2 {
    background-color: darkcyan;
    border: 1px solid transparent;
    animation-name: rotate;
    animation-duration: 3s;
}
#box3 {
    background-color: darkslategrey;
    animation: rotate3D 1.5s infinite, backchange 1.5s infinite;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    animation-delay: 1s;

}

@keyframes move {
    from{
        left: 0;
    }
    to{
        left: 500px;
    }
}


@keyframes shape {
    from{
        /* transparent : 투명 */
        border: 1px solid transparent;
    }
    to{
        border: 1px solid black;
        border-radius: 50%;
    }
}


@keyframes rotate {
    from{
        background-color: white;
        transform: rotate(0deg);
    }
    to{
        background-color: darkcyan;
        transform: rotate(45deg);
    }
}

@keyframes rotate3D {
    from{
        /* perspective : 원근감 */
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50%{
        transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
        
    }
    to{
        
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}

@keyframes backchange {
    from{
        background-color: red;
    }
    50%{
        background-color: aquamarine;
    }
    to{
        background-color: blue;
    }
}
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
transform연습  (0) 2022.12.29
transition 연습  (0) 2022.12.29
transform3  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        #container {
            width: 1000px;
            margin: 20px auto;
        }
        h1 {
            text-align: center;
        }
        img {
            width: 300px;
            height: 400px;
        }

        .prod-list {
            list-style: none;
            padding: 0;
        }

        .prod-list li {
            position: relative;
            float: left;
            padding: 0;
            margin: 10px;
        }

        .prod-list .caption {
            position: absolute;
            top: 200px;
            width: 300px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0; /* 화면에 보이지 않게하기*/
            transition: all 0.6s ease-in-out; /* 모든 요소에 시작과 끝 부분을 0.6초 동안 애니메이션 적용*/
        }

        .prod-list li:hover .caption{
            transform: translateY(-200%px);
            opacity: 1;
        }

        .prod-list .caption h2, p {
            color: white;
            text-align: center;
        }



    </style>
</head>
<body>
    <div id="container">
        <h1>신상품 목록</h1>
        <ul class="prod-list">
            <li>
                <img src="../Resource/phone_case/phone_case1.jpg" alt="">
                <div class="caption">
                    <h2>상품 1</h2>
                    <p>상품 1의 설명텍스트</p>
                    <p>가격 : 10,000원</p>
                </div>
            </li>
            <li>
                <img src="../Resource/phone_case/phone_case2.jpg" alt="">
                <div class="caption">
                    <h2>상품 2</h2>
                    <p>상품 2의 설명텍스트</p>
                    <p>가격 : 20,000원</p>
                </div>
            </li>
            <li>
                <img src="../Resource/phone_case/phone_case3.jpg" alt="">
                <div class="caption">
                    <h2>상품 3</h2>
                    <p>상품 3의 설명텍스트</p>
                    <p>가격 : 30,000원</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
transition 연습  (0) 2022.12.29
transform3  (0) 2022.12.29
teansform2  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            /*상수 값 만들기*/
            --title-horizontal-space:2.75rem;
        }
        /* 
            filter
                -blur(a) : a는 길이, a만큼 흐리게 한다. 적을수록 덜 흐려진다(블러)
                -brightness(a) : a는 비율 100%를 기준으로 이미지를 어둡게, 혹은 밝게 한다. (0%: 오나전 어둡게 ~ ?% 매우 밝게)(명도)
                -contrast(a) : a는 비율. 100%를 기준으로 이미지 대비를 조절한다. (색의 진하기정도.)(대비)
                -grayscale(a) : a는 비율. 0%(기본값)부터 100%까지, 이미지의 그레이스케일을 조절(0%는 풀컬러, 100%는 흑백)(채도)
                -invert(a) : a는 비율. 0%(기본값)부터 100%까지. 이미지를 색 반전 시킨다 ( 반전)
        */
        a.button {
            display: block;
            /* 중앙정렬 */
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            width: 30rem;
            height: 20rem;
            border: 1px solid #DDD;
            color: cadetblue;
            overflow: hidden;
        }

        .button > .background{
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url(../Resource/restaurant.jpg);
            filter: brightness(75%);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 0;
            transition-duration: 400ms;
        }

        .button:hover > .background {
            transform: scale(110%);
        }


        .button > .content {
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 99;
        }

        .button > .content > .title {
            position: relative;
            left: 0;
            width: 100%;
            font-size: 1.75rem;
            background-color: deepskyblue;
            padding: 1.25rem;
            margin-block-end: 0;
            margin-block-start: 0;
            box-sizing: border-box;
            padding: 1.25rem var(--title-horizontal-space);
        }

        .button > .content > .title > .arrow {
            position: absolute;
            top: 50%;
            right: var(--title-horizontal-space);
            width: 2rem;
            height: 2rem;
            background-color: white;
            border-radius: 50%;
            background-image: url(../Resource/화살표.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            transition-duration: 0.5s;            
            transform: translateY(calc(-50% + 1rem));
            opacity: 0;
        }

        .button:hover > .content > .title > .arrow {
            transform: translateY(-50%);
            opacity: 1;
        }


        .button > .content > .exp {
            display: block;
            bottom: 0;
            position: absolute;
            line-height: 150%;
            padding: 2rem var(--title-horizontal-space);
            text-align: justify; /* 텍스트를 양쪽 끝 맞추세여*/
            opacity: 0;
            background-color: cornflowerblue;
            font-size: 1.5rem;
            font-weight: bold;
            color: black;
            transform: translateY(1rem);
            transition-duration: 0.5s;
            opacity: 0;
        } 

        .button:hover > .content > .exp {
            transform: translateY(0);
            opacity: 1;
        }





    </style>
</head>
<body>
    <a class="button" href="#">
        <span class="background"></span>
        <span class="content">
            <h2 class="title">
                <span>입점래스토랑 안내</span>
                <span class="arrow"></span>
            </h2>
            <span class="exp">동대구 메리어트에 입점해 있는 레스토랑에서 즐러운 시간 보내세요</span>
        </span>
    </a>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

animation 예제1  (0) 2022.12.29
transform연습  (0) 2022.12.29
transform3  (0) 2022.12.29
teansform2  (0) 2022.12.29
teansform기본  (1) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .origin {
            width: 200px;
            height: 300px;
            border: 1px solid black;
            margin: 30px;
            float: left;
        }
        .origin > div{
            width: 200px;
            height: 300px;
            background-color: beige;
        }
        img {
            width: 200px;
            height: 300px;
        }

        .rotateX:hover {
            transform: rotateX(50deg);
        }
        
        
        #pers {
            perspective: 300px;
            
        }

        #pers > div {
            transition: 2s ease-in;
        }


        #skewx{

            transform: skewX(30deg);
        }
        
        #skewy{
            transform: skewY(15deg);
            
        }
    


    </style>
</head>
<body>
    <h4>원본 이미지</h4>
    <div class="origin">
        <img src="../Resource/sunset.jpg" alt="태양">
    </div>
    <div class="origin" id="pers">
        <div class="rotateX">
        <img src="../Resource/sunset.jpg" alt="태양">
        </div>
    </div>

    <div class="origin">
        <div id="skewx"></div>
    </div>

    <div class="origin">
        <div id="skewy"></div>
    </div>


</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

transform연습  (0) 2022.12.29
transition 연습  (0) 2022.12.29
teansform2  (0) 2022.12.29
teansform기본  (1) 2022.12.29
가상선택자3  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 600px;
            height: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;    
            margin: 50px;
        }

        .origin > div{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            transition-duration: 1.5s; 
        }

        #scalex{
            /* 가로로 2배 확대 */
            transform: scalex(2);
        }
        #scaley{
            /*세로로 1.5배 */
            border-style: solid;
            border-width: 10px;
            border-color: black red blue green;
            transform: scaley(1.5);
            transition-duration: 1000ms; /* transition이 실행되는 총 시간*/
            transition-delay: 0.5s;/* transition이 실행될떄까지 걸리는 시간*/
            /* transition-property: ; */
        }
        #scale{
            /* 가로 세로 0.5배 */
            transform: scale(0.5);
            border: 3px solid black;
        }




        #scalex:hover{
          transform: rotate(45deg);
        }
        #scaley:hover{
            border-radius: 50%;
            background-color: aquamarine;
            transform: rotate(-45deg);
            
            
        }
        #scale:hover{
            /* x, y, z 축으로 deg 만큼 회전 */
            transform: rotate3d(2.5, 1.2, -1.5, 55deg)
        }


    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="scalex"></div>
        </div>
    </div>
    <div id="container">
        <div class="origin">
            <div id="scaley"></div>
        </div>
    </div>
    <div id="container">
        <div class="origin">
            <div id="scale"></div>
        </div>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

transition 연습  (0) 2022.12.29
transform3  (0) 2022.12.29
teansform기본  (1) 2022.12.29
가상선택자3  (0) 2022.12.29
가상선택자2  (0) 2022.12.29

+ Recent posts

728x90
반응형
">

티스토리툴바