프론트엔드 개발 찔찔이

기본 미디어쿼리 사용.top-bar{ .con { max-width:1200px; background:lightcoral; @media(1150px >= width > 750px) { max-width:900px; background: lightblue; } @media(750px >= width) { max-width:500px; background: lightgreen; } }}이 방법은 css가 길어질 수록 코드가 반복될 수 있다. 믹스인, 조건문 조합한 반응형 작업@mixin response-con($breakpoint){ @..

css를 코드 블록으로 만들어 해당 블록을 재사용믹스인 정의 및 호출// @mixin : 믹스인 정의@mixin common-btn { width: 150px; height: 50px; background: #afafaf; border: 2px solid black; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: bold; margin-bottom: 10px; &:hover{ text-decoration: underline; text-underline-posi..

설치npm install -g sassCSS컴파일sass style.scss style.cssSCSS 파일 자동 컴파일 설정(선택 사항)sass --watch style.scss:style.css이 명령어는 style.css파일을 감시하여 변경될 때마다 style.css로 자동 컴파일한다.변수#var.scss$bg-color: blue;$bg-hover: lightgreen;@use 'var';div { width: 200px; height: 200px; background: var.$bg-color; &:hover { // & : div로 보면 된다. background: var.$bg-hover; }}💡최신 Sass 버전에서는 @import 대신 @use를 권..