'코딩일지/WEB' 카테고리의 글 목록 (4 Page)

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기본 (2)	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기본 (2)	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기본 (2)	2022.12.29
가상선택자3 (0)	2022.12.29
가상선택자2 (0)	2022.12.29

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            transform 함수
            translatr(x, y ) : 가로방향x, 세로방향y 만틈 이동, % 사용가능  > 요소의 크기를 기준으로 이동
            translateX, translateY, 등 원하는 방향만 지정할 수 있는 속성도 있음.
            translate(100%, 100%) == translateX(100%) translateY(100%) 같다
            scale(%) : % 비율만틈 확대/축소. 100%가 원래 크기 기준 0% ~ ?% 까지 조정 가능
            rotate(deg) : deg단위로 요소를 회전시킨다. (각도) 시계방향 기준

            무슨 사건이 발생했을 때, 위치가 변경되어야 한다거나 가운데 정렬을 해야한다
            => transform: translate(50px, 50px);
            그 외 자리를 지정해야 할 경우는 아래 사용
            position: relative;
            top : 50px; 
            legt : 50px;
            위 두개는 위치 자체 모습은 같은 위치를 나타냄



        */


        body > div {
            position: absolute; /* 원래의 나의 위치를 기준으로 이동*/
            top: 50%;
            left: 50%;
            width: 6.25rem;
            height: 6.25rem;
            background-color: darkcyan;
            transition-duration: 1.5s; 
            /* 
                사실은 스타일의 변경이 있을 떄, 그 스타일의 변경을 1초동안 보여달라
            */

        }


        body > div:hover{
            left: 1px;
            transform:  translate(-50%, -50%);

        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

transform3 (0)	2022.12.29
teansform2 (0)	2022.12.29
가상선택자3 (0)	2022.12.29
가상선택자2 (0)	2022.12.29
가상 선택자 (0)	2022.12.29

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .container {
            width: 300px;
            margin: 0 auto;
            border: 1px solid black;
        }

        ul li {
            margin: 15px;
        }

        li.new::after {
            content: 'NEW!';
            font-size: x-small;
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background-color: red;
            color: white;           
            
        }
        

    </style>
</head>
<body>
    <div class="container">
        <h1>제품 목록</h1>
        <ul>
            <li class="new">제품 A</li>
            <li>제품 B</li>
            <li>제품 C</li>
            <li class="new">제품 D</li>
        </ul>    
    </div>
</body>
</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

teansform2 (0)	2022.12.29
teansform기본 (2)	2022.12.29
가상선택자2 (0)	2022.12.29
가상 선택자 (0)	2022.12.29
그라데이션 응용 (0)	2022.12.29

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        #container {
            text-align: center;
        }

        table, tr, td{
            border: 1px solid black;
        }

        table{
            width: 200px;
            margin: 0 auto;
            border-collapse: collapse;

        }
        /* table 안에 있는 tr 전부 중 2n+1 번째 (-> 홀수 번쨰 ) 요소만 적용해 주세요*/
        table tr:nth-of-type(2n + 1){
            background-color: gray;
        }

        h1::after {
            display: block;
            color: red;
            content: '여기는 테이블 입니다.';
        }



    </style>
</head>
<body>
    <div id="container">
        <h1>웹개발</h1>

        <table>
            <tr><td>HTML</td></tr>
            <tr><td>java</td></tr>
            <tr><td>CSS</td></tr>
            <tr><td>Node</td></tr>
            <tr><td>python</td></tr>
        </table>


    </div>
</body>
</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

teansform기본 (2)	2022.12.29
가상선택자3 (0)	2022.12.29
가상 선택자 (0)	2022.12.29
그라데이션 응용 (0)	2022.12.29
radial그라데이션 (0)	2022.12.29

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* div {
            background-color: cadetblue;
            
        } */
        
        /* div:hover {
            background-color: aqua;
        } */
        
        body > div > a:nth-child(odd) {
            /* 
                odd : 홀수번째 모두 선택
                even : 짝수번째 모두 선택 
            */
            color: gold;
        }
        body > label:hover {
            color: cornflowerblue;
        }
        /* body 자식 태그 중, agree 라는 클래스를 가지는 요소의 자식 중 input 테그인데, type속성이 checkbox 인거 그리고 그 체크박스가 체크가 되어있을 때, 그 인접 선택자 중 warning 이라는 클래스 속성을 가지는 요소에 적용해라 */
        body > .agree > input[type=checkbox]:checked ~ .warning {
            /* 
                display : none 과 다름
                눈에만 안보이게 하고 공간은 여전히 차지하게 하세요. 
            */
            visibility: hidden;
        }


        /* body 안에 div의 자식에서 a테그 중, 첫번째 자식 요소(첫번째 a태그) 를 선택 */
        body > div > a:first-child {
            color: cadetblue;
        }
        /* body 안에 div의 자식에서 a테그 중, 세번째 자식 요소(두번째 a태그 > br도 포함해야됨) 를 선택 */
        body > div > a:nth-child(3) {
            color: dodgerblue;
        }

        body > div > a:last-child {
            color: red;
        }

        /* div의 자식 중, 홀수 번째 요소중에서 첫번째와 마지막 요소를 제외한 요소에 적용시켜주세요. */
        body > div > a:nth-child(odd):not(:first-child):not(:last-child):hover{
            color: lightpink;
            font-size: 40px;
            text-decoration: dashed;
        }

    </style>
</head>
<body>
    <label class="agree">
        <input type="checkbox">
        <span>위 약관을 읽어보았고 동의합니다.</span><br>
        <span class="warning">위 약관을 읽고 동의해 주세요.</span>
    </label>
    <div>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a>
    </div>
</body>
</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

가상선택자3 (0)	2022.12.29
가상선택자2 (0)	2022.12.29
그라데이션 응용 (0)	2022.12.29
radial그라데이션 (0)	2022.12.29
linear그라데이션 (0)	2022.12.29

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 10px 5px 20px #ccc;
        
        }

        .grad1 {
            background: radial-gradient(circle at 20% 20%, white, blue);
        }

        .grad2, .grad3{
            width: 500px;
            border: 1px solid #222;
            border-radius: 10px;

        }

        .grad2 {
            background: repeating-linear-gradient(yellow, red 100px);
            background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
        }
        .grad3 {
            background: repeating-radial-gradient(circle, white, #CCC 10%);
        }


    </style>
</head>
<body>
        <div class="grad1"></div>
        <div class="grad2"></div>
        <div class="grad3"></div>
</body>
</html>

728x90

저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

가상선택자2 (0)	2022.12.29
가상 선택자 (0)	2022.12.29
radial그라데이션 (0)	2022.12.29
linear그라데이션 (0)	2022.12.29
CSS 연습 (0)	2022.12.29

[ 여기블로그 ]

코딩일지/WEB

transition 연습

'코딩일지 > WEB' 카테고리의 다른 글

transform3

'코딩일지 > WEB' 카테고리의 다른 글

teansform2

'코딩일지 > WEB' 카테고리의 다른 글

teansform기본

'코딩일지 > WEB' 카테고리의 다른 글

가상선택자3

'코딩일지 > WEB' 카테고리의 다른 글

가상선택자2

'코딩일지 > WEB' 카테고리의 다른 글

가상 선택자

'코딩일지 > WEB' 카테고리의 다른 글

그라데이션 응용

'코딩일지 > WEB' 카테고리의 다른 글

+ Recent posts

티스토리툴바