미래의 나를 위한 기록

미래의 나를 위한 기록

  • 내가 보려고 하는 기록:) (49)
    • programming (49)
      • C# (4)
      • HTML (0)
      • CSS (7)
      • SCSS (3)
      • Javascript (18)
      • Algorithm (8)
      • 포트폴리오 하면서 (1)
      • Node.js (7)
      • Error모음 (0)
    • Level UP🔥 (0)
  • 홈
  • 태그
  • 방명록
RSS 피드
로그인
로그아웃 글쓰기 관리

미래의 나를 위한 기록

컨텐츠 검색

태그

useMemo 알고리즘 매일글쓰기 useCallback kakao 우리동네이야기 scss 카카오 node.js 해시알고리즘 객체지향프로그래밍 React PROJECT100 프로젝트100 프로그래머스 매일 글쓰기 web 객체지향 개발자 javascript

최근글

댓글

공지사항

아카이브

scss(2)

  • Scss @mixin 활용하기

    프로젝트에서 공통적으로 사용되는 스타일을 믹스인을 사용하여 정의할 수 있다. 1. 믹스인 안에서도 &를 사용해 상위 요소를 참조할 수 있고, include를 사용하는 시점에서 &가 가리키는 요소가 결정된다. See the Pen jOBMoxm by KimDovi (@ddonni0426) on CodePen. 2. 가변인수를 통해 공통된 스타일 속성을 다양하게 적용시킬 수 있다. See the Pen eYvdaoK by KimDovi (@ddonni0426) on CodePen. 3. @content 키워드를 사용해서 일부분만 스타일 블록을 전달할 수 있다. See the Pen poeEXeZ by KimDovi (@ddonni0426) on CodePen.

    2021.05.19
  • SCSS 중첩 벗어나기 - @at-root

    어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법. See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen. 위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다. 하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다. 이와같이 특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다.

    2021.05.18
이전
1
다음
티스토리
© 2018 TISTORY. All rights reserved.

티스토리툴바