[CSS] 미디어쿼리 적용하기
selecter 밖에서 설정해주는 방법도 있지만,
size.scss라는 파일을 만들어서 공통적으로 사용하는 스타일과 브레이크포인트를 설정해줄 수 있다.
- size.scss
$desktop-max-size: "screen and(max-width:1200px)";
$변수명: "브레이크포인트를 설정", 위와 같이 내가 설정하고 싶은 사이즈를 설정해주고
아래와 같이 사용할 수 있다.
- main.scss
.bottom{
@media #{desktop-max-size}{
font-size:13px;
color:red;
}
}
설정하고 싶은 브레이크포인트를 변수로 설정하여 더욱 간결한 코드를 작성할 수 있었다.
또 size.scss파일내에서 변수를 지정하고 그것을 미디어쿼리에 적용하여 스타일을 할수도있다.
- size.scss
- main.scss
Author And Source
이 문제에 관하여([CSS] 미디어쿼리 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@duswn38/CSS-미디어쿼리-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
