CSS 2D

transform

2차원 좌표에서 요소를 변형시키는 속성
이동(translate), 회전(rotate), 확대 / 축소 (scale), 경사(skew)

	body{
            margin-left: 100px;
        }
        /* 아래 상자들의 크기와 패딩, 테두리를 지정 */
        p{
            width: 400px;
            padding: 15px;
            border: 3px solid darkblue;
        }
        /* 각 웹브라우저의 호환성을 위한 설정,  */
        #trans1{
            /* 우로 30px, 밑으로 30px 이동 */
            -ms-transform: translate(30px, 30px);
            -moz-transform: translate(30px, 30px);
            -o-transform: translate(30px, 30px);
            -webkit-transform: translate(30px, 30px);
            /* 그 외 브라우저를 위한 설정도 포함 */
            transform: translate(30px, 30px);
            background-color: deeppink;
        }
        #trans2{
            /* 60도 만큼 회전 */
            transform: rotate(60deg);
            background-color: gold;
        }
        #trans3{
            /* 가로 1.5배, 세로 1.2배 확대 */
            transform: scale(1.5,1.2);
        }
        #trans4{
            /* x축 30도, y축 15도 만큼 회전 */
            transform: skew(30deg, 15deg);
            background-color: yellowgreen;
        }

gradient

그라데이션 넣기
linear-gradient(선형)
linea-gradient(시작위치, 시작컬러, 끝 컬러)

linear-gradient(<각도> to <방향>, color-start, color-stop)
linear-gradient(left top, blue, white)
linear-gradient(45deg, blue, white)

radial-gradient(원형)
radial-gradient(<최종모양> <크기> at <위치>, color-start, color-stop)

radial-gradient(circle, white, yellow, red);
radial-gradient(10% 10%, circle, white, blue);
radial-gradient(circle at 10% 10%, white, blue);

접두사를 사용할때는 그라데이션이 적용되지 않을 경우 색상 지정을 해주고 접두사가 붙는 그라데이션과 동시에 그 외 브라우저에서 작동 할 수 있도록 작성한다.

	#gradient{
            /* 그라데이션 미적용 시 나타낼 배경 지정 */
            background: yellow;
            /* 각 브라우저 호환성에 따른 적용 */
            background:-webkit-linear-gradient(left,red,skyblue);
            background: -moz-linear-gradient(left,red,skyblue);
            background: -o-linear-gradient(left,red,skyblue);
            /* 그 외 브라우저 지정 */
            background: linear-gradient(left,red,skyblue);
        }

gradient 추가 설명

vender prefix

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미 한다.
아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다.
css권고안은 아래 링크에서 확인가능하다.
웹 표준 CSS 작업 현황 보러가기

접두사	브라우저
-ms-	익스플로어(서비스 중단)
-moz-	게코 방식 브라우저(모질라, 파이어 폭스)
-o-	오페라 브라우저
-webkit-	웹킷 방식의 브라우저(크롬, 엣지, 사파리)

transition

요소에 추가할 css 스타일의 전환효과를 설정
추가할 전환효과나 지속될 시간도 설정
transition : property timing-function duration delay
- property : 요소에 추가할 전환효과를 설정
- timing-function : 전환효과의 값을 설정(변화되는 속도 설정)
  - linear : 일정한 속도로 변환
  - ease : 전환효과가 천천히 시작 ~ 빠름 ~ 천천히 끝
- duration : 전환효과의 시간을 설정
- delay : 전환효과의 대기시간을 설정

    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 30px;
            border: 1px solid black;
        }
        #bg-tr{
            background-color: plum;
      /* 배경화면을 일정한 속도로 2초동안 바뀜 */
            transition: background-color linear 2s;
        }
      /*커서를 올려두면 배경화면을 네이비색으로 바꾼다.*/
        #bg-tr:hover{
            background-color: navy;
        }
      /*모든 속성을 2초동안 ease모드로 바꾼다.*/
        #border-tr{
            background-color: olive;
            border: 5px dotted hotpink;
            transition: all ease 2s;
        }
      /*커서를 올려두면 다음과 같이 바꾼다.*/
        #border-tr:hover{
            background-color: lavender;
            border: 5px dashed cornflowerblue;
            border-radius: 50%;

        }
    </style>
</head>
<body>
    <h2>tarnsition - 1</h2>
    <div id="bg-tr"></div>
    <div id="border-tr"></div>
</body>
</html>

마진을 활용하여 박스를 이동시킬 수도 있다.

<style>
        h2{text-align: center;}
        #container{
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border-radius: 30px;
            border: 5px solid black;
            padding: 30px;
        }
        .box{
            font-size: 20px;
            position:relative;
            width: 140px;
            height: 140px;
            margin-bottom: 50px;
            background-color: gold;
        }
        p{
            text-align: center;
            padding-top: 50px;
            font-weight: bold;
        }
        #container:hover > .box{
            /* 2바퀴 돌린다. */
            transform: rotate(720deg);
            /* 커서를 올려두면 margin-left를 적용한다. */
            margin-left: 650px;
        }
        #no-delay{
            /* 변화시간을 3초로 적용한다. */
            transition-duration: 3s;
        }
        #delay{
            /* 1초뒤에 2초간 변화한다. */
            transition-duration: 2s;
            transition-delay: 1s;
        }
    </style>
