· FRONT-END/└ CSS

[ CSS / HTML ] 이미지 꾸미기

감자도리22 2024. 4. 13. 17:45

환경 : Visual Studio Code

 

 

이미지에 다양한 효과를 줘보자.

[ 전체 원형 ]

<head>
    <style>
        /* 이미지 디자인 */
        .image-circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-circle" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

     (+) border-radius를 반만 주면 원형이 나온다

 

[ 모서리 깎기 ]

<head>
    <style>
        .image-round {
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-round" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

    (+) px로 주어서 영향을 덜 받도록 함

 

[ 흑백처리 ]

<head>
    <style>
        .image-grayscale {
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-grayscale" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

    (+) filter의 기능 중 grayscale로 줘서 흑백정도 설정

 

[ 투명도 조절 ]

<head>
    <style>
        .image-blur {
            opacity: 0.5; /*불투명도 : 1(100%), 0(0%)*/
            transition: opacity 0.2s linear;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-blur" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

    (+) 불투명도를 반으로 설정. (1:100%, 0:0%)

 

[ 투명도 조절 + 마우스를 올렸을 시 선명하게 보이도록 하기 (+ 천천히 움직이도록 하기) ]

<head>
    <style>
        .image-blur {
            opacity: 0.5; /*불투명도 : 1(100%), 0(0%)*/
            transition: opacity 0.2s linear;
        }
        .image-blur.hover:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-blur hover" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

    (+) 마우스를 올렸을 때의 선명도를 100%(1)로 설정

    (+) 천천히 바뀌도록 transition을 부여

 

[ 그림자 주기 ]

<head>
    <style>
        .image-shadow {
            /*box-shadow : x위치 y위치 번짐 확대 색상;*/
            box-shadow: 5px 5px 0 0 rgb(170, 170, 170);
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-shadow" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

    (+) box-shadow : x위치 y위치 번짐 확대 색상;

 

[ 번짐 및 확대 효과 주기 ]

<head>
    <style>
        .image-lift {
            box-shadow: 0 0 5px 1px brown;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <img class="image-lift" src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

 

 

 

   - 출력결과

가운데 이미지에 마우스를 가져다 대면 선명해지는 결과 확인 가능

[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 디자인</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <link rel="stylesheet" type="text/css" href="test.css">
    <style>
        /* 이미지 디자인 */
        .image-circle {
            border-radius: 50%;
        }
        .image-round {
            border-radius: 5px;
        }
        .image-grayscale {
            filter: grayscale(100%);
        }
        .image-blur {
            opacity: 0.5; /*불투명도 : 1(100%), 0(0%)*/
            transition: opacity 0.2s linear;
        }
        .image-blur.hover:hover {
            opacity: 1;
        }
        .image-shadow {
            /*box-shadow : x위치 y위치 번짐 확대 색상;*/
            box-shadow: 5px 5px 0 0 rgb(170, 170, 170);
        }
        .image-lift {
            box-shadow: 0 0 5px 1px brown;
        }
    </style>
</head>
<body>
    <div class="container w-600">
        <div class="cell center">
            <h1>이미지 디자인</h1>
        </div>
        <div class="cell center">
            <img class="image-circle" src="image/coguma.jpg" width="150" height="150">
            <img class="image-round" src="image/coguma.jpg" width="150" height="150">
            <img class="image-grayscale" src="image/coguma.jpg" width="150" height="150">
        </div>
        <div class="cell center">
            <img class="image-blur" src="image/coguma.jpg" width="150" height="150">
            <img class="image-blur hover" src="image/coguma.jpg" width="150" height="150">
            <img class="image-shadow" src="image/coguma.jpg" width="150" height="150">
        </div>
        <div class="cell center">
            <img class="image-lift" src="image/coguma.jpg" width="150" height="150">
            <img class="" src="image/coguma.jpg" width="150" height="150">
            <img src="image/coguma.jpg" width="150" height="150">
        </div>
    </div>
</body>
</html>

 

 

 

 

 

 

개인 공부 기록용입니다:)

728x90