Final touch(portfolio)

미디어 쿼리 안에다가 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 {

1. flex-direction: column;

}

 

.about__majors {

1. display: flex;
2. justify-content: space-between;
3. margin: 80px 0;

}

.about__majors는 글로벌 스타일 값은 이렇게 지정이 되어져 있다가

미디어쿼리가 적용이 되어있기 때문에 미디어쿼리에 있을 때는

플렉스 디렉션이 column으로 되어 있다

=> 즉 CSS 값이 글로벌적으로 설정된 값을 이긴다.

여기서 majors에서 디폴트의 디렉션은 row이지만 세부적으로 설정했기때문에 column이 적용되어지는

볼 수 있다.