독고다이 퍼블리셔 독고다이 퍼블리셔

CSS전처리기

• Sass(SCSS) 기본 공부 3 중첩

  HTML5_CSS3/sass 2023. 4. 6. 02:23

  Sass(SCSS) 기본 공부 1 https://raim-2.tistory.com/17 Sass(SCSS) 기본 공부 2 https://raim-2.tistory.com/18 Sass/SCSS 중첩 (Nesting) Sass에서는 중첩이 가능하다. 중첩은 일반 CSS보다 더 깔끔하고, 구조 및 선택자 파악이 쉽다는 장점이 있다. 첫번째 두번째 1. 중첩 사용방법 중첩을 사용하는 방법은 간단하다. 아래 예시처럼 중첩하고 싶은 만큼 대괄호 {} 안에 자식 선택자를 넣으면 된다. $txt_color:#fff; $bg_color : background-color; $font_size : 18px; $my_border : 1px solid #ddd; ul{ li { #{$bg_color} : black; bord..

  Read More
• Sass(SCSS) 기본 공부 2 변수

  HTML5_CSS3/sass 2023. 4. 6. 00:45

  Sass/SCSS 공부 2 Sass(SCSS) 기본 공부 1 https://raim-2.tistory.com/17 Sass(SCSS) 기본 공부 1 *나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다. CSS 전처리기 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램 CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램 정규 CS raim-2.tistory.com Sass/SCSS 변수 (variables) Sass에서는 반복적으로 사용되는 값을 변수로 사용이 가능하다. 변수는 $기호를 사용해 선언할 수 있다. 변수의 값으로는 문자열, 숫자, 불리언, 색상, null 등 다양한 값을 담을 수 있다. 변수는 CSS로 컴파일하면, CSS 파일에 보이지 않는다. //$변수명..

  Read More
• Sass(SCSS) 기본 공부 1

  HTML5_CSS3/sass 2023. 4. 5. 00:02

  *나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다. CSS 전처리기 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램 CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램 정규 CSS에 없는 다양한 내장함수를 갖고 있고, 변수/ 함수 생성도 가능하다. CSS 전처리기는 기본 브라우저에 탑재되어 있지 않으므로, 컴파일 과정을 통해 사용해야 한다. 더보기 결국, CSS 전처리기를 사용하려면 1) 우선 CSS 전처리기를 사용해 코드를 작성한다. 2) CSS 컴파일러를 이용해 CSS 전처리기를 CSS로 컴파일한다. *컴파일러 설치 대신 컴파일만 하려면 사이트에서도 가능하다. Sass 컴파일 사이트 : https://www.sassmeister.com/ (테스트 가능) 1. ..

  Read More