본문 바로가기
반응형

전체 글118

boostrap5 col Bootstrap의 반응형 그리드 시스템col-xxl-8: xxl는 "extra extra large"를 의미하며, 매우 큰 화면(최소 1400px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.col-lg-8: lg는 "large"를 의미하며, 큰 화면(최소 992px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.이 두 클래스를 함께 사용하면 화면의 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어:화면 크기가 992px 이상이고 1400px 미만인 경우, col-lg-8이 적용되어 요소는 8열의 너비를 가집니다.화면 크기가 1400px 이상인 경우, col-xxl-8이 적용되어 요소는 여전히 8열의 너비를 유지합니다. 2024. 11. 2.
@include rfs($btn-font-size, --#{$prefix}btn-font-size); @include rfs($btn-font-size, --#{$prefix}btn-font-size);는 SCSS에서 믹스인(mixin)을 호출하는 구문입니다. 이 코드는 다음과 같은 의미를 갖습니다:@include: SCSS에서 믹스인을 포함할 때 사용하는 키워드입니다. 믹스인은 재사용 가능한 스타일 블록으로, 여러 곳에서 동일한 스타일을 적용할 수 있게 해줍니다.rfs(...): rfs는 미리 정의된 믹스인 이름입니다. 일반적으로 이 믹스인은 "responsive font sizes"를 다루는 데 사용되며, 폰트 크기를 반응형으로 조정하는 기능을 제공합니다.$btn-font-size: 이 변수는 버튼의 폰트 크기를 나타냅니다. 이 값은 SCSS 파일 내에서 정의된 변수로, 버튼의 기본 폰트 크기를 가지.. 2024. 11. 1.
크롬 설정 Chrome 개발자 도구(F12)를 열고, "네트워크" 탭에서 "Disable cache" 옵션을 체크한 후 페이지를 새로 고칩니다. 이 옵션은 개발자 도구가 열려 있는 동안만 적용됩니다. 2024. 10. 31.
gulp setting 초기 화면 1. node.js깔기 2. 걸프파일 설치npm install gulp browser-sync gulp-clean-css gulp-data gulp-dart-sass gulp-imagemin gulp-nunjucks-render gulp-uglify image-size nunjucks --save-dev설치하면 노드모듈 생김 (다른곳에서 파일 받을때 package.json파일만 저장해서 npm install 하면됨) 2024. 10. 27.
vscode extention 확정프로그램 인터넷 안될때 적용 Extensions for Visual Studio family of products | Visual Studio Marketplace ctrl+shfit+pInstall from VSIX  입력해서 선택다운로드한거 설치 2024. 10. 26.
vscode extention 확장프로그램 #1. 기본프로그램Auto Rename Tag  (여는태그 닫는태그 맞추기)Html to css autocompletion (html에서 만든 클래스 있으면 css입력시 자동으로 그 클래스 가져오기)indent-rainbow (들여쓰기 레인보우)live server (라이브서버)prettier - code formatter  (코드이쁘게 정리)css peek (html에서 클래스 클릭하면 해당 css로 파일로 이동)svg (svg미리보기)  #2. 사스live sass compilersass  #3. 걸프 gulp tasks  #4. 깃git graphgitLens=========================================== 사스 환경설정(세팅>settings.json)   걸프 환경설정 2024. 10. 26.
반응형

티스토리툴바