맨동이

hover시 살짝 올라가는 버튼UI를 만들어보자. 실행 결과 body { background-color:lightgrey; display:flex; align-items:center; height:300px; } button { cursor: pointer; color: black; width: 300px; height: 30px; display: block; margin: 0 auto; border: solid 1px black; background-color: whitesmoke; border-radius: 5px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; } button:hover { background-c..

SCSS 문자 보간 #{ } 를 이용하여 문자 보간을 사용할 수 있습니다. @mixin box($position, $width, $color) { border-#{$position}: $width solid $color; } div{ @include box(left, 2px, blue); } 가져오기 @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 또한, 쉼표를 사용하여 여러 파일을 가져올 수도 있습니다. @import "header", "footer"; 반복문 @for 을 사용하여 스타일은 반복적으로 사용할 수 있습니다. through 를 사용하거나 to 를 사용하는 형식이 있는데, 이 둘은 종료 조건이 해석되는 방식이 다릅니다. // through // 종료..

SCSS 란? CSS 전(예비)처리기 CSS Preprocessor 라고 부릅니다. 주석 더보기 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 중첩 //SCSS .section { width: 80%; .list { margin: 10px; li { text-align: left; } } } 이것을 컴파일 하면 //CSS .section { width: 80%; } .section .list { margin: 10px; } .section .list li { text-align: left; } 상위 선택자 참조 중첩안에서 & 를 이용하면 상위 선택자를 참조하여 치환해줍니다. //SCSS .main { &.active { opacity: 1; } } //CSS .main.active { opacit..