일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- parent padding
- debouncing
- ㅡ
- 서초구보건소 #무료CPR교육
- createPortal
- alias설정
- vite
- 조건부스타일
- transition
- CustomHook
- useQueryClient
- 화살표2개
- accordian
- react
- QueryClient
- DOM
- 부모요소의 패딩 무시
- ?? #null병합연산자
- twoarrow
- BlockFormattingContext
- es6
- 제어컴포넌트
- tailwindCSS
- 문제해결
- 함수형프로그래밍
- Carousel
- 리액트
- BFC
- ignore padding
- 부모패딩
Archives
- Today
- Total
프론트엔드 첫걸음
반응형 레이아웃 - media query 본문
head에 아래와 같은 코드 있어야 모바일에서 작동할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
미디어 쿼리는 CSS 파일 제일 아랫쪽에 작성한다!
똑같은 클래스명으로 똑같은 스타일을 재정의하는(덮어씌우는) 것이기 때문에 맨 마지막에 작성해야한다.
@media screen and (max-width : 1200px) {
.box {
font-size : 40px;
}
}
@media screen and (max-width : 1200px)
: "현재 브라우저의 폭이 1200px 이하일 경우에 아래 스타일을 적용한다" 라는 뜻
'개발 공부 > CSS' 카테고리의 다른 글
input file 버튼 스타일 바꾸기 - 1. shadow DOM의 존재 (0) | 2022.07.11 |
---|---|
:: Pseudo-element (0) | 2022.07.11 |
CSS 파일 수정하기 (0) | 2022.07.08 |
부트스트랩 반응형 레이아웃 (0) | 2022.07.08 |
애니메이션 효과가 들어간 상품 레이아웃 만들기 (0) | 2022.07.07 |