CSS (9) 썸네일형 리스트형 VS code 에서 SASS 설치방법 필요한 플러그인 sass / sass Lint / live sass compiler / live server 전부 다 설치하고 나면 VS CODE 에디터 제일 하단에 Watch Sass 가 뜬다. 클릭하면 이렇게 됨 그럼 내가 작업했던 common.scss가 css 파일로 컴파일되면서 common.css.map 파일도 생성된다. 왼쪽이 scss파일이고 오른쪽은 컴파일 되서 이쁘게 정리된 css다 setting.json 들어가서 { "files.autoGuessEncoding": true, "files.encoding": "euckr", "workbench.editorAssociations": [ ], "files.associations": { }, "liveSassCompile.settings.forma.. Sass 폴더 구조 SCSS 파일의 폴더 구조는 이렇게 배치 해놓으면 작업하기가 안복잡하고 더 수월하다. root - scss - common (공통 스타일) - page (작업 페이지 공간) - page@@.scss - lib (라이브러리 약자 / 선택) common/_reset.scss_mixins.scss_extend.scss [CSS]마우스 드래그시 스타일 변경태그 ::selection { background: #D10000; color: #ffffff; } 드래그하면 저렇게 나타난다.*::selection { background: #ff6570; color: #fff; }* = 모두 포함 [SCSS] 페이지로드시 콘텐츠가 서서히 나타나도록 하기 &__main { background: url("/images/bg_main.jpg") no-repeat fixed center center; background-size: cover; height: 100vh; //페이지로드시 Fade In 효과주는 것 animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s; } @keyframes fadein { from { opacity:0.1; } to { opacity:1; } } @-moz-keyframes fadein { from { opacity:0.1; } to { opacity:1; } } @-webkit-keyframes f.. [반응형웹] ViewPort 반응형 웹에 대한 이해 반응형 웹이란 이렇게 다양한 종류의 디바이스기기가 생겨나면서 그 기기 화면에 맞춰 화면이 보여지는 것을 반응형 웹이라고 합니다. 1. 뷰포트ViewPort (조건문)@media (min-width:320px){실행문}@media (min-width:320px) and (max-width:768px){실행문} 뷰포트속성 속성명속성값 속성설명 width device-width, 양수 뷰포트의 너비를 지정합니다.height device-height. 양수 뷰포트의 높이를 지정합니다.inital-scale양수 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하여 축소된 페이지를 표시하고, 1보다 큰 값을 사용하여 확대된 페이지를 표시합니다.user-scalableyes, no 뷰포트의.. 4. CSS의 기반 SASS 기본 정의 (Mixin) Mixin 정의하기Mixin은 다음과 같은 형식으로 정의합니다.@mixin mixin-name { // code }인자를 포함하여 다음과 같이 정의할 수도 있습니다.@mixin mixin-name( $arg1, $arg2, ... ) { // code }Mixin 사용하기Mixin을 사용할 때는 다음과 같이 합니다.@include mixin-name;인자가 있는 mixin이라면 다음과 같이 합니다.@include mixin-name( value1, value2, ... ); =================================== 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SASS@mixin jb { p { color: red; } } @include jb;CSSp .. 3. CSS의 기반 SASS 기본 정의 (변수) 변수 inc.scss$jb-color: red;SASS@import "inc.scss"; h1 { color: $jb-color; }CSSh1 { color: red; } 2. CSS의 기반 SASS 기본 정의 (Import) Import @import로 다른 파일 가져오기 - css에서 @import로 다른 파일을 연결시킬 수 있습니다. 문법SASS에서 @import의 문법은 다음과 같습니다.@import "path/filename";예를 들어@import "inc/abc.scss";는 inc 폴더 안의 abc.scss 파일을 가져옵니다.- 그냥 바로 @import 쓰고 "내용물"; // 이렇게 불러 오면됨. SASS 랑 CSS랑 @import 형식 비교법 SASS@import "inc.css";CSS@import url(inc.css);======================================================= SASS 응용inc.scssh1 { margin: 30px 0px; } // inc.scs.. 이전 1 2 다음
