본문 바로가기
반응형

개발 공부/ㄴ SCSS3

SCSS / @mixin, @for문으로 하단 고정 탭바 만들기 (하단 네비게이션) Scss에서 for문으로하단 탭바 만들기를 해볼께요!하단 탭바는 버튼 갯수가 변경될 여지가 있으므로 for문을 사용해보겠습니다. 보통 직관적인 이름을 사용하는 것을 추천드리며버튼은 3개에서 최대 5개까지만 사용하시길 권장드립니다._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $.. 2024. 7. 9.
SCSS / @mixin 아이콘 배경 이미지로 사용하기 ( 아이콘 버튼 ) 믹스인을 활용해서배경이미지로 만들어진 버튼을 만들어 볼께요이미지 삽입보단 편하더라구요._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지//파일명, 가로정렬, 세로정렬, 배경색, 가로사이즈, 세로사이즈, 보더라운드@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $boradi;}  _button.scss.btn{ displa.. 2024. 7. 6.
SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리 웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS수정이 너무 용이해서 신세계를 경험했습니다. 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.1. SCSS 프로그램 설치비주얼 스튜디오.. 2024. 5. 6.
반응형