@keyframes
애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 css애니메이션 과정의 중간 절차를 제어할 수 있게 하는 규칙
- 키프레임을 사용하려면 @keyframes을 애니메이션과 매칭시킬 animation-name 속성에서 사용할 이름과 함께 생성해야한다.
@keyframs slidein/*animation에서 호출할 keyframes의 이름*/ { from { /*애니메이션의 시작부분*/ margin-left: 100%; width: 300% } /*애니메이션이 from에서 to로 변화한다.*/ to { /*애니메이션의 끝부분*/ margin-left: 0%; width: 100% } } - 각 @keyframes룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성된다.
@keyframes slidein { from { margin-left: 100%; width: 300%; } 50% { margin-left: 50%; width: 150%; } to { margin-left: 0%; width: 100%; } } - 키프레임은 순서대로 나열 가능하며, 지정된 %의 순서대로 처리되며 키프레임이 여러번 정의된 경우 가장 최근의 키프레임에 선언된 값들만 유효하다.
@keyframes identifier { 0% { top: 0; } 50% { top: 30px; left: 20px; } /*이값은 무시한다.*/ 50% { top: 10px; } /*최근 선언된 여기만 유효*/ 100% { top: 0; } }
@media
스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있으며, 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 css블록을 적용할 수 있다.
-
@media 규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있다.
/*최상위 콛 레벨*/ @media screen/*지정대상*/ and/*논리연산자*/ (min-width: 900px) { article { padding: 1rem 3rem; } } /*다른 조건부 @규칙 내에 중첩*/ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } }-
@media 뒤에는 미디어 유형을 지정할 수 있는데
not이나only논리연산자를 제외하면 선택사항에 따라 지정할 수 있고, 지정하지 않으면all이 사용된다.-
all: 모든 장치에 적합 -
print: 인쇄 결과물 및 출력 미리보기 화면애 표시중인 문서 -
screen: 주로 화면이 대상 -
speech: 음성 합성장치 대상
-
-
논리연산자를 사용해 복잡한 쿼리를 조합할 수 있다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있다.
-
and: 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용한다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 하며, 미드어 특성과 미디어 유형을 같이 사용할 때도 쓰인다. -
not: 쿼리가 거짓일 때만 참을 반환한다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당 쿼리에만 적용된다. not연산자를 사용할 경우 반드시 미디어 유형도 지정해야 한다. -
only: 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며, 구형 브라우저가 스타일을 잘못 적용하지 못하도록 할 때 유용하다.screen and (max-width: 50px)쿼리인 경우 구형 브라우저는 앞의screen만 읽고 뒷 부분을 무시해 버리기 때문이다. only연산자를 사용할 경우 반드시 미디어 유형도 지정해야 한다. -
,: 쉼표는 목록내의 쿼리 각각은 나머지와 별개로 취급하므로 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 된다.
-
-
-
웹브라우저를 반응형으로 만든다고 했을때 주로
screen과and그리고min-width,max-width위주의 예시가 인터넷에 많았던거 같다.- 미디어쿼리에 min-width를 쓸 경우 최소 화면넓이 전까지 쿼리 스타일을 적용한다고 이해하고 사용해도 무방한것 같고, max-width는 최대 화면 넓이 전까지 쿼리 스타일을 적용한다고 이해하고 사용하게 될듯하다.
- 하지만 주로 모니터 화면을 기준으로 초반 스타일을 지정하고 그 다음으로 태블릿, 모바일 순으로 작아지는 화면을 가정해 미디어 쿼리를 작성하므로, min-width가 더 많이 사용될 것으로 보인다.
- 물론 매우 간단하게만 정리를 했고 더 많고 다양한 기능과 정보가 더 있다. 내가 하루하루 정리하는 것은 어디까지나 간단하게 개념을 정립하기 위함이다.
크리스마스라 하루만 쉬려고 했는데 일이 생겨서 이틀동안 공부를 못했다. 어제 노마드코더에서 본 눈내리기영상을 오늘 시도해봤는데 얌전히 내리는게 아쉬워서 눈이 흔들리면서 내리는 것 까지 완성해보고 블로그에 정리해볼 생각이다. 오늘은 눈내리기를 하면서 사용했던 @keyframes와 추가로 @media까지 정리해보자
참고 사이트
