오열매의 코딩 공간

  • 홈
  • 태그
  • 방명록

bem 1

SCSS) [Nesting / Variables] SCSS 사용 방법 및 변수 활용 + BEM

네스팅과 변수를 선언하고 사용하는 방법에 대해 포스팅한다. 위 두 가지는 기본 사용법으로, CSS와는 아주 차별화되고 훨씬 편안한 방식들이다. 한 번 맛을 보면, 다신 CSS로 돌아갈 수 없다.(주관적 생각) 또한, SCSS로 BEM을 사용하는 방식도 위 두 가지 대상들을 통해 함께 알아본다. 1) Nesting 기존 CSS를 사용하려면, 태그나 클래스, 아이디 등을 대상으로 지정하여 '독립적'으로 속성을 선언해야 했다. Nesting은 이러한 틀을 깨버리는 아주 효율적인 방식이다. 하나의 태그 안에 다른 태그가 속해있다면, 처음 정의한 태그를 벗어나지 않고 그 안에 정의할 수 있다. 원래는 body 태그의 괄호를 닫은 뒤에 클래스명이 container인 태그에 대해 새롭게 괄호를 열어야 했다. 하지만,..

Front-end/SCSS 2022.10.10
이전
1
다음
프로필사진

오열매의 코딩 공간

공지사항

  • 분류 전체보기 (76)
    • Front-end (47)
      • HTML (3)
      • CSS (14)
      • SCSS (5)
      • JavaScript (11)
      • JQuery (0)
      • React (12)
      • TypeScript (2)
    • Back-end (1)
      • Node.js (1)
    • Automation (3)
      • Python (3)
      • BeautifulSoup (0)
      • Selenium (0)
      • Kiwoom (0)
      • Photoshop (0)
    • Environment (24)
      • VSC (2)
      • Git & Github (16)
      • Linux (6)
      • CMD (0)
      • Ananconda (0)
    • ETC (1)

Tag ☆

개념, Terminal, vanillajs, JS, github, javascript, TS, wsl2, setting, css, scss, 명령어, 문법, 실습, GitHub desktop, 설치, Router, GIT, Linux, React,

최근글과 인기글

  • 최근글
  • 인기글

방문자수Total

  • Today :
  • Yesterday :
06-22 18:29

Copyright © Kakao Corp. All rights reserved.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.