SASS(SCSS)9 웹 아이콘, 웹 폰트 사용하기 라인어썸 icons8.com/line-awesome/howto Download 158k Free Icons + Illustrations, Photos, and Music Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️ icons8.com 링크를 안에 넣어 사용 구글폰트 fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com.. 2021. 1. 25. SCSS 주석 넣기 // 주석은 SCSS파일에서만 표기되고 /**/ 주석은 CSS, SCSS 파일 모두에 표기됩니다. 2021. 1. 22. SCSS 연산자 scss에서는 연산이 가능합니다. ( +, -, *, / , % ) h1의 가로 값은 변수wrapW에서 3을 나눈 값으로 넣어주고 #gnb의 가로 값은 변수wrapW에서 2을 나눈 값으로 넣어주고 header { height: 200px; background: $green; display: flex; justify-content: space-between; h1 { width: $wrapW/3; } #gnb { width: $wrapW/2; height: 100px; background: $tomato; li { float: left; } a { display: block; &:hover { color: $tomato; } } } } 2021. 1. 22. SCSS - @import 하기 css안에 다른 css 불러오기 : @import url(주소); @import url(../reset.css); scss에서 css 불러오기 : @import url(주소); @import url(../css/reset.css); @import url(../css/main.css); scss에서 scss불러오기 : @import '파일명'; *언더바는 입력하지 않음 @import 'contents'; ※ scss파일 이름 앞에 _(언더바)를 넣어주면 css폴더에 해당 파일이 추가되지 않습니다. ※ css파일은 지워도 다시 생성되지만, reset.css파일은 생성되지 않으니 삭제하지 마세요. _(언더바)를 넣어서 css가 생성되지 않은 scss 파일은 comm.scss 파일에서 불러와야 적용이 됩니다. .. 2021. 1. 22. SCSS : @mixin - @include 사용하기 @mixin 지시문을 사용하여 웹사이트 전체에서 반복적으로 사용하는 css코드를 만들 수 있습니다. @include 지시문으로 @mixin을 적용 시켜 줍니다. _mixin.scss 파일을 만든후, @mixin 이름 {명령문} 을 정의합니다. @import 'mixin'; 을 상단에 넣어 파일을 링크시킨 후, 적용해줄 부분에 @include 파일명; 을 작성합니다. 자주 사용하는 @mixin //가로 가운데 정렬 @mixin posX { position: absolute;left: 50%;transform: translateX(-50%); } //세로 중앙 정렬 @mixin posY { position: absolute;top: 50%;transform: translateY(-50%); } //가로 세로.. 2021. 1. 22. SCSS 작성 하기 형제 선택하기 : name { &형제name {명령문} } .sec-g { &.sec-sns{ h2 { font-size: 30px; color:$green; } } 마우스 오버 했을때 효과 넣기 : name {&:hover {명령문}} a { display: block; &:hover { color: #dddddd; } } 자신의 명령어는 중괄호안에 바로 작성, 붙어있는 명령어는 중괄호안에 '&'을 앞에 써준후 작성 가상클래스 넣기 : 텍스트 하단에 밑줄을 추가하는 등의 경우 가상클래스로 처리 가능 name { &::가상클래스name {명령어} } h2 { font-size: 20px; font-weight: bold; text-align: center; padding-bottom: 5px; &::af.. 2021. 1. 22. SCSS 변수 SCSS 변수 SCSS를 사용하면 다음과 같은 변수에 정보를 저장할 수 있습니다. strings numbers colors booleans lists nulls SCSS는 $ 기호와 이름을 사용하여 변수를 선언합니다. $variablename: value; 다음 예제에서는 myFont, myColor, myFontSize 및 myWidth라는 4 개의 변수를 선언합니다. 변수를 선언 한 후에는 원하는 곳에서 변수를 사용할 수 있습니다. $myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor;.. 2021. 1. 21. SCSS란? 선행 지식 : HTML, CSS SCSS를 사용하면 변수, 중첩 규칙, 믹스 인, 가져 오기, 상속, 내장 함수 및 기타 항목과 같이 CSS에 없는 기능을 사용할 수 있습니다. 변수 사용이 가능하기 때문에 색상 등을 변수로 지정하여 사용하면 색상값을 변경할 경우, 변수 부분의 값만 변경하면 간단하게 모든 색상 변경이 가능합니다. /* define variables for the primary colors */ $primary_1: #a2b9bc; $primary_2: #b2ad7f; $primary_3: #878f99; /* use the variables */ .main-header { background-color: $primary_1; } .menu-left { background-color: $p.. 2021. 1. 21. SASS 컴파일 하기 (window) SASS 컴파일을 위해 node-sass가 필요하고 node-sass를 설치하려면 node.js가 있어야합니다. 1. node.js 설치하기 '안정적, 신뢰도 높음'을 설치해주세요. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org '안정적, 신뢰도 높음'을 설치해주세요'안정적, 신뢰도 높음'을 설치해주세요 설치후 '윈도우' + 'S'를 눌러 Node.js command prompt 를 검색하여 열어주세요. 아래 명령어를 입력하여 node.js와 npm 설치를 확인합니다. (버전 정보가 나와야 잘 설치된 것) node -v npm -v npm list.. 2021. 1. 21. 이전 1 다음
