Front-end/CSS (1) 썸네일형 리스트형 SCSS로 반응형 웹 개발하기 기본적으로 CSS의 Media Query를 활용한 반응형 웹 개발과 같다. 대신 SCSS에서는 변수를 지원하기 때문에 코드의 가독성을 조금 더 높일 수 있다. 1. 변수 만들기 $phone: "only screen and (max-width : 769px)"; $desktop: "screen and (min-width : 769px)"; 2. 변수로 @media 사용하기 @media #{$phone} { //블록 안의 코드는 767px 이하에서만 적용된다. } @media #{$desktop} { //블록 안의 코드는 767px 이상에서만 적용된다. } 3. 예시 : 기기에 따라 배경 색 바꾸기 원본 코드 여기서 .top-menu의 색상을 모바일에서는 red로, 이외에서는 blue로 표시하려고 한다. S.. 이전 1 다음