[ 반응형 웹을 만드는 Media Query ]
화면 크기에 따라 반응하는 웹을 만드는데 필요한 media query에 대해 학습합니다.
@media (){
} 라는 구조를 가지고 있는대요
- @media(width:500px){
width가 500px일 때 지정할 속성을 지정하게 됨.
}
- @media(max-width:500px){
최대 500px까지 즉 0~500px까지를 의미
}
- @media(min-width:500px){
최소 500px 즉 500px 이상을 의미한다.
}
만약 500 ~ 600을 지정하고 싶다면?
cascading을 주의해야한다. 나중에 쓴 것이 우선순위가 더 높다는 것에 유의!
@media(max-width:600px){
background-color:red;
}
@media(max-width:500px){
background-color:blue;
}
이렇게하면 500 ~ 600 px까지는 red가 적용되고 500이하가 되면 blue가 적용된다.
만약 두개의 순서를 바꿔서 쓰면? 600px이하면 0픽셀이 될때까지 red가 나오게 된다. cascading에 의한 우선순위때문에
이점을 유의해서 작성하자.
또한, 모바일 기기에서도 반응형이 잘 적용될 수 있도록 다음의 meta 태그를 넣도록 하자.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Flex로 만든 layout에 Media Query를 적용해 보기
아래는 모바일 화면(500px 보다 작아졌을 때) section 영역이 수직으로 main nav aside 순으로 보이고
기존에 nav와 aside가 가지고 있었던 border를 없애는걸 적용한 것이다.
따라서, section의 flex-direction:column으로 바꾸고 nav와 aside의 border를 border:none으로 한 다음에
flex의 order 속성을 이용해서 순서를 지정해주면 된다.
'개발 > css' 카테고리의 다른 글
| CSS로 일정 길이 이상일 때 텍스트 줄임말 ...로 표시하기/일정 길이 이상이면 자동 개행처리하기 (1) | 2017.06.16 |
|---|---|
| float 속성과 float를 이용한 Holy Grail Layout (0) | 2017.06.04 |
| 화면의 Layout을 그리는 Flex에 대하여... (0) | 2017.06.04 |
| position offset에 대해서... (0) | 2017.06.03 |
| layout 관련 속성 (0) | 2017.06.03 |