Notice
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Jade_o.o

[css] background 실습 - 프로필 만들기 본문

CSS

[css] background 실습 - 프로필 만들기

by jade 2024. 1. 13. 13:01

background를 통해서 인스타 프로필 만들어 보자!

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background 이용 프로필 만들기</title>
    <link rel="stylesheet" href="./css_test16.css">
</head>
<body>
    <div class="container">
        <div class="item background"></div>
        <div class="item background-img"></div>
    </div>
</body>
</html>

html 코드

 

.item{
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

.background{
    position: absolute;
    background: linear-gradient(50deg, hotpink,rgb(252, 220, 90));
}

.background-img{
    position: absolute;
    width:470px;
    height: 470px;
    background-image:url(./img/i17033941953.jpg);
    border: 7px solid white;
    /*background-size: auto;*/
    background-size: cover;
    top:15px;
    left:15px;
}

css 코드

 

코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] transition & transform 실습 - 이미지 연달아 나열하기  (1) 2024.01.13
[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)  (0) 2024.01.13
[css] Flexbox 실습 - header 만들기  (0) 2024.01.13
[css] position 실습 - 애벌레 만들기  (0) 2024.01.13
[css] attr 실습6 - flex-direction, flex-wrap, align-content  (0) 2024.01.13
'CSS' Related Articles more