반응형 웹 디자인을 위한 미디어쿼리
요즘 반응형 웹 개발을 위한 다양한 프레임워크가 존재하지만 오직 CSS만을 이용하여 반응형 웹을 개발하기 위해서는 @media{}가 필수적으로 쓰인다. 미디어쿼리의 사용법에 대하여 정리할 것이다.
@media screen(max-width:1000px) {
/* css 코드 작성 */
}위의 코드는 가로 폭이 최대 1000px, 즉 1000px 이하일 때 적용되는 코드
@media screen(min-width:1000px) {
/* css 코드 작성 */
}위의 코드는 가로 폭이 최소 1000px, 즉 1000px 이상일 때 적용되는 코드
요즘 반응형 웹 디자인을 할 때, 작은 것에서부터 큰 것으로 즉, 모바일 크기에서 웹의 크기로 디자인하는 mobile first design을 많이 사용한다는 얘길 들은 적이 있다. 코딩스타일과 상황에 따라 다르겠지만, 나는 mobile first design을 더 선호하기 때문에 min-width를 이용한 미디어쿼리를 더 많이 사용할 것 같다.
애니메이션을 위한 키프레임
키프레임은 애니메이션을 구현할 때 많이 사용하는 기능인데, 원하는 지점에서 애니메이션 처리를 할 수 있어 디테일한 애니메이션 구현에 용이하다.
/* index.css */
@keyframes apple {
from{
opacity:0.2;
}
to{
opacity:1;
}
.wrap {
position: relative;
display: flex;
height:100%;
width: 100%;
justify-content: center;
align-items: center;
animation: apple 1s linear 0.3s infinite alternate;
}<!-- index.html -->
<body>
<div class = "wrap"><i class="fab fa-apple"></i></div>
</body>keyframe에서 from과 to 대신에 0%와 100% 또는 디테일하게 47%와 같은 수치도 허용된다.
유능한 프론트엔드 개발자가 되고픈 사람😀