2022-08-11
계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.
간단 개요
미디어 쿼리라는 게 무엇인가!
검색한 내용을 토대로 이론적인 내용만 정리해 보도록 하겠다.
미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if조건문과 비슷하다고 한다. (뭔지 모름. 나중에 찾아봐야지.)
@media(조건){스타일}같은 식으로 사용된다.
스타일부분에 일반적인 CSS코드가 들어간다.조건부분이 만족될 때에 스타일이 적용되고, 만족되지 않을 때 스타일이 무시되는 것이다.
미디어 쿼리를 이용한 반응형 웹 개발
미디어 쿼리의 이 조건덕분에 반응형 웹을 개발할 때 break point를 설정할 수 있다. 화면이 점점 작아지면서 pc레이아웃과 태블릿 레이아웃, 모바일 레이아웃으로 바뀌는 '분기점'을 설정해주게 되는데, 바로 이 분기점이 되는 뷰포트 크기를 조건에 입력하게 되는 것.
같은 원리로 작은 화면이나 큰 화면에서는 안 보이는 개체를 따로 지정해줄 수도 있게 된다.
@media screen and (max-width: 768px) {
#hire-section .row{
flex-direction
}
}
=스크린의 너비가 768이하가 되면 세로 나열로 바뀐다.
media옆에 붙어있는screen은 미디어 타입을 가리키는데,
1.all: 전부
2.screen: 스크린 화면
3.
4.tv: 텔레비전
이렇게 나눌 수 있겠다.
유의할 점은,
미디어 쿼리 안에 들어가는 CSS코드는 내가 '바꿔주고 싶은' 부분만 넣는 것이다. 태블릿 혹은 모바일 버전의 CSS를 일일이 다 적었다간 코드가 길고 지저분해지므로, 중복되는 부분은 날려줄 것!
또한 비슷한 맥락으로 브레이크 포인트를 태블릿, 모바일 두 가지를 잡았는데, 태블릿에서 적용한 속성이 모바일에도 동일하게 들어간다면 이 경우 모바일에서는 그 속성을 삭제해주어도 무방하다.
아! 그리고
HTML 처음 작성할 때에,
<head>
<meta name="viewport" content="width=device-width, initial scale=1">
</head>위의 meta코드를 넣어주어야 한다. 그렇지 않으면 쿼리가 반응형으로 작동하지 않는다고 한다...
그렇다고 한다!
