✿∘˚˳°∘°

35일차 : 배경스타일 / 트랜스폼 / 애니메이션 본문

국비수업/HTML+CSS

35일차 : 배경스타일 / 트랜스폼 / 애니메이션

_HYE_ 2023. 1. 14. 15:46

20230113

1. 배경스타일

<!DOCTYPE html>
<html lang="ko">
<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>배경스타일1</title>
    <link rel="stylesheet" href="css/background.css">
</head>
<body>
    <h1>배경과 배경 이미지</h1>
    <hr>
    <h3>background-color : 요소의 배경생을 지정하는 속성</h3>
    <pre>선택자{background-color : 색상명 | #16진수 | rgb | rgba}</pre>
    <div class="div1">배경색테스트1</div>
    <div class="div2">배경색테스트2</div>
    <br><hr><br>
    <h3>background-clip : 배경 범위 조정</h3>
    <pre>선택자{ background-clip : border-box | padding-box | content-box }</pre>
    <div class="clip-wrap">
        <div class="clip1"></div>
        <div class="clip2"></div>
        <div class="clip3"></div>
    </div>
    <br><hr><br>
    <h3>background-image : 요소의 배경을 이미지로 지정</h3>
    <pre>선택자{ background-image:url(이미지경로) }</pre>
    <div class="bg-img"></div>
    <!-- 이미지가 컨텐츠일경우 img태그사용 / 이미지를 배경에 깔고 컨텐츠를 따로 작성할 거면 background-image 사용-->
    <h3>background-repeat : 배경이미지 반복을 조정</h3>
    <pre>선택자{ background-repeat : repeat | repeat-x | repeat-y | no-repeat }</pre>
    <div class="repeat-wrap">
        <div class="repeat-1 test-div"></div>
        <div class="repeat-2 test-div"></div>
        <div class="repeat-3 test-div"></div>
        <div class="repeat-4 test-div"></div>
    </div>
    <br><hr><br>
    <h3>background-position : 배경이미지 위치 조정</h3>
    <div class="position-wrap">
        <div class="po1 test-div"></div>
        <div class="po2 test-div"></div>
        <div class="po3 test-div"></div>
        <div class="po4 test-div"></div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><hr><br>
    <h3>background-size : 배경이미지 크기 조정</h3>
    <pre>선택자{background-size : auto | contain | cover | 크기지정}</pre>
    <div class="position-wrap">
        <div class="size1 test-div"></div>
        <div class="size2 test-div"></div>
        <div class="size3 test-div"></div>
        <div class="size4 test-div"></div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><hr><br>
    <h3>background-origin : 배경이미지 배치 기준</h3>
    <pre>
        선택자{background-origin : border-box | padding-box | content-box}
        --> background-clip의 이미지버전
    </pre>
    <br><hr><br>
    <h3>background-attachment : 페이지 상하 이동 시 배경이미지</h3>
    <pre>선택자{background-attachment : scroll | fixed}</pre>
</body>
</html>
.div1{
    background-color: antiquewhite;
}
.div2{
    /*배경색을 지정하지 않으면 기본색은 흰색X 투명색O 
    투명색을 지정하고 싶을 경우 transparent속성을 넣어주면된다.*/
    background-color: transparent;
}

.clip-wrap{
    overflow: hidden;
}
.clip-wrap>div{
    background-color: antiquewhite;
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    border: 5px dashed black;
    float: left;
}
.clip1{
    /*선까지 포함*/
    background-clip: border-box;
}
.clip2{
    /*선이전까지만*/
    background-clip: padding-box;
}
.clip3{
    /*순수콘텐츠영역까지만*/
    background-clip: content-box;
}
.bg-img{
    /*높이를 지정해주지않으면 보이지않음*/
    height: 500px;
    background-image: url(../image/flower1.png);
}
.repeat-wrap{
    overflow: hidden;
}
.test-div{
    width: 200px;
    height: 100px;
    margin: 30px;
    border: 1px solid black;
    float: left;
    background-image: url(../image/kakao.jpg);
}

.repeat-1{
    /*반복*/
    background-repeat: repeat;
}
.repeat-2{
    /*가로축반복*/
    background-repeat: repeat-x;
}
.repeat-3{
    /*세로축반복*/
    background-repeat: repeat-y;
}
.repeat-4{
    /*반복x*/
    background-repeat: no-repeat;
}

.position-wrap>div{
    background-repeat: no-repeat;
}
.po1{
    background-position: left center;
}
.po2{
    background-position: center center;
}
.po3{
    background-position: right bottom;
}
.po4{
    /*left/right/center | top/bottom/center 를 사용하면 9공간만 가능*/
    /*이외의 다른위치는 %로 지정해주면 된다.*/
    background-position: 30% 70%;
}

.size1{
    background-size: auto;
}
.size2{
    /*높이를맞춤*/
    background-size: contain;
}
.size3{
    /*배경을 꽉채움*/
    background-size: cover;
}
.size4{
    background-size: 30%;
}

body{
    background-image: url(../image/flower2.png);
    background-repeat: no-repeat;
    /*fixed : 스크롤을 내려도 배경이미지가 따라다님*/
    background-attachment: fixed;
}

 

<!DOCTYPE html>
<html lang="ko">
<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>그라데이션</title>
    <link rel="stylesheet" href="css/background2.css">
</head>
<body>
    <h1>그라데이션</h1>
    <hr>
    <h2>선형그라데이션</h2>
    <p>색상이 수직,수평,대각선으로 일정하게 변하는 것</p>
    <h3>1. 색상만 지정</h3>
    <div class="linear gra1"></div>
    <h3>2. 방향 지정</h3>
    <div class="linear gra2"></div>
    <h3>3. 각도 지정</h3>
    <div class="linear gra3"></div>
    <h3>4. 중간색 지정</h3>
    <div class="linear gra4"></div>
    <h3>5. 중간색 여러개 지정</h3>
    <div class="linear gra5"></div>
    <h3>6. 그라데이션 반복</h3>
    <div class="linear gra6"></div>
    <h3>7. 그라데이션 반복(색구분명확/여러색을넣기)</h3>
    <div class="linear gra7"></div>
    <br><hr><br>
    <h1 id="test-gra">그라데이션 테스트</h1>
    <!-- 그라데이션 사이트에서 사용 : https://uigradients.com/ -->
    <br><hr><br>
    <h2>원형그라데이션</h2>
    <p>색상이 원 또는 타원 중심부에서 동심원그리며 바깥방향으로 색상이 변하는 것</p>
    <h3>1. 색상만 지정</h3>
    <div class="circle gra8"></div>
    <h3>2. 모양 지정</h3>
    <div class="circle gra9"></div>
    <h3>3. 시작점 지정</h3>
    <div class="circle gra10"></div>
    <h3>4. 동심원 크기 지정</h3>
    <div class="circle gra11"></div>
    <div class="circle gra12"></div>
    <div class="circle gra13"></div>
    <div class="circle gra14"></div>
</body>
</html>
.linear{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.gra1{
    /* 처음색:파랑 끝색:하양 */
    background: linear-gradient(#00f,#fff);
}
.gra2{
    background: linear-gradient(to left, #00f, #fff);
}
.gra3{
    /*12시를 기준으로 시계방향(반시계는 -를 붙이면 편하다)*/
    background: linear-gradient(-45deg, #00f, #fff);
}
.gra4{
    background: linear-gradient(to right, #00f, #fff 50%, #f00);
}
.gra5{
    background: linear-gradient(35deg, #00f, rgb(140, 148, 202),#fff 50%, pink 80%, #f00);
}
.gra6{
    background: repeating-linear-gradient(to right, #00f, #fff 20%);
}
.gra7{
    background: repeating-linear-gradient(to bottom, red, red 15%, orange 15%, orange 30%, yellow 30%, yellow 45%);
}
#test-gra{
    background: #d9a7c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 20px;
    color:#fff;
}
.circle{
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.gra8{
    background: radial-gradient(#fff, #00f, #f00);
}
.gra9{
    background: radial-gradient(circle,#fff, #00f, #f00);
}
.gra10{
    /*브라우저마다 중심을 측정하는 방법이 달라서 브라우저 접두사를 넣어줘야함*/
    /*브라우저 호환성을 위해 전부 붙여준다.*/
    background: -webkit-linear-gradient(30% 40%, circle, #fff,#00f,#f00);
    background: -o-linear-gradient(30% 40%, circle, #fff,#00f,#f00);
    background: -moz-linear-gradient(30% 40%, circle, #fff,#00f,#f00);
    background: -ms-linear-gradient(30% 40%, circle, #fff,#00f,#f00);
}
.gra11{
    background: -webkit-radial-gradient(30%, 40%, circle closest-side, #fff, #00f, #f00);
}
.gra12{
    background: -webkit-radial-gradient(30%, 40%, circle farthest-side, #fff, #00f, #f00);
}
.gra13{
    background: -webkit-radial-gradient(30%, 40%, circle closest-corner, #fff, #00f, #f00);
}
.gra14{
    background: -webkit-radial-gradient(30%, 40%, circle farthest-corner, #fff, #00f, #f00);
}

 

2. 트랜스폼 / 애니메이션

 

 

<!DOCTYPE html>
<html lang="ko">
<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>트랜스폼</title>
    <link rel="stylesheet" href="css/transform.css">
</head>
<body>
    <h1>트랜스폼</h1>
    <h2>페이지에서 요소를 변형시키기위한 함수</h2>
    <h3>1. 지정한 크기만큼 좌/우 이동</h3>
    <img src="image/flower1.png" class="trans1">
    <h3>2. 지정한 크기만큼 위/아래 이동</h3>
    <img src="image/flower2.png" class="trans2">
    <h3>3. 지정한 크기만큼 상하좌우 이동</h3>
    <img src="image/flower3.png" class="trans3">
    <h3>4. 지정한 크기만큼 좌/우 확대</h3>
    <img src="image/flower1.png" class="trans4">
    <h3>5. 지정한 크기만큼 위/아래 확대</h3>
    <img src="image/flower2.png" class="trans5">
    <h3>6. 지정한 크기만큼 전체 확대</h3>
    <img src="image/flower3.png" class="trans6">
    <h3>7. 지정한 각도만큼 회전</h3>
    <img src="image/flower1.png" class="trans7">
    <br><hr><br>
    <h2>트랜지션</h2>
    <p>웹 요소의 스타일을 애니메이션처럼 변경</p>
    <h3>시간에 따른 속성변화</h3>
    <div class="div trans8"></div>
    <h3>시간지연</h3>
    <div class="div trans9"></div>
    <br><hr><br>
    <h2>트랜지션 활용</h2>
    <div id="img-box">
        <img src="image/flower4.png">
    </div>
    <br><hr><br>
    <h1>애니메이션</h1>
    <h3>트랜지션과 마찬가지로 시작지점 끝지점 스타일을 정해서 자연스럽게 연결 keyframes을 설정하여 중간변화 설정이 가능</h3>
    <img id="img1" src="image/dora.png">
    
    <hr>
    <div id="div"></div>
    
</body>
</html>
img{
    width: 250px;
    height: 200px;
}
.trans1:hover{
    /* +:오른쪽 -:왼쪽 */
    transform: translateX(100px);
}
.trans2:hover{
    /* +:위 -:아래 */
    transform: translateY(-100px);
}
.trans3:hover{
    transform: translate(100px, 30px);
}
.trans4:hover{
    transform: scaleX(2);
}
.trans5:hover{
    transform: scaleY(2);
}
.trans6:hover{
    transform: scale(1.5, 1.5);
}
.trans7:hover{
    transform: rotate(45deg);
}
.div{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    background-color: red;
}
.trans8{
    /*hover안에 들어가면 2초에 걸쳐 바뀜*/
    /*trans8에 바로들어가면 바뀌엇다가 마우스를 떼면 되돌아옴*/
    transition-duration: 2s;
}
.trans8:hover{
    width: 200px;
    height: 200px;
    background-color: yellow;
}

.trans9{
    transition-duration: 2s;
}
.trans9:hover{
    /*delay를 통해 마우스가 2초동안 있어야 다음동작 실행*/
    transition-delay: 2s;
    background-color: yellow;
    transform: rotate(180deg);
}

#img-box{
    width: 300px;
    height: 200px;
    border: 5px solid red;
}

#img-box>img{
    width: 100%;
    height: 100%;
    transition-duration: 0.2s;
}
#img-box>img:hover{
    transform: scale(1.2, 1.2);
}

#img1{
    margin: 100px;
    width: 300px;
    height: 300px;
    animation-duration: 3s;
    /*inginite 무한반복*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#img1:hover{
    /*속성을 an1을통해 넣을거야 @keyframes을 이용하여 ani1을 만듬*/
    animation-name: ani1;
}

@keyframes ani1{
    from{
        background-color: yellow;
        border: 3px solid red;
        border-radius: 150px;
    }
    /*트랜지션과의 차이점 : 애니메이션은 중간단계를 넣을 수 있다*/
    to{
        transform: rotate(360deg);
        background-color: yellow;
        border: 3px solid red;
        border-radius: 150px;
    }
}

#div{
    width: 300px;
    height: 300px;
    margin: 100px;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-name : ani2;
}
@keyframes ani2{
    0%{
        background-color: green;
        border: 3px solid black;
    }
    30%{
        transform: translate(100px, 100px);
    }
    50%{
        background-color: pink;
        transform: scale(1.5);
        border: 3px solid red;
    }
    100%{
        background-color: aquamarine;
        transform:rotate(45deg);
        border: 3px solid blue;
    }
}
저작자표시

'국비수업 > HTML+CSS' 카테고리의 다른 글

37일차 : [실습] 메뉴바 만들기  (0) 2023.01.22
36일차 : [실습] 헤더 / 약관동의 / 회원가입  (0) 2023.01.17
34일차 : 텍스트 / 목록스타일 / 레이아웃  (0) 2023.01.14
33일차 : 선택자  (0) 2023.01.11
32일차 : 테이블 / 영역분할 / 하이퍼링크 / 폼  (0) 2023.01.11
'국비수업/HTML+CSS' Related Articles more
Comments