[Media Query]
<meta name="viewport" content="width=device-width" />반응형 웹 ; Responsive Web을 만들기 위해서 HTML <head> 태그 안에 위와 같은 meta 태그를 선언해야함.
@media screen and (min-width: 768px){
}모바일, 태블릿, 데스크탑 순서로 viewport가 점점 커지는 형식으로 작업을 하는 것이 더 수월하다. 예를 들어 모바일에 맞는 CSS를 적용했을 시, 그 아래 media query를 선언하고 먼저 선언한 스타일코드와 다른 부분을 적으면 된다.
.banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffc82c;
}
@media screen and (min-width: 768px) {
.banner {
bottom: auto;
top: 0;
}
}모바일 CSS에서 position의 값을 fixed로 준 경우, media query에서는 bottom 값을 auto로 수정한 뒤, 원하는 top의 값을 적는다.
강의를 들으면서 실습훈련을 하고 있는데 padding 값을 언제 써야하는 지 헷갈린다...
'Front End > HTML & CSS' 카테고리의 다른 글
| [CSS] 김버그의 HTML&CSS는 재밌다 | CSS RESET (0) | 2021.05.01 |
|---|---|
| [HTML] 김버그의 HTML&CSS는 재밌다 | Bootstrap Grid system (0) | 2021.05.01 |
| [CSS] 김버그의 HTML&CSS는 재밌다 | Screen Only (0) | 2021.04.29 |
| [CSS] 김버그의 HTML&CSS는 재밌다 | Background (0) | 2021.04.29 |
| [CSS] 김버그의 HTML&CSS는 재밌다 | Typography (0) | 2021.04.28 |
댓글