본문 바로가기
728x90
300x250
SMALL

Front-end401

Sacc에서 변수 (_variables.scss)와 mixin(_mixins.scss) 자원 관리하기 1. 파일 구조 예시scss/ _variables.scss // 변수 모음 _mixins.scss // 믹스인 모음 _reset.scss // reset 스타일 main.scss // 실제 빌드되는 진입 파일 2. _variables.scss// 색상 변수$color-primary: #007bff;$color-secondary: #6c757d;// 폰트 사이즈$font-size-base: 16px;$font-size-lg: 20px; 3. _mixins.scss// 반응형 breakpoint 믹스인@mixin respond($breakpoint) { @if $breakpoint == sm { @media (max-width: 576px) { @con.. 2025. 9. 13.
Gulp 설치하고 scss -> css 자동 변환 Gulp란?Gulp는 자동화 빌드 도구 이다.SCSS -> CSS 변환JS압축 / 번들링이미지 최적화브라우저 리로드기타 반복되는 웹 개발 작업쉽게 말하면 : 개발자가 반복적으로 해야 하는 일을 자동으로 처리해주는 도구 Gulp 특징특징설명Node.js기반자바스크립트 환경에서 실행스트림 처리파일을 읽고, 변환하고, 출력하는 과정을 빠르게 처리플러그인 많은gulp-sass, gulp-uglify, gulp-imagemin 등 거의 모든 작업용 플러그인 존재watch 기능파일 변경 감지 -> 자동 빌드 가능코드 기반설정을 GUI가 아니라 코드(gulpfile.js)로 작성 1. Node.js 설치 확인Gulp는 Node.js 기반이므로 먼저 Node.js가 설치되어 있어야 한다.node -vnpm -v버전.. 2025. 9. 7.
noUiSlider 사용하여 멀티슬라이더 만들기 noUiSlider 설치하기https://refreshless.com/nouislider/ noUiSlider - JavaScript Range Slider | Refreshless.comnoUiSlider: lightweight JavaScript range slider with full touch support Accessible with ARIA and keyboard support Multi-Touch support on iOS, Android & Windows devices GPU animated: no reflows, so fast; even on older devices Responsive design friendly No drefreshless.com 1. CDN으로 불러오기 2. .. 2025. 9. 6.
코드이그나이터(CodeIgniter) 설치 따라하기 1. XAMPP 설치https://www.apachefriends.org/download.html Download XAMPPIncludes: Apache 2.4.58, MariaDB 10.4.32, PHP 8.0.30 & PEAR + SQLite 2.8.17/3.38.5 + multibyte (mbstring) support, Perl 5.34.1, ProFTPD 1.3.6, phpMyAdmin 5.2.1, OpenSSL 1.1.1w, GD 2.2.5, Freetype2 2.4.8, libpng 1.6.37, gdbm 1.8.3, zlib 1.2.11, expat 2.0.1,www.apachefriends.org 위 사이트에서 다운 받을 수 있고 8.1 이상 버전 다운 권장아래있는게 최신 버전 다운 받아.. 2025. 8. 26.
728x90
반응형
LIST

티스토리툴바