'정보' 카테고리의 글 목록 (5 Page)

728x90

HTML코드

<!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>
    <link rel="stylesheet" href="2_grid실습.css">


</head>
<body>
    <div id="wrapper">
        <div class="card">
            <header>
                <h3>모바일 HTML</h3>
            </header>
            <figure><img src="../Resource/books/book1.jpg" alt="HTML"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos commodi harum voluptas inventore quo dolor numquam quaerat perspiciatis! Similique dignissimos voluptatum officiis repellendus quos hic molestias, optio iste sequi.</p>
        </div>
        <div class="card">
            <header>
                <h3>CSS3</h3>
            </header>
            <figure><img src="../Resource/books/css.jpg" alt="CSS"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius veniam quibusdam repudiandae, doloremque nam aperiam. Ipsa vero minus quam at minima possimus nostrum ab, facilis facere voluptatem soluta optio voluptas?</p>
        </div>
        <div class="card">
            <header>
                <h3>바닐라 자바스크립트</h3>
            </header>
            <figure><img src="../Resource/books/js.jpg" alt="JAVA"></figure>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem et enim at eos suscipit necessitatibus atque? Ex dolorum harum autem beatae, natus vitae assumenda? Non cumque accusantium adipisci autem nobis.</p>
        </div>
    </div>
</body>
</html>

CSS코드

body{
    font-size: 16px;
    background-color: black;
}

#wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.card {
    background-color: #fff;
    box-shadow: 5px 10px 25px white;
    text-align: center;
}

.card > header {
    font-size: 2rem;
    padding: 0.5px;
}

.card > p {
    line-height: 1.6em;

}

img {
    display: block;
    margin: auto;
    max-width: 100%;
    min-height: 30rem;
}

728x90

저작자표시

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

요소 정렬 방법 (0)	2023.01.01
flex 설명 (0)	2023.01.01
grid예제2 (0)	2023.01.01
grid 예제1 (0)	2023.01.01
flex 예제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>
        #wrapper {
            display: grid;
            width: 700px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-template-areas: 
                "box1 box1 box1"
                "box2 box3 box3"
                "box2 . box4"
            ;    
            grid-gap: 10px 10px;
        }
        .box {
            border: 1px solid black;
            color: white;
            text-align: center;
            font-weight: bold;
        }

        .box1{
            background-color: darkcyan;
            grid-area: box1;
        }
        .box2{
            background-color: rgb(1, 155, 103);
            grid-area: box2;
            grid-area: box2;
        }
        .box3{
            background-color: rgb(0, 190, 79);
            grid-area: box3;
        }
        .box4{
            background-color: rgb(103, 6, 141);
            grid-area: box4;
        }


    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
    
</body>
</html>

728x90

저작자표시

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

flex 설명 (0)	2023.01.01
grid실습 (0)	2023.01.01
grid 예제1 (0)	2023.01.01
flex 예제1 (0)	2022.12.29
animation 예제2 (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: 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

[ 여기블로그 ]

정보

grid실습

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

grid예제2

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

grid 예제1

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

flex 예제1

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

animation 예제2

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

animation 예제1

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

transform연습

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

transition 연습

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

+ Recent posts

티스토리툴바