게시 됨 업데이트 됨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를 작성할 수 있을 것 같다

연습 코드 저장소

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

Smooth Page Transitions

결과

후기

  • 영상 제목만 보고 단순히 css js를 이용한 트랜지션을 구현할 줄 알았는데,
  • node로 parcel, gsap, highway 를 사용해서 웹만드는 것을 배우게되었다
  • parcel을 처음 써보았는데, 개발할 때도, 배포할 때에도 좋은 것 같다
  • higyway와 gsap으로 애니메이션을 구현해 보았다
  • parcel을 이용해 웹을 만들어 깃허브 페이지로 배포할 때,
  • parcel build index.html --out-dir docs --public-url ./
  • 위 처럼 옵션을 넣어줘야한다
  • –out-dir docs 는 깃허브 페이지 설정할 때 디렉터리
  • –public-url ./ 는 이미지, css, js 경로가 망가지지 않도록한다

참고

카테고리

아카이브

광고

×