• 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

• F1 key 를 누르면 자동으로 도움말창이 열린다
• 이거를 안열리게 해보자

1
2
3
4
5
6

window.addEventListener('keydown', function (e) {
  // F1 keyCode
  if (e.keyCode === 112) {
    e.preventDefault();
  }
});

• 이렇게 F1 key 의 경우에만 반응하지 않도록 만들 수 있다

1
2
3

window.addEventListener('keydown', function (e) {
  e.preventDefault();
});

• 이렇게 F1 key 뿐만아니라 다른 모든 키의 기본 실행을 방지할 수 있다

참고

• How to disable F1 key?

• keyboardevent.io 를 만들어보았다
• 웹에 포커스를 두고 키를 입력하면 그대로 화면에 출력한다
• 출력되는 정보는 keydown이벤트의 정보들이다

• 키 이벤트 관련 로직 짤 때, 들어가서 키코드 확인하기 좋을 것 같다

심심하면 업데이트할 것

• 히스토리 만들기

소스코드

• keyboardevent.io/js/index.js