1
2
3

* {
  box-sizing: border-box;
}

• border-box를 많이 쓸 것 같다

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
• border-box, content-box 둘 차이를 시각적으로 알려주는 예제가 있다

• 이런 모양의 스크롤바를 만들 수 있다

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;
  }
}

참고

• https://stackoverflow.com/questions/50817727/change-scrollbar-height

• Learn Sass In 20 Minutes | Sass Crash Course 를 보면서
• 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를 작성할 수 있을 것 같다

연습 코드 저장소

• https://github.com/chinsun9/sass-practice

1
2
3
4
5
6
7
8

<input
  ref={inputRef}
  type="text"
  value={shareLink}
  onClick={onLinkClickHandler}
  spellCheck={false}
  readOnly
/>

1

<input type="text" spellcheck="false" />

• input안의 빨간 줄 생기는 것을 없앨 수 있다

1

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

1
2
3
4

<link
  href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap"
  rel="stylesheet"
/>

• link태그로 불러오는 것은 기존에 알고 있었는데,
• css에서 @import 로 불러오는 것은 처음알았다
• 폰트같이 범용적은 것은 index.css에 넣어주면 좋을 것 같다

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/@import

1
2
3
4
5
6
7
8
9
10

.example {
  /* df */
  display: flex;

  /* jcc */
  justify-content: center;

  /* aic */
  align-items: center;
}

• 짧게 쓰고 자동완성 시킨다
• 자동완성 시키고 ctrl + enter 로 새로운 라인으로 이동하여 이어서 작성한다

• number type 일 때, 기본으로 화살표가 나온다
• 이거를 없애보자

1
2
3
4

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

더 좋은 방법

• css all

참고

• https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

1
2
3
4

<input type="text" />
<button tabindex="-1">나는 탭 키를 눌러도 포커스 되지 않지.</button>
<button>나는 탭 키를 누르면 포커스 되지...</button>
<input type="text" />

1
2
3
4

<button
  type="button"
  tabIndex={-1}
>

• 입력폼 같은걸을 작성할 때, tab 키로 다음 칸을 넘어가서 작성하는 경우가 있는데,
• tab 키는 기본적으로 button에도 포커스가 간다
• 포커스가 가지 않도록 해보자

참고

• https://stackoverflow.com/questions/2757973/can-i-ignore-some-website-element-when-navigating-using-the-tab-key

Fresh Background Gradients | WebGradients.com 💎

• 예쁜 그라디언트 복붙해 오는 곳
• png 이미지 또는
• css 쉽게 가져올 수 있다

1
2
3
4
5
6
7
8

.gradient {
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
}

• Smooth Page Transitions With Javascript Tutorial를 보고 따라만들었다

결과

• 보러가기

후기

• 영상 제목만 보고 단순히 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 경로가 망가지지 않도록한다

참고

• Smooth Page Transitions With Javascript Tutorial
• Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages
• https://github.com/chinsun9/smooth-page-transitions