게시 됨 업데이트 됨web몇 초안에 읽기 (약 54 단어)

scroll css

  • 이런 모양의 스크롤바를 만들 수 있다
index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* scroll bar */
& {
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 150 단어)

sass, scss 연습

sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 변수
$primaryBtn: rgb(78, 201, 253);
$textColor: rgb(0, 0, 0);

button {
  background: $primaryBtn;

  // 중첩 nesting 가능
  //   & ; 상위 선택자
  &::after {
    content: 'hellooo';
  }

  // 중첩된 속성
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    bottom: 40px;
    right: 30px;
  }
}
  • 중첩 이 기능 하나만으로도 엄청나게 강력한 기능이라고 생각한다
  • 스타일 적용되는 것도 직관적이고, html이랑 같은 구조로 css를 작성할 수 있을 것 같다

연습 코드 저장소

카테고리

아카이브

광고

×