</head>
<body>
    <h2>transition -2</h2>
    <div id="container">
        <div id="no-delay" class="box">
            <p>༼ つ ◕_◕ ༽つ</p>
        </div>
        <div id="delay" class="box">
            <p>(☞ﾟヮﾟ)☞</p>
        </div>
    </div>
</body>
</html>

animation

요소의 현재 스타일을 다른 스타일로 변화

@keyframes 애니메이션 명{
            from 혹은 0%{
                처음에 적용할 스타일
            }
            정수%{
                중간지점 마다 적용할 스타일
            }
            to 혹은 100%{
                마지막에 적용할 스타일
            }   
    }

    <style>
        .box{
            /* 애니메이션을 적용 할때는 따로 설정한 애니메이션 이름을 적용하면 된다. */
            animation-name: moving;
            /* 3초간 애니메이션이 실행된다. */
            animation-duration: 3s;
            /* 애니메이션을 끝난 뒤 반복실행 여부 */
            animation-iteration-count: infinite;
            /* 애니메이션이 진행되고 다시 역순으로 실행된다. */
            animation-direction:alternate-reverse;
            margin-top: 100px;
            margin-left: 100px;
            padding: 20px;
            height: 60px;
            border: 1px solid black;
        }
        @keyframes moving {
            /* 애니메이션 시작 옵션을 지정한다ㅣ. */
           from{
               /* 너비 */
            width: 150px;
            /* 배경색 */
            background-color: cornflowerblue;
            /* 투명도 */
            opacity: 0.5;
            /* 글자위치 */
            text-align: right;
            /* 크기와 회전 */
            transform: scale(0.5) rotate(80deg);
        } 
        /* 애니메이션의 마침 옵션을 지정한다. */
        to{
            width: 300px;
            background-color: cyan;
            opacity: 1;
            text-align: right;
            transform: scale(1) rotate(-30deg);
        }
        }
    </style>
</head>
<body>
    <h2>animation - 1</h2>
    <div class="box">
        <h3>CSS Animation</h3>
    </div>
</body>
</html>

perspective()

3d환경을 만들기 위해 사용자의 관찰자 시점(투영점)을 구체화해서 입체감을 부여하는 속성
스크린에서 해당 px만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 구성

perspective(관찰자와 사물의 간격)

여러가지 동시 옵션적용과 중간 단계 지정

<style>
        .box{
            margin: 100px;
            width: 100px;
            height: 100px;
            background-color: deeppink;
            border: 1px solid black;
            animation-name: rotating;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-duration: 3s;
        }
        @keyframes rotating {
            from{
                /* 옵션을 지정 할때 초기상태 */
                transform: perspective(150px) rotateX(0deg) rotateY(0deg);
                opacity: 1;
            }
            50%{    
                /* x먼저 실행하고 y를 나중에 실행하고 싶을때 */
                transform: perspective(150px) rotateX(-180deg) rotateY(0deg);
                opacity: 0.5;
            }
            
            to{
                /* 완료된 x의 값도 그대로 적어줘야한다. */
                transform: perspective(150px) rotateX(-180deg) rotateY(-180deg);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h2>animation - 2</h2>
    <div class="box"></div>
</body>
</html>

CSS 우선순위

점수로 쉽게 생각 할 수 있다.

!important -> 무조건 우선
인라인 -> 1000점
id 속성 -> 100점
class 속성, 속성 선택자 -> 10점
element -> 1점
동일한 점수인 경우 나중에 적용한 것이 우선

    <style>
        #id-style-with-important{
            background-color: hotpink !important;
        }
        div{
            color: white;
            font-size: 1.5em;
            font-weight: bold;
            display: block;
            padding: 30px;
            margin: 10px;
            background-color: white;
            border: 1px solid black;
        }
        #id-style{
            background-color: blue;   
        }
        .class-style{
            background-color: tomato;
        }
        .class-style2{
            background-color: gold;
        }
        div{
            background-color: purple;
        }
    </style>
</head>
<body>
    <h2>우선순위</h2>
     <!-- important는 최우선 -->
    <div style="background-color: green;" id="id-style-with-important">div 1번(important 적용)</div>
    <!-- 인라인 속성은 id 속성보다 높다. -->
    <div style="background-color: green;" id="id-style">div 2번(인라인 스타일적용 1000점)</div>                 
    <!-- id 속성의 우선순위는 꽤 높다 -->
    <div id="id-style">div 3번(id 스타일 100점)</div>
    <!-- 태그 속성보다 우선순위가 높다. -->
    <div class="class-style">div 4번(class 스타일 10점)</div>
    <!-- 스타일 속성에서 가장 마지막에 적용한 스타일 -->
    <div>div 5번(마지막에 적용한 스타일)</div>
    <!-- 같은 속성안에 작성하였음으로 나중에 작성된 스타일이 적용 -->
    <div class="class-style class-style2">div 6번(같은 점수 마지막에 적용한 스타일)</div>
    <!-- 다른 속성으로 작성하였음으로 먼저 적용한 스타일이 적용 -->
    <div class="class-style" class="class-style2">div 7번(속성을 나누면 먼저 적용한 속성의 스타일이 우선)</div>
</body>
</html>

우선순위에 따른 스타일 적용은 아래와 같다.

Author And Source

이 문제에 관하여(CSS Day-6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@km2535/CSS-Day-6

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS Day-6