반응형 Style Sheets18 [SCSS] @mixin 과 @include @mixin and @include @mixin은 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 아주 훌륭한 기능이다. @mixin을 사용하여 선언 하고 @include를 통해 사용한다. @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin horizontal-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include horizontal-list; } to css nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { d.. 2022. 6. 24. [SCSS] 불러오기 (@import) 불러오기 (@import) scss에서의 import는 css의 @import규칙을 확장하여 mixin, functions 및 변수에 대한 액세스를 제공하고 여러 스타일시트의 css를 함께 결합한다. 사용방법은 다음과 같이 @import를 사용하여 특정.scss 파일을 불러와 사용할 수 있다. /* @import "layout.scss" */ @import "layout"; 확장자를 붙이지 않아도 상관 없기 때문에 보통 생략해서 사용한다. scss에서 @import는 기본적으로 scss 파일을 가져오는데, css @import 규칙으로 컴파일되는 몇 가지 상황이 있다. 파일 확장자가 .css일 때 파일 이름이 http:// 또는 https://로 시작하는 경우 url()이 붙어있는 경우 미디어쿼리가 있는.. 2022. 6. 23. [SCSS] 스타일 규칙 - 중첩(Nesting) 중첩 (Nesting) 기본적인 스타일 규칙은 CSS와 동일한 방식으로 작동하지만, SCSS에서는 중첩 (Nesting) 기능을 사용해 상위 선택자의 반복을 피하고 좀 더 편리하게 구조를 작성할 수 있다. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } to css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12p.. 2022. 6. 22. [SCSS] 변수(Variables)와 데이터 타입(Data Types) (ft. 주석) 주석 (Comment) CSS에서의 주석은 /* ... */ 로 해야 하는 반면에, Sass(SCSS)에서는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 여기서 또 Sass 와 SCSS에 다른 특징이 나오는데, 아무래도 SCSS가 CSS와 호환이 쉽게 나왔기 때문에 비슷한 측면이 있다. // Sass /* 컴파일되는 * 여러 줄 * 주석 */ // SCSS /* 컴파일되는 여러 줄 주석 */ Sass의 경우 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 더 나아가 라인까지 맞춰줘야 하는 반면에, SCSS의 경우에는 CSS처럼 사용하면 된다. 데이터 타입 (Data Types) 데이터 설명 예시 Numbers 숫자를 의미하며 단.. 2022. 6. 14. [CSS] Reset.css 와 Normalize.css란? 등장 배경 브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값이라고 생각하면 된다. 브라우저 별로 모두 일관된 스타일을 제공해줘야 하는 입장에서 이 기본 스타일이 브라우저별로 다르다는 점은 참으로 불안한 상황이다. 그래서 나온 전략으로 reset.css 와 normalize.css라는 게 등장하였다. reset.css 이름 그대로 모든 브라우저의 형태에서 기본으로 제공하는 스타일을 전부 없애버린 초기화 기법이다. 아무래도 가장 유명한 기법이었는데, 마지막 업데이트 날짜가 2011년인 것을 보면 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율적이다 라는 말이 많이 나온다. Eric Meyer의 reset.css normalize.css.. 2022. 6. 13. [SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode) VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다. (마지막 수정 일자 : 2022.06.13) 1. SCSS IntelliSense https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss SCSS IntelliSense - Visual Studio Marketplace Extension for Visual Studio Code - Advanced autocompletion and refactoring support for SCSS marketplace.visualstudio.com 꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다. 여기서 말하.. 2022. 6. 13. [SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조) sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다. 7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파일을 의미한다. 즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용한다고 생각하면 된다. 그래도 역시 무슨 말인지 모르겠으니, 7-1 패턴의 구조를 알아보자. Project Structured in 7-1 Architecture pattern sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _bootstrap.scss # Bootstrap .. 2022. 6. 13. [CSS] 사용자 지정 변수(Variable) 사용하기 CSS에서도 사용자 지정 변수를 사용할 수 있는데, 이는 JS 같은 곳과 마찬가지로 문서 전반적으로 재사용할 임의의 값을 변수에 담아 사용하는 것과 동일하다. CSS에서 변수를 사용하는것도 처음부터 가능했던 건 아니라, CSS preprocessor(전처리기)의 등장으로 변수를 많이들 사용하다 보니까 이게 CSS 표준으로 들어오게 된 것이다. 아마 추후에는 전처리기에서 사용하는 기능들이 하나씩 표준으로 들어오지 않을까 생각된다. 이제 예제를 통해 사용법을 하나씩 알아보자. 1. 기본 사용법 사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다. Here is id div-01 Here is class div-03 Here i.. 2022. 6. 11. [CSS] 스크롤바 스타일 커스텀하기 CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자. 스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며, 스크롤을 커스텀하는데 주로 아래 3가지를 사용한다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고, 이제 저 3가지를 활용한 예제 코드를 살펴보자. /* 스크롤바 설정*/ .box2::-webkit-scrollbar{ width: 6px; } /* 스크롤바 막대 설정*/ .box2::-.. 2022. 6. 8. 이전 1 2 다음 반응형
