개발자의 여정에 열정을 더하다.

Class/Frontend

[프론트 엔드 DAY10]

열정코딩 2022. 5. 25.

목차

1. css 2D /  transform
        이차원 좌표에서 요소를 변형시키는 속성
        이동, 확대/축소, 회정, 경사 등믈 만들수 있음 
        translate, scale, rotate , skew

liner-gradient
    background: liner-gradient (방향, 색상1, 색상2)
    방향은 생략이 가능하며  벤더 프리픽스도 생략 가능 
    방향에 가로방향 (left, right)을 작성시에는 벤더 프리픽스를 반드시 작성해 주어야함 


    벤더프리릭스 (vendor prefix)
        주요 웹 브라우저 공급자가 (safari, ie, chorm...) 새로운 실험적인 기능을 제공할때 
        이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미

        아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할때 벤더프릭스를 사용
        벤터 프릭스를 사용하면 해당 기능이 포함되어 있지 않은 웹 브라우저에서도 가능을 사용 가능 

        IE : -ms-
        crome: -webkit-
        Firefox: -moz-

 

<입력 코드> 

<!DOCTYPE html>
<html lang="en">
<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>transform</title>
    </head>
<body>
    <h2>transform</h2>
    <p>orginal</p>
    <p id="trans1">translate</p>
    <p id="trans2">rotate</p>
    <p id="trans3">scale</p>
    <p id="trans4">skew</p>
    <p id="gradient">gradient</p>
</body>
</html>

 

<스타일 코드>

 

<style>
        body {
            margin-left: 100px;
        }
        p{
            width: 400px;
            padding: 15px;
            border: 3px solid navy;
        }

        #trans1 {
            background-color: deeppink;
            transform: translate(30px, 30px);
        }

        #trans2 {
            background-color: aquamarine;
            transform: rotate(60deg);  /*deg  도 라고 생각하면 된다. */
        }

        #trans3{
            background-color: skyblue;
            transform: scale(1.5, 1.2);  /*스케일 : 커진다고 생각하면 됨*/
        }

        #trans4{
            background-color: gold;
            transform: skew(30deg, 15deg);
        }

        #gradient{
            
            background: linear-gradient(to right,  pink 40%,green 50%,hotpink);
        }
    </style>

 

<출력결과>

[프론트 엔드 DAY10]

<설명> 

#gradient는 안에  색이 그라데이션되는 속성의 값을 넣어주고 

오른쪽부터 시작해서 40% 핑크, 50% 그린, 그리고 핫핑크로 해주었다. 

skew( 회전 x , y 축 ) deg 는 도 라고 생각하면됨

따라, skew( 30deg, 15deg ) 의 속성을 넣어 저렇게 지정 deg 만큼 돌아간것을 볼수 있다. 

 

 

2.  transition


        요소에 추가할 css 스타일의 전환효과를 설정
        추가할 전환효과나 지속될 시간도 설정 

        ex)
        transition: property timing-function duration dely
        property: 요소에 추가할 전화효과의 전용 속성을 설정 
        timing-function : 전환 효과의 변화되는 속도값을 설정 
        linear: 일정한 속도 
        ease : 전환효과가 변하면서 변환 (천천히- 빠르게 - 천천히)
                (ease-in ease-out ease-in-out)
        duration: 전환 효과의 걸리는 시간 설정 
        delay:전환 효과의 대기시간 설정 

 

<입력코드>

 

<!DOCTYPE html>
<html lang="en">
<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>transtion-1</title>
    </head>
<body>
    <h2>transtion-1</h2>
    <div id="bg_tr"></div>
    <div id="border_tr"></div>
</body>
</html>

 

<스타일 코드>

<style>
        div {
            width: 100px;
            height: 100px;
            margin:30px;
            border: 1px solid black;
        }

        #bg_tr {
            background-color: red;
            transition: background-color linear 2s;
        }
        
        #bg_tr:hover{
            background-color: orange;
           
            transition: 2s ;
            transform: translate( 300px);
        }

        #border_tr{
            background-color: green;
            border: 10px;
            transition: all ease 2s;
        }

        #border_tr:hover {
            background-color: blue;
            border: 5px solid rgb(250, 0, 137);
            border-radius: 50%;}

    </style>

 

< 설명 >

 #bg_tr 에 hover을 했을때  빨간색이였던 네모모양이 300px 옮겨가면서( 2초후 )오렌지 색으로 바뀐다. 

#border_tr 에 hover 했을때 50%의 테두리 기울기를 줘서 원의 모양으로 바꿔지며 테두리 색이 변하는 모습을 

볼수 있다. 

'Class > Frontend' 카테고리의 다른 글

[프론트 엔드 DAY11]  (0) 2022.05.26
[프론트 엔드 DAY09]  (0) 2022.05.24
[프론트 엔드 DAY08]  (0) 2022.05.23
[프론트 엔드 DAY07]  (1) 2022.05.09
[프론트 엔드 DAY06]  (0) 2022.05.02

댓글

티스토리툴바