@media 사용법 (반응형 웹을 만들기 위한)
반응형 웹이란?
반응형 웹이란 쉽게 말해 화면에 따라서 보기 쉽게 반응하는 웹 디자인을 말합니다.
아래와 같이 사용자의 화면의 크기는 다양합니다. 하지만 그에 맞게 디자인하는 것은 어려울 수 있습니다.
오늘은 css의 @media를 이용해서 반응형 웹을 구성하는 법을 알아보겠습니다.
@media
css에 아래와 같이 @media를 추가 해줍니다.
@media (max-width:768px) {
.visible-lg{
display: none;
}
}
@media (min-width:768px) {
.visible-xs{
display: none;
}
}@media (max-width:768px) 는 화면 가로 길이가 768px까지만 동작하는 css 입니다.
최대 768px 까지는 .visible-lg (Large) 클래스를 안보이도록 설정했습니다.
반대로 @media (min-width:768px) 는 화면 가로 길이가 768px를 넘으면 동작하는 css 입니다.
최소 768px 까지는 .visible-lg (Small) 클래스를 안보이도록 설정했습니다.
이대로 적용후 html에서 아래와 같이 설정한다면, 화면 넓이를 조절해보시면 동적으로 768px 이하에서는 small이 보이고, 768px 이상에서는 large만 보이게 됩니다.
<span class="visible-xs">small</span>
<span class="visible-lg">large</span>
결론적으로 큰 화면, 작은화면을 각각 따로 만들어서 @media를 이용해서 어느 화면 넓이를 기준으로 보이고 안보이고를 설정해준다면, 동적인 웹디자인이 완성됩니다.
긴글 읽어 주셔서 감사합니다.
더 궁금하신 사항은 댓글로 문의해주시면 빠르게 답변드리겠습니다.
댓글