미디어 쿼리 안에다가 root를 지정해주고 font size를 넣어주었다.
@media screen and (max-width: 768px) {
:root {
/* Font size */
--font-large: 30px;
--font-medium: 18px;
--font-regular: 16px;
--font-small: 14px;
--font-micro: 12px;
}
<div class="testimonial">...</div>
@media screen and (max-width: 768px)
style.css?_…6473290:560
.about__majors {
- flex-direction: column;
}
.about__majors {
- display: flex;
- justify-content: space-between;
- margin: 80px 0;
}
.about__majors는 글로벌 스타일 값은 이렇게 지정이 되어져 있다가
미디어쿼리가 적용이 되어있기 때문에 미디어쿼리에 있을 때는
플렉스 디렉션이 column으로 되어 있다
=> 즉 CSS 값이 글로벌적으로 설정된 값을 이긴다.
여기서 majors에서 디폴트의 디렉션은 row이지만 세부적으로 설정했기때문에 column이 적용되어지는
볼 수 있다.
'WEB > CSS' 카테고리의 다른 글
| PostCSS (0) | 2021.08.05 |
|---|---|
| css_고친것들 (0) | 2021.07.05 |
| CSS: Styling(dreamcoding_home) (0) | 2021.07.02 |
| CSS Variables(variable_before, variable_after)_dreamcoding (0) | 2021.07.02 |
| transform& transition(dreamcoding) (0) | 2021.07.02 |