(66)CSS_기본문법

trangsfrom

• 2차원 좌표에서 요소를 변형시키는 속성

           tramslate : 이동
           rotate : 회원
           scale : 확대, 축소
           skew : 경사, 비틀기

✔ 벤터 프리픽스(vender prefix)

• 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실 을 알리기 위해 사용하는 접두사
• W3C CSS 권고한에 포함되지 않는 기능이나, 포함되어 있지만 아직 완벽하게 재정된 상태가 아닌 기능을 사용할 때 붙임

            -webkit- : 크롬, 엣지를 위한 접두사
            -0- : 오페라를 위한 접두사
            -ms- : 익스플로러를 위한 접두사
            -moz- : 파이어폭스를 위한 접두사    

• 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함

linear-gradient

• 색상의 그라데이션을 입힘

transition

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

           property: 요소에 추가할 전환효과를 설정
           timing-function: 전환효과의 값을 설정
                linear: 처음부터 끝까지 일정한 속도
                ease: 전환효과가 천천히 -> 빨리지고 -> 천천히 -> 끝
            duration: 전환효과를 나타내는 시간을 설정
            delay: 설정한 시간만큼 대기하다 

css animation

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

        @keyframe
        시작: 0%, from
        과정: 1%, 3%, 10%, ..
        끝: 100%, to

            0%         5%       50%       ...100%
            장면1   장면2   장면3       끝 장면

• animation-name: 애니매이션의 이름을 설정
• animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
  • forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지
• animation-direction: 애니메이션의 진행 방향을 정하는 속성
  • reverse: 반대 순서로 진행
  • alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
  • reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
• animation-duration: 애니메이션이 일어나는 시간을 설정
• animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
  • infinite: 무한반복
  • 숫자: 숫자만큼 반복

CSS 우선순위 계산

• 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
• 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
• 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시함
• 계산식

             -inline: 1000점
             -id 속성: 100점
             -class, 속성 선택자: 10점
             -element: 1점

• !important를 적용하면 0 순위