웹린이의 퍼블리셔 도전기

Sass9

[SASS - SCSS] 2-4. 데이터 타입 4. 데이터타입 SASS Script는 7가지의 데이터 타입을 지원합니다. 데이터 타입은 아래와 같습니다. 1. 숫자형: number (ex: 1.2, 100, 150px) 2. 문자열: (ex: "SASS", 'SASS', SASS) 3. Color (ex: red, #999999, rgba(255, 255, 0, 0.5)) 4. boolean (ex: true, false) 5. null (ex: null) 6. list: (ex: 1.5em 1em 0 2em, Noto Sans Arial, sans-serif) 7. maps: (ex: key1: value1, key2: value2) 그중에서도 데이터 타입에서 대표적인 내용들을 정리하였습니다. 1) 문자열 문자열은 SassScript에서는 일반 텍.. SCSS-SASS 2021. 2. 21.

[SASS - SCSS] 2-3. 변수 $ 기호 내용정리 3. 변수 $ 기호 초반에 SASS 기초 정리를 하면서 변수 $ 기호를 사용한다고 작성 하였습니다. 가장 중요한 변수 처리이고, 변수를 잘 처리하면 더 용이하게 코드 작성을 할 수 있습니다. 변수에는 $ 기호를 사용합니다. SASS에서도 지역변수와 전역변수가 존재합니다. 전역변수는 선택자 외부에 선언하는 방법과, 지역변수 부분에서 !global이라고 지정을 하게 되면 전역변수가 선언이 됩니다. $main-width는 전역변수로 선언이 되었습니다. 나중에 프로젝트로 돌입하게 되면 별도로 분리하는 것이 용이합니다. 별도의 파일을 만들어서 호출해서 부르는 형식으로 말이죠. #main에서 $width: 10px !global; 이렇게 !global을 작성하게 되면서 $width는 전역변수가 됩니다. #sideb.. SCSS-SASS 2021. 2. 20.

[SASS - SCSS] 2-2. 주석 내용정리 2. 주석 SASS 주석은 두 종류가 있습니다. 블록 주석과 인라인 주석이 있는데 아래와 같이 정리해봤습니다. 1. 블록 주석 /* comment */ -> 기존 CSS와 동일, 컴파일 되었을 때, CSS파일에 표기 1번 블럭 주석의 경우는 CSS로 컴파일을 하게 되면 출력이 됩니다. 단 압축 Compressed의 경우에는 /*! comment */ 이런식으로 ! 느낌표를 앞에 추가를 해줘야 주석이 정상적으로 표기가 됩니다. 중첩nested, 확장expanded, 축약compact의 경우 ! 느낌표없이도 주석이 모두 출력이 됩니다. 2. 인라인 주석 // comment -> 컴파일 되었을 때 표기 안됨, SASS에서만 주석 표기 하지만 2번 인라인 주석의 경우에는 CSS로 출력을 해도 나오지 않기 때문에.. SCSS-SASS 2021. 2. 19.

[SASS - SCSS] 2-1. CSS 확장 내용정리 1. CSS 확장 중첩이란, 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 이용하면 많은 코딩을 하지 않고 편리하게 각 선택자에 속성을 지정해 줄 수 있습니다. 사이트가 복잡해지면서 하위 - 자식 선택자들이 많아지게 됩니다. 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 편리한 기능입니다. CSS 확장에는 중첩만이 아닌, 태그 선택자와 연계된 클래스, 아이디 선택자끼리 쉽게 묶어주는 기능도 있습니다. 수도 선택자 pseudo selector를 지정할 경우에 편리합니다. 수도 선택자는 :hover, :active, :link와 같은 하이퍼링크에 효과를 주는 것부터 :first-child, :last-child, :nth-child와 같이 li 또는 tr, td 태그.. SCSS-SASS 2021. 2. 18.

[SASS - SCSS] 1-5. 연산자 내용 정리 6. 연산자 SASS는 간단한 사칙연산이 가능합니다. +, -, *, / 그리고 %까지 처리가 가능합니다. 연산 기능은 CSS를 이용하여 레이아웃을 작업할 때 아주 편리하게 사용 가능합니다. 색상을 섞는 기능도 가능하고, 폰트 사이즈를 조정 길이와 높이 등 조정할 때도 사용이 가능합니다. 웹사이트는 고정폭으로 사이트를 만드는 경우도 있고, 최근에는 반응형이라는 기술을 사용하여 폭 크기를 유동적으로 변경하는 경우가 많습니다. 웹 브라우저의 크기가 커지거나 작아질 경우 콘텐츠 부분과 aside의 크기 또한 유동적으로 크기를 줄일 수 있도록 처리해야 합니다. 기존 CSS로 기재했을 경우에는 계산기를 두고 하지 않아도 연산자를 사용해서 간단하게 작성하면서 %나 고정 px를 이용해서 처리할 수 있습니다. SASS.. SCSS-SASS 2021. 2. 18.

[SASS - SCSS] 1-4. 확장 - 상속 내용 정리 5. 확장 / 상속 SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은 가장 마지막에 있는 값으로 적용됩니다. 동일한 선택자의 속성값을 여러 번 변경하더라도 top-down 방식에 의해 가장 마지막에 있는 값의 영향을 받습니다. 그러므로 최종적으로 margin: 15px로 변경되는 것입니다. 확장과 상속을 이해하기 위해서는 SASS에 @extend 코드를 이용하면 됩니다. .message 선택자를 이용하여 작은 박스를 만들 수 있는 CSS 코드를 작성하고, 3개의 동일한 작은 박스 success, error, popup을 추가하였습니다. 바로 확장코드인 @extend .message .. SCSS-SASS 2021. 2. 18.

[SASS - SCSS] 1-3. 부분화-불러오기와 믹스인 내용 정리 3. 부분화 / 불러오기 SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리를 해야 조금 편하게 작업이 가능합니다. 문장을 분리하는 과정은 부분화라고 합니다. 부분적으로 쪼갠 SASS 문장을 하나의 문장에 불러오기를 한 후 컴파일 과정을 거치게 되면 하나의 CSS 파일로 변환이 됩니다. 부분화를 할 때 가장 중요한 것은 파일 이름이고, 반드시 부분화를 하는 파일의 이름은 _언더바로 시작이 되어야 합니다. (ex: _style(O) / style(부분화 X) CSS 파일 내부에 불러오기를 하는 방법이 있는데, 이 경우에도 import를 이용해서 처리하게 됩니다. - css: @import url(style.css); - SASS: @import 'style'; CSS import.. SCSS-SASS 2021. 2. 18.

[SASS - SCSS] 1-2. 변수와 중첩 내용 정리 1. 변수 SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 제어할 수 있습니다. $font-stack: "Noto-sans", sans-serif; $base-color: red; body { font: 100% $font-stack; color: $base-color; } $font-stack에는 Noto-sans, sans-serif 글꼴 변수를 부여하고, $base-color에는 쉽게 red 색상으로 지정하였습니다. 위의 내용을 컴파일을 하면 아래와 같은 내용으로 css파일을 내용으로 컴파일이 됩니다. body{ font:100% "Noto-sans",sans-seri.. SCSS-SASS 2021. 2. 17.

[SASS - SCSS] 1-1. SASS 기초 (문법 구조) 현재 SASS를 공부하면서 내용을 정리하는 시간을 가져봤습니다. SASS는 컴파일러 프로그램을 설치한 후에 진행을 하였는데, 저는 Scout-App을 이용하여 SASS를 습득하고 있습니다. 1. SASS의 기초 일단, SASS(Syntacically Awesome Style Sheet)는 확장자가 .sass와 .scss 두 종류가 있습니다. 이 두 파일의 차이점은 중괄호 {}와 ;을 사용하는 부분에서 차이가 납니다. - SCSS 문법 구조 - SASS 문법 구조 ▶ 중괄호와 세미콜론의 유무 이외에는 차이점이 없습니다. 결과물은 동일합니다. 위의 코드 처럼 변수를 선언해서 중복되는 코드를 줄이고, 반복적으로 사용하면서 편리하게 처리할 수 있기 때문에 필요한 기술입니다. SCSS 문법으로 프로젝트를 작성하면.. SCSS-SASS 2021. 2. 16.

이전 1 다음

💲 추천 글

티스토리툴바