scss SCSS에 stylelint와 Prettier 적용 SCSS에 대해 stylelint 규칙에 따른 형식 변환을 Prettier에서 수행하고 싶습니다. VSCode의 formatOnSave에서 stylelint와 일치하는 형식이 필요하다는 것이 이상적입니다. 설치할 때 항상 적용된 저장소를 찾는 것이 어려울 수 있으므로 메모하십시오. 라이브러리 설치 stylelint-config-idiomatic-order는 CSS 설명 순서 규칙입니다. 조건... stylelintscssVSCodeprettier [Angular] Angular Material 사용을 위한 SCSS 입문 Angular Material에서 테마를 만들고 싶었습니다. SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다. 공식 사이트 SCSS의 문법은 CSS를 확장한 형태로 되어 있다. CSS 그대로도 SCSS로 해석됩니다. SCSS에서는 변수를 선언하고 참조할 수 있습니다. 선언과 참조 방법 머리에 $를 붙여 값과 :로 구분하십시오. 변수의 범위는 선언을 포함하는 {} 안으로 제한... CSSAngularscssMaterialDesign Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다. SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. Docker 이미지 만들기 이 근처를 참고로. Dockerfile docker-compose.yml vue.js 앱 만들기 Manually select features 를 선택하면 ... MaterialDesignTypeScriptVue.jsscssBootstrap [font-awsome 오류]File to import not found or unreadable: font-awesome-sprockets. 오류 정보 데스크탑(뒤쪽에서 제작하고 있던 파일)에서는 움직이고 있던 데이터를 홈 디렉토리(실전의 파일)에 옮겼을 때 상기와 같은 에러가 나왔습니다. 1. 일반적인 원인 ・Gemfile 속에 gem 'font-awesome-sass'가 빠져 있다 ・app/stylesheets/application.scss 안에 @import "font-awesome-sprockets" 와 @import "font-aw... hamlRailsscssFontAwesome루비 FontAwesome 소개 FontAwesome이란? Haml에서 사용할 때 1.FontAwesome 용 gem 설치 2.import 3.Haml의 기술 방법 Html로 사용할 때 1. HTML 파일에 설명 참고 페이지 끝에 웹 폰트의 일종으로, 문자를 취급하는 것처럼 아이콘을 표시시킬 수 있다 Gemfile Gemfile에 추가하면 bundle install 서버를 다시 시작 application.scss 보려는 페... hamlRailsHTMLscssFontAwesome 【Rails】 gem "font-awesome-rails"가 작동하지 않고 아무것도 표시되지 않을 때의 대처법 이와 같이, 2개의 아이콘을 Gem font-awesome-rails 로 오른쪽에 배치하고 싶다. 1, 이번 고전한 현상으로, 아무것도 표시되지 않습니다. 가능한 원인 패턴은 ・아이콘의 기술 방법, 지정 방법이 잘못되어 있다. · font-awesome 버전 2, 이쪽은, 표시되었지만 아이콘이 나오지 않는다. · 많은 경우는 css에서 font-famiry를 지정 할 수 없습니다. ・그 외 ... hamlRailsscssFontAwesome루비 [Rails5] 라디오 버튼을 버튼으로 설정 radio button의 디자인에 능숙하고, 마무리는 이쪽 new.html.haml f.radio_button [컬럼 이름], [선택했을 때 컬럼에 넣고 싶은 값], id, class f.label [라벨 이름], for:[연동시키고 싶은 radio button의 id], class 완성 scss는 이쪽 new.scss label에 for를 붙이면, radio button과 연동하게 된다 이... scssRailshamlFontAwesome border로 둘러싸인 버튼 여러 테두리로 둘러싸인 디자인의 버튼을 만들고 싶습니다. 슬림 scss... HTMLCSSscss슬림 밑줄을 물결 모양으로 만들기 지정한 문자의 밑줄을 물결 모양으로 하고 싶다. 슬림 scss... HTMLCSSscss슬림 수평, 수평한 in in 수평 BOX의 수평 정렬과 BOX in BOX의 수평 정렬을 자주 사용하므로 메모로 남겨 둡니다. 슬림 scss 슬림 scss... HTMLCSSscss슬림 How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation [CSS애니메이션]삼(卍^o^)卍←이 녀석의 이것→卍을 돌리고 싶다 삼(卍^o^)卍 산조(卍^o^)卍 삼삼삼(卍^o^)卍 이 녀석, 굉장히 귀엽다. 굉장히 귀여워서 움직이고 싶어졌다. See the Pen by Mayu Mameuda ( ) 삼(卍^o^)卍 어쩌면 고속으로 왼쪽에서 오른쪽으로 흘러 가는 움직임은 없을 것이다. HTML과 SCSS. dululu.html .dululu 안에 .dululu__box 를 넣고 그 안에 三(卍^o^)卍 를 넣었어. d... 애니메이션HTMLscssCSS초보자 상대 경로에서 image 파일을 참조 할 수 없으므로 image-url을 사용해 보았습니다. 머리글과 바닥글 배경에 이미지를 삽입하고 싶습니다. 이런 느낌↓ OS: macOS Big Sur 11.2.2 Ruby: 2.6.5 Ruby on Rails: 6.0.0 Sass: 3.7.4 텍스트 편집기: Visual Studio Code 머리글/바닥글 CSS 선택기로 app/assets/stylesheets/style.css 라고 지정해, 「checks.jpg」를 app/assets/ima... CSSscssRails 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 webpack의 sass-loader 설정 방법에 대해. sass로 원래 변수를 만듭니다 (덮어 쓰기). webpack에서 sass-loader를 사용할 때, 설정 파일(webpack.config.js)의 기술이 WEB상에 복수 존재하고 있기 때문에 헤매는다. 하지만 에러도 발생하지 않고 사용할 수 있다. 마찬가지로 에도 설명이 있지만, 여기는 오류가 발생하여 사용할 수 없었다. webpack.config.js sass와 scss의 기술 방법이 다르고, sass는 들여쓰기로 행의 단락을 나타내는... Sassscsswebpack 너 아직 Twitter 검색 명령을 사용하고 있어? 여러분 아시는 Twitter.저는 최근 유저층의 조사라던가 Twitter의 검색을 사용할 기회가 많지만 진짜로 이것 사용하기 어렵다. 사용하기 어려운 점 - 한 번 검색하지 않으면이 표시가 나오지 않습니다. - 검색이 매번 재설정되므로 이전 검색에서 조금 바꾸는 것이 어렵습니다. - 명령으로 검색에 넣어도 괜찮지만 그것도 꽤 귀찮다. - 세로로 길고 사용하지 않는 항목도 표시되어 보기 어렵다... HTML트위터자바스크립트scss [SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다. 반응형 대응을 하는데 있어서, 대량의 요소의 height나 width를 「나중에」변경하지 않으면 안 되었다... sample.html sample.scss 원래의 스타일을 모두 mixin으로 변경해, 배율을 동적으로 건네주기로 했다 sample.scss 동영상 codepen... SassCSSCSS3scss 【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법 햄버거 메뉴를 클릭하면, ×표로 바꾸려면… … CSS로 만드는 방법도 있는 것 같지만, 어떻게 할까. ❶ 햄버거를 클릭하여 × 표시로 변경 ❷ 메뉴를 화면 오른쪽에서 슬라이드 아웃 toggle하려면 input type="checkbox" 이번에는 햄버거 아이콘을 클릭하여 메뉴를 끌어 내고 싶습니다. 그래서 햄버거 아이콘은 <label for="burger"></label> 안에 넣자. 일반적... scss자바스크립트변환CSSCSS3 행 수 지정, 행 수를 초과하면 숨기기 (css 전용) css만으로 행 수를 지정하는 방법 ①2행 이상일 때는 문자를 비표시로 한다 ②2행 이상일 때는 2행째의 끝에 3점 리더를 붙인다 ③◯행 이상으로 비표시 ※js에서도 할 수 있습니다. ②의 방법이라면 IE11 비대응입니다. (아마) index.html style.css 표시하려는 행 수 * line-height 을 height (단위 em) 로 해 overflow:hidden 하는 것만. 3... HTMLCSSCSS3scss Bootstrap을 도입한 애플리케이션에서 CSS가 반응하지 않는 경우의 대책 bootstrap이 도입 된 Rails 응용 프로그램에서 CSS가 적용되지 않는 현상을 해결합니다. Rails에서 Bootstrap을 사용하는 방법을 배웠지만 Bootstrap의 템플리가 아닌 부분에 CSS가 반응하지 않습니다. 아래가 코드와 브라우저에서의 외형. (Bootstrap의 사용법을 시도하고 있기 때문에, 액션이나 파일의 의도는 특별히 없다.) index.html.erb _head... CSSscssBootstrapRails 절대로 좌절하지 않는 Scss(초정중) SCSS와 SASS는 Sass (Syntactically Awesome Style Sheets)라는 Ruby의 CSS 메타 언어입니다. 장점이 많기 때문에 사용자는 많습니다. 프로그래밍 언어와 매우 유사하므로 변수, mixin, 루프 처리도 가능합니다. Css에서의 기술량과 비교하면 절반 정도로 끝날지도 모릅니다. 각각, Scss로 할 수 있는 것을 설명해 가네요. style.css ↓Scs... Sassscss Sass (CSS) 등 간격으로 배치하고 싶습니다. Sass의 SCSS 기법을 사용한다. index.html style.scss 하늘색의 범위는 화면 폭에 따라 30%로 되어 있기 때문에 가변적이다. 여기서 실현하고 싶은 것은 푸른 원이 등 간격으로 정렬 하늘색 사각형의 좌우에 푸른 원과의 간격이 없도록 한다 하단의 푸른 원은 상단의 간격에 맞게 왼쪽으로 채워집니다 화면 너비를 변경해도 위의 조건을 충족시킵니다. style.scss justi... HTMLCSSscssSass Brackets SASS Autocompile을 사용해 봅니다. Brackets의 확장 기능, SASS AutoCompile을 사용해 보았으므로 비망록을 남깁니다. OS는 Windows10 Node.js 및 Gulp는 사용하지 않습니다. 확장 관리자에서 검색하는 것 외에도 다음 사이트에서도 사용할 수 있습니다. 확장 프로그램을 설치하면 메뉴 모음에 SASS compiler라는 메뉴가 표시됩니다. Select Source Folder에서 main.scss가... Sass브래킷scss비망록 Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin 왜 너가 위에 있는 거야...? Z-index를 scss로 정리해 보았습니다. 매번 어딘지 모르게 z-index의 값을 결정하고 있으면, model가 숨어 버리거나, tooltp가 어디서나 나타나거나… 날이 지나면서 여러가지 사고가 일어납니다. 고치는 경우에도 해명까지 시간이 걸리는데, 전혀 관계가 없는 개소의 겹침이 이상해지거나 버립니다. 미리 z-index가 필요할 것 같은 요소를 변수로 준비해 둡니다. 큰 단위로 준비해, 세세한 값의 조정은 변수 + 1 등으로 대... SassCSSscssz-index Sass의 도입 난이도를 낮추는 툴들 "Syntactically Awesome StyleSheet"의 약자로, CSS를 효율적으로 기술할 수 있도록 설계·개발된 Ruby제의 CSS메타언어 Sass에 한하지 않고, CUI에서 터미널을 열고 명령을 치는 것은 초보자에게는 상당히 어렵습니다. 이번에는 그런 Sass를 간단하게 사용할 수 있는 툴을 소개합니다. Prepros Sass를 「Process File」이라고 하는 버튼을 클릭하... Sasspreprosscss Sapper에서 SCSS를 사용하는 방법 (rolllup 사용시) "어쩐지 rollup 추측구나-"라고 생각하고 있었을 정도로, Svelte의 개발자가 rollup의 개발자인 것을 최근 알았습니다. 이전에 이라는 것을 썼습니다만, rollup 이용시의 방법도 남겨두고 싶습니다. 설치할 패키지는 webpack 때와 마찬가지로 및 node-sass. (벤더 접두사 해소 도 편리하므로 함께 설치하고 있습니다) webpack의 경우 webpack.config.js... rollup.js사퍼scssSvelteSass SCSS 컴파일 오류시 데스크톱 알림을 보내는 방법 gulp에서 SCSS 컴파일 할 때, 오류가 발생하여 처리가 불가능하다는 것을 깨닫지 못하는 경우가 많았기 때문에, 데스크톱 알림을 받으려고했습니다. "gulp-notify""node-notifier"두 개의 패키지를 사용해 보았으므로, 둘 다 함께 둡니다. gulp-notify 를 install gulpfile.js에 task 쓰기 gulpfile.js 오류 발생 scss 알림이 나왔다! ... gulp-notifynode-notifierscssgulp [SCSS/Mixin] 텍스트의 line-height로 되어 버리는 여백을 선두와 마지막 행만 제거 XD에서 이러한 여백이 설정되었다고 가정합니다. 라인간(line-height)은, 디자인에서는 문자 사이즈가 16px에 대해서 행간이 48px이므로行間48px÷文字16px=3로 계산하고 line-height:3;를 설정합니다. 여백(margin-top)은 50px를 설정. 디자인에 확실히 맞춘 것인데, 여백 엄청 열어 버리고 있습니다. 이것은 line-height에 의해 선두와 끝도 여백이 ... HTMLCSSscss 이전 기사 보기
SCSS에 stylelint와 Prettier 적용 SCSS에 대해 stylelint 규칙에 따른 형식 변환을 Prettier에서 수행하고 싶습니다. VSCode의 formatOnSave에서 stylelint와 일치하는 형식이 필요하다는 것이 이상적입니다. 설치할 때 항상 적용된 저장소를 찾는 것이 어려울 수 있으므로 메모하십시오. 라이브러리 설치 stylelint-config-idiomatic-order는 CSS 설명 순서 규칙입니다. 조건... stylelintscssVSCodeprettier [Angular] Angular Material 사용을 위한 SCSS 입문 Angular Material에서 테마를 만들고 싶었습니다. SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다. 공식 사이트 SCSS의 문법은 CSS를 확장한 형태로 되어 있다. CSS 그대로도 SCSS로 해석됩니다. SCSS에서는 변수를 선언하고 참조할 수 있습니다. 선언과 참조 방법 머리에 $를 붙여 값과 :로 구분하십시오. 변수의 범위는 선언을 포함하는 {} 안으로 제한... CSSAngularscssMaterialDesign Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다. SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. Docker 이미지 만들기 이 근처를 참고로. Dockerfile docker-compose.yml vue.js 앱 만들기 Manually select features 를 선택하면 ... MaterialDesignTypeScriptVue.jsscssBootstrap [font-awsome 오류]File to import not found or unreadable: font-awesome-sprockets. 오류 정보 데스크탑(뒤쪽에서 제작하고 있던 파일)에서는 움직이고 있던 데이터를 홈 디렉토리(실전의 파일)에 옮겼을 때 상기와 같은 에러가 나왔습니다. 1. 일반적인 원인 ・Gemfile 속에 gem 'font-awesome-sass'가 빠져 있다 ・app/stylesheets/application.scss 안에 @import "font-awesome-sprockets" 와 @import "font-aw... hamlRailsscssFontAwesome루비 FontAwesome 소개 FontAwesome이란? Haml에서 사용할 때 1.FontAwesome 용 gem 설치 2.import 3.Haml의 기술 방법 Html로 사용할 때 1. HTML 파일에 설명 참고 페이지 끝에 웹 폰트의 일종으로, 문자를 취급하는 것처럼 아이콘을 표시시킬 수 있다 Gemfile Gemfile에 추가하면 bundle install 서버를 다시 시작 application.scss 보려는 페... hamlRailsHTMLscssFontAwesome 【Rails】 gem "font-awesome-rails"가 작동하지 않고 아무것도 표시되지 않을 때의 대처법 이와 같이, 2개의 아이콘을 Gem font-awesome-rails 로 오른쪽에 배치하고 싶다. 1, 이번 고전한 현상으로, 아무것도 표시되지 않습니다. 가능한 원인 패턴은 ・아이콘의 기술 방법, 지정 방법이 잘못되어 있다. · font-awesome 버전 2, 이쪽은, 표시되었지만 아이콘이 나오지 않는다. · 많은 경우는 css에서 font-famiry를 지정 할 수 없습니다. ・그 외 ... hamlRailsscssFontAwesome루비 [Rails5] 라디오 버튼을 버튼으로 설정 radio button의 디자인에 능숙하고, 마무리는 이쪽 new.html.haml f.radio_button [컬럼 이름], [선택했을 때 컬럼에 넣고 싶은 값], id, class f.label [라벨 이름], for:[연동시키고 싶은 radio button의 id], class 완성 scss는 이쪽 new.scss label에 for를 붙이면, radio button과 연동하게 된다 이... scssRailshamlFontAwesome border로 둘러싸인 버튼 여러 테두리로 둘러싸인 디자인의 버튼을 만들고 싶습니다. 슬림 scss... HTMLCSSscss슬림 밑줄을 물결 모양으로 만들기 지정한 문자의 밑줄을 물결 모양으로 하고 싶다. 슬림 scss... HTMLCSSscss슬림 수평, 수평한 in in 수평 BOX의 수평 정렬과 BOX in BOX의 수평 정렬을 자주 사용하므로 메모로 남겨 둡니다. 슬림 scss 슬림 scss... HTMLCSSscss슬림 How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation [CSS애니메이션]삼(卍^o^)卍←이 녀석의 이것→卍을 돌리고 싶다 삼(卍^o^)卍 산조(卍^o^)卍 삼삼삼(卍^o^)卍 이 녀석, 굉장히 귀엽다. 굉장히 귀여워서 움직이고 싶어졌다. See the Pen by Mayu Mameuda ( ) 삼(卍^o^)卍 어쩌면 고속으로 왼쪽에서 오른쪽으로 흘러 가는 움직임은 없을 것이다. HTML과 SCSS. dululu.html .dululu 안에 .dululu__box 를 넣고 그 안에 三(卍^o^)卍 를 넣었어. d... 애니메이션HTMLscssCSS초보자 상대 경로에서 image 파일을 참조 할 수 없으므로 image-url을 사용해 보았습니다. 머리글과 바닥글 배경에 이미지를 삽입하고 싶습니다. 이런 느낌↓ OS: macOS Big Sur 11.2.2 Ruby: 2.6.5 Ruby on Rails: 6.0.0 Sass: 3.7.4 텍스트 편집기: Visual Studio Code 머리글/바닥글 CSS 선택기로 app/assets/stylesheets/style.css 라고 지정해, 「checks.jpg」를 app/assets/ima... CSSscssRails 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 webpack의 sass-loader 설정 방법에 대해. sass로 원래 변수를 만듭니다 (덮어 쓰기). webpack에서 sass-loader를 사용할 때, 설정 파일(webpack.config.js)의 기술이 WEB상에 복수 존재하고 있기 때문에 헤매는다. 하지만 에러도 발생하지 않고 사용할 수 있다. 마찬가지로 에도 설명이 있지만, 여기는 오류가 발생하여 사용할 수 없었다. webpack.config.js sass와 scss의 기술 방법이 다르고, sass는 들여쓰기로 행의 단락을 나타내는... Sassscsswebpack 너 아직 Twitter 검색 명령을 사용하고 있어? 여러분 아시는 Twitter.저는 최근 유저층의 조사라던가 Twitter의 검색을 사용할 기회가 많지만 진짜로 이것 사용하기 어렵다. 사용하기 어려운 점 - 한 번 검색하지 않으면이 표시가 나오지 않습니다. - 검색이 매번 재설정되므로 이전 검색에서 조금 바꾸는 것이 어렵습니다. - 명령으로 검색에 넣어도 괜찮지만 그것도 꽤 귀찮다. - 세로로 길고 사용하지 않는 항목도 표시되어 보기 어렵다... HTML트위터자바스크립트scss [SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다. 반응형 대응을 하는데 있어서, 대량의 요소의 height나 width를 「나중에」변경하지 않으면 안 되었다... sample.html sample.scss 원래의 스타일을 모두 mixin으로 변경해, 배율을 동적으로 건네주기로 했다 sample.scss 동영상 codepen... SassCSSCSS3scss 【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법 햄버거 메뉴를 클릭하면, ×표로 바꾸려면… … CSS로 만드는 방법도 있는 것 같지만, 어떻게 할까. ❶ 햄버거를 클릭하여 × 표시로 변경 ❷ 메뉴를 화면 오른쪽에서 슬라이드 아웃 toggle하려면 input type="checkbox" 이번에는 햄버거 아이콘을 클릭하여 메뉴를 끌어 내고 싶습니다. 그래서 햄버거 아이콘은 <label for="burger"></label> 안에 넣자. 일반적... scss자바스크립트변환CSSCSS3 행 수 지정, 행 수를 초과하면 숨기기 (css 전용) css만으로 행 수를 지정하는 방법 ①2행 이상일 때는 문자를 비표시로 한다 ②2행 이상일 때는 2행째의 끝에 3점 리더를 붙인다 ③◯행 이상으로 비표시 ※js에서도 할 수 있습니다. ②의 방법이라면 IE11 비대응입니다. (아마) index.html style.css 표시하려는 행 수 * line-height 을 height (단위 em) 로 해 overflow:hidden 하는 것만. 3... HTMLCSSCSS3scss Bootstrap을 도입한 애플리케이션에서 CSS가 반응하지 않는 경우의 대책 bootstrap이 도입 된 Rails 응용 프로그램에서 CSS가 적용되지 않는 현상을 해결합니다. Rails에서 Bootstrap을 사용하는 방법을 배웠지만 Bootstrap의 템플리가 아닌 부분에 CSS가 반응하지 않습니다. 아래가 코드와 브라우저에서의 외형. (Bootstrap의 사용법을 시도하고 있기 때문에, 액션이나 파일의 의도는 특별히 없다.) index.html.erb _head... CSSscssBootstrapRails 절대로 좌절하지 않는 Scss(초정중) SCSS와 SASS는 Sass (Syntactically Awesome Style Sheets)라는 Ruby의 CSS 메타 언어입니다. 장점이 많기 때문에 사용자는 많습니다. 프로그래밍 언어와 매우 유사하므로 변수, mixin, 루프 처리도 가능합니다. Css에서의 기술량과 비교하면 절반 정도로 끝날지도 모릅니다. 각각, Scss로 할 수 있는 것을 설명해 가네요. style.css ↓Scs... Sassscss Sass (CSS) 등 간격으로 배치하고 싶습니다. Sass의 SCSS 기법을 사용한다. index.html style.scss 하늘색의 범위는 화면 폭에 따라 30%로 되어 있기 때문에 가변적이다. 여기서 실현하고 싶은 것은 푸른 원이 등 간격으로 정렬 하늘색 사각형의 좌우에 푸른 원과의 간격이 없도록 한다 하단의 푸른 원은 상단의 간격에 맞게 왼쪽으로 채워집니다 화면 너비를 변경해도 위의 조건을 충족시킵니다. style.scss justi... HTMLCSSscssSass Brackets SASS Autocompile을 사용해 봅니다. Brackets의 확장 기능, SASS AutoCompile을 사용해 보았으므로 비망록을 남깁니다. OS는 Windows10 Node.js 및 Gulp는 사용하지 않습니다. 확장 관리자에서 검색하는 것 외에도 다음 사이트에서도 사용할 수 있습니다. 확장 프로그램을 설치하면 메뉴 모음에 SASS compiler라는 메뉴가 표시됩니다. Select Source Folder에서 main.scss가... Sass브래킷scss비망록 Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin 왜 너가 위에 있는 거야...? Z-index를 scss로 정리해 보았습니다. 매번 어딘지 모르게 z-index의 값을 결정하고 있으면, model가 숨어 버리거나, tooltp가 어디서나 나타나거나… 날이 지나면서 여러가지 사고가 일어납니다. 고치는 경우에도 해명까지 시간이 걸리는데, 전혀 관계가 없는 개소의 겹침이 이상해지거나 버립니다. 미리 z-index가 필요할 것 같은 요소를 변수로 준비해 둡니다. 큰 단위로 준비해, 세세한 값의 조정은 변수 + 1 등으로 대... SassCSSscssz-index Sass의 도입 난이도를 낮추는 툴들 "Syntactically Awesome StyleSheet"의 약자로, CSS를 효율적으로 기술할 수 있도록 설계·개발된 Ruby제의 CSS메타언어 Sass에 한하지 않고, CUI에서 터미널을 열고 명령을 치는 것은 초보자에게는 상당히 어렵습니다. 이번에는 그런 Sass를 간단하게 사용할 수 있는 툴을 소개합니다. Prepros Sass를 「Process File」이라고 하는 버튼을 클릭하... Sasspreprosscss Sapper에서 SCSS를 사용하는 방법 (rolllup 사용시) "어쩐지 rollup 추측구나-"라고 생각하고 있었을 정도로, Svelte의 개발자가 rollup의 개발자인 것을 최근 알았습니다. 이전에 이라는 것을 썼습니다만, rollup 이용시의 방법도 남겨두고 싶습니다. 설치할 패키지는 webpack 때와 마찬가지로 및 node-sass. (벤더 접두사 해소 도 편리하므로 함께 설치하고 있습니다) webpack의 경우 webpack.config.js... rollup.js사퍼scssSvelteSass SCSS 컴파일 오류시 데스크톱 알림을 보내는 방법 gulp에서 SCSS 컴파일 할 때, 오류가 발생하여 처리가 불가능하다는 것을 깨닫지 못하는 경우가 많았기 때문에, 데스크톱 알림을 받으려고했습니다. "gulp-notify""node-notifier"두 개의 패키지를 사용해 보았으므로, 둘 다 함께 둡니다. gulp-notify 를 install gulpfile.js에 task 쓰기 gulpfile.js 오류 발생 scss 알림이 나왔다! ... gulp-notifynode-notifierscssgulp [SCSS/Mixin] 텍스트의 line-height로 되어 버리는 여백을 선두와 마지막 행만 제거 XD에서 이러한 여백이 설정되었다고 가정합니다. 라인간(line-height)은, 디자인에서는 문자 사이즈가 16px에 대해서 행간이 48px이므로行間48px÷文字16px=3로 계산하고 line-height:3;를 설정합니다. 여백(margin-top)은 50px를 설정. 디자인에 확실히 맞춘 것인데, 여백 엄청 열어 버리고 있습니다. 이것은 line-height에 의해 선두와 끝도 여백이 ... HTMLCSSscss 이전 기사 보기