CSS (7) : 반응형 웹, Background, Border, Animation(Day 7)

- 미디어 쿼리

• 정의 : 웹 페이지의 스타일을 디바이스의 화면 크기, 해상도, 디스플레이 방향 등에 따라 다르게 설정
• 양식 :

@media (max-width: 800px) and (min-width: 200px) {
        .container {
          font-size: 18px
        }
      }
       

- Background

• 단축속성 : background: [속성값1] [속성값2] [속성값3] [position] / [size]
  -- 다른 건 순서 상관없으나, position과 size는 반드시 position / size로 기입
  
  

• background-image: url("", "")/linear-gradient(to top bottom, 색상1, 색상2, 색상 3...)/radial-gradient(ellipse/circle, 색상1, 색상2...)

  -- background-image:의 속성값이 여러개일 때 : url(""), url("")
  

• background-size: [1px 1px]/[1px]/[cover]/[contain];
  ... (1) 속성값에 하나만 줄 경우 : 긴 쪽 길이를 조절(반대쪽 길이는 비율에 맞게 조정됨)
  ... (2) cover : 짧은 쪽 길이를 화면에 꽉 차게 하고, 긴 쪽은 잘리게
  ... (3) contain : 긴쪽 길이를 화면에 꽉 차게 하고, 짧은 쪽은 여백 생기게
  

• background-repeat: [repeat]/[no-repeat]/[repeat-x]/[repeat-y] : background에 여백 생길 시, background 반복 여부

• background-position: : 배경 위치 조절
  -- 속성값은 아래와 같이 지정 가능
  (1) 10px : 수평 위치 지정 + 수직은 자동으로 센터 정렬
  (2) 10px 10px : 수평/수직 위치 지정
  (3) px 3~4개는 사용하지 않음
  (4) left/right/center : 수평 위치 지정 + 수직은 자동으로 센터 정렬
  (5) left/right/center top/bottom/center : 수평/수직 위치 지정 */

• background-attachment: fixed; : 화면 스크롤해도 이미지 위치 고정(부모 요소가 화면에 보이는 한)
  -- 기본 속성값: scroll;

- Border 관련 속성

• border-style: dasehd(대시선)/dotted(점선)/solid(실선)/double(이중선)/groove vs inset(음각)/ridge vs offset(양각)
• border-radius: 속성값 1~4개 가능
  -- 속성값에 1~4개 부여에 따른 상하좌우 순서는 margin 값과 동일
• text-shadow: 5px(x축 5px(6축) 3px(블러) 색상 값

- 애니메이션 관련 속성

: 단순 애니메이션은 transition, 심화 애니메이션은 animation 사용

ㅁ transition

• transition-property: all / 속성값1,속성값2 / 속성값;
• transition-duration: 1s;
• transition-delay: 0.5s;
• transition-timing-function: linear/steps(4);
• 단축속성 : transition: 속성1 속성2
  -- 초가 두 개 있으면 duration > delay 순임
  -- 초가 하나만 있으면 duration 만임
  

ㅁ transform

• transform: rotate(30deg);
• transform: scale(3); : 배수
• transform: translate([100px(x축)]/[x축, y축]
• 단축속성 : transform: 값1 값2

ㅁ애니메이션 만들기

1.@keyframes 만들기
2.애니메이션 적용

/* 애니메이션 적용 */
/* animation-name: keyframes명*/    
animation-name: rotation;
/* animation-duration: 지속 시간 */
animation-duration: 5s;

/* 반복 : animation-iteration-count */
animation-iteration-count: infinite;

/* animation- timing-function */
animation-timing-function: linear;

/* animation-direction: alternative/normal/reverse; */
animation-direction: alternate-reverse; 

/* animation-fill-mode : backwards(마지막 상태 지속), forwards(시작 전부터 첫 상태 지속),  none(시작 후 첫 상태 지속) both(시작 전 첫 상태, 시작 후 마지막 상태 지속*/

/* 애니메이션 만들기*/ 
@keyframes rotation {
 0% {
   transform: translate(0,0);
 }