Front-End/CSS

[CSS] Ex14_background.html

이뮨01 2023. 6. 12. 12:00

background 속성에 대해서 배우다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* background 속성 : 요소의 배경 스타일을 지정하는 속성
            ex) 아이콘을 적용할 때 사용함 */
        
            /* body{
            background-image: url('https://img.freepik.com/premium-photo/universe-background_495832-915.jpg');
            background-repeat: no-repeat; */
            /* background-size: 100px 100px; */
            /* background-size: cover; }*/
        
        /* .icon{
            width: 844px;
            height: 810px; 
            background-image: url('./img/네이버아이콘모음.png');
            background-repeat: no-repeat;
        } */

        .icon-papago{
            width: 140px;
            height: 140px;
            background-image: url('./img/네이버아이콘모음.png');
            background-repeat: no-repeat;
        }

        .icon-papago-text{
            width: 152px;
            height: 32px;
            background-image: url('./img/네이버아이콘모음.png');
            background-repeat: no-repeat;
            background-position: -328px -368px;
        }

        
    </style>
</head>
<body>
    <div class="icon"></div>
    <div class="icon-papago"></div>
    <div class="icon-papago-text"></div>
</body>
</html>

 

결과

background-image: url(이미지 주소)
background-repeat(반복)
background-size(이미지로 사이트의 너비를 꽉 채움)
 
너비와 높이, 위치를 알려주는 사이트 http://www.spritecow.com/
 

저작자표시