CSS

shadow / gradient / transition / animation

정낭고 2023. 6. 1. 16:55

《 shadow 》

❑ 둥근 테두리를 줄 때 border로 접근하면 안 됨! shadow로 접근!

 

# text shadow

<style>
        .text {
            /* text-shadow: x y blur color; */
            text-shadow: 
                5px 5px 10px rgba(0,0,0,0.5),
                15px 15px 20px rgba(0,0,0,0.5);
            font-size: 70px;
        }
</style>

➡ shadow를 두 번 겹쳐 주고 싶을 때: 콤마(,)로 연결해서 주기

 

# box

❑ border의 안쪽도 바깥쪽도 둥글게 표현하고 싶을 때

        .box {
            width: 200px;
            border: 1px solid #ccc;
            /* box-shadow: x y blur (size) ; */
            box-shadow: 0 0px 0px 10px rgba(255,0,0,0.5);
            border-radius: 10px;
            /* border: 10px solid rgba(255,0,0,0.5); */
            box-shadow: inset 0 0 10px rgba(0,0,0,.35);
        }

 

➡ border-radius: 테두리의 둥근 정도

➡ inset : 안쪽 그림자

 

# modal

        .modal {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            display: none;
        }

        .modal:target{
            display: block;
        }

 

그림자 참고 사이트

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dahamee&logNo=220494959638

 

《 Gradient》

 

# linear

        .linear{
            /* background: linear-gradient(방향,색상 위치, 색상 위치); */
            /* background: linear-gradient(to bottom, #000 0%, #fff 100%); */
            background: linear-gradient(to bottom, #2989cc 0%, #fff 50%, #906a00 52%, #d99f00 64%, #fff 100%);
        }

➡ background: linear-gradient(to top, #000 0%, #fff 100%

: 검은색이 아래에서 위로

➡ background: linear-gradient(to bottom, #000 0%, #fff 100%)

: 검은색이 위에서 아래로

➡ 방향이 아래 방향일 땐 생략 가능

: background: linear-gradient(#000, #fff, #000)

➡ 처음 색과 두번째 색이 같을 경우에 생략 가능

 

# radial

        .radial{
            /* background: radial-gradient(모양 중심점 좌표, 색상 위치, 색상 위치); */
            height: 300px;
            background: radial-gradient(circle at 50px 50px, #000 0%, #fff 100%);
            /* circle farthest-corner : 가장 먼 코너
            circle closest-corner : 가장 가까운 코너
            circle farthest-side : 가장 먼 면
            circle closest-side :가장 가까운 면 */
        }

 

《 Transition》

❑ 수치가 있는 것만 transition이 먹힘

➡ background도 수치이기 때문에 적용됨

 

❑ 역방향/순반향 속도 달리 주고 싶을 때 (hover 사용 시)

    <style>
        div img {
            width: 200px;
            transition: 0.1s ease; /* 역방향 작동 */
        }

        div:hover img {
            width: 400px; 
            transition: 1s ease; /* 순방향 작동 */
            
        }
    </style>

 

❑ 호버를 올렸을 때 역방향 되는 과정에도 속도가 붙을려면 hover 전 요소에 속도 걸기

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: 3s;
}

div:hover{
  width:300px;
}

 

 

《 Animation》

❑ animation-name으로 아무 이름 설정하기

❑ 특별한 설정이 없으면 변화했다가 원점으로 되돌아옴

❑ 원점으로 되돌리고 싶지 않을 때

➡ animation-fill-mode: forwards

무한으로 반복하고 싶을 때

➡ animation-iteration-count: infinite

<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>Animation</title>
	<style>
        .box {
            width: 100px;
            height: 100px;
            background: green;
            animation-name: box;
            animation-duration: 2s;
            animation-delay: 0.2s;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
            animation-iteration-count: 2;
            /* animation-direction: reverse; 반대 방향 */
        }
        @keyframes box {
            0% {background: green; 
                margin-left:0; margin-top: 0;}
                /* 0% = from */
            25% {background: yellow; 
                margin-left:200px; margin-top: 0;}
            50% {background: red; 
                margin-left:200px; margin-top:200px;}
            75% {background: black; 
                margin-left: 0px; margin-top: 200px;}
            100% {background: blue; 
                margin-left: 0px; margin-top: 0px;}
                /* 100% = to */
        }
    </style>
</head>

<body>
    <div class="box">box</div>
    <hr>
    <!--  
        아래쪽으로 40px 내려가고 있고, 투명도 0
        순차적으로(0.1s간격) 위로(원래위치)올라오고 투명도 1
        조건: hr 움직이면 안된다.
        애니메이션의 이름 fadeUp, 시간 0.5초
    -->
    <header>
        <h2>Main title</h2>
        <p>
            description
        </p>
        <a href="">read more</a>
    </header>
    <hr>
</body>

</html>

➡ ease: 속도가 느리다

ease-in: 처음이 느리고 뒤가 빠르다

ease-out: 처음이 빠르고 뒤가 느리다

 

 

 

《 Table》

❑ margin을 줄 수 없음

❑ 부모 (= display: table)

❑ 자식 (= display: table-cell)