css media query

·2021년 3월 2일
0

web-html, css

목록 보기
4/4

이론

media querymedia type이랑 media feature expression으로 구성됨. 주로 반응형 웹을 만들기 위해 쓰이는 듯.

  • media type이 문서를 조회하는 디바이스와 일치하는 경우
  • 모든 media feature expressions compute ⇒ True

이 두개가 모두 True 인 경우 media query는 True로 판별되고 그 안 내용이 적용됨.

media types

  • all: 모든 디바이스에 적용 가능. default type
  • print: print preview 모드에서 보여질 때 적용됨.
  • screen: 그냥 화면인 경우 적용
  • speech: speech synthesizers(음성 합성 장치)인 경우 적용

media features

media features(미디어 특성)은 주로 user agent의 특정 characteristic들, output 디바이스, 또는 environment을 나타낸다.
EX) 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에만 적용할 수 있음.

아래 5가지 media features는 반응형 웹 css에서 주로 사용한다는 features이다.

  • width, height: viewport의 width와 height(scrollbar 너비/높이 포함)
    width, heigth는 접두에 max-혹은 min-을 붙일 수 있다. 아래 참고.
  • color
    output device의 color component 비트의 수
  • orientation
    viewport의 orientation(화면의 가로 세로 방향)

@media(max-width: 770px) 의 의미

@media screen and (max-width: 770px) {
	body {
		background-color: lightgreen;
	}
}

여기서 screen 은 type에 해당, 생략하면 all이 기본값이 되어 모든 미디어 타입에 적용됨.

max-width: 770px 이면 770px 이하의 너비를 가진 화면일 경우 적용된다는 의미임.

즉, (max-width: yyypx)일 때 yyy보다 작은 너비를 가진 화면일 경우에만 {..}이 적용됨.

/* 
*모바일을 우선할 경우* 
*/

/* 모바일에 적용될 스타일 코드*/
@media screen and (min-width: 769px){
	/* 데스크탑에 적용될 스타일 코드 */
}

/* 
*데스크탑을 우선할 경우* 
*/

/* 데스크탑에 적용될 스타일 코드 */
@media screen and (max-width: 770px) {
	/* 모바일에 적용될 스타일 코드 */
}

참고: https://offbyone.tistory.com/121

profile
이것저것 개발하는 것 좋아하지만 서버 개발이 제일 좋더라구요..

0개의 댓글