BEM

• Block, Element, Modifier
• css class 이름
• __ 를 이어붙인다

🤔

• amazon clone 할 떄, 한번 사용해봤는데
• 마크업할 때 클래스 작성하기가 불편했다
• sass를 배웠는데 어째선지 더 쓰지않게 되었다

참고

• https://youtu.be/aKenj9ZQwJg

• https://chinsun9.github.io/github-404-page-clone/

• github 404 페이지를 클론해보았다
• 마우스 움직임에 따라 원근감 있게 움직이는 이미지들이 재밌었다

• 전에 3d 카드 이펙트 만들면서 perspective css 속성을 사용해보았는데, 그때 사용한 코드를 거의 그대로 사용해서 만들 수 있었다
• 3d card effect ; https://github.com/chinsun9/3d-card-effect

• 이미지는 직접 그렸다. 물론 바닥에 대고…

참고

• https://github.com/chinsun9/github-404-page-clone

• 속도!
• 웹프로그래밍 시간에서 bootstrap, jquery, fontawesome 등 외부라이브러리를 CDN을 통해 사용해았다
• 데이터통신, 네트워크 관련 수업에서 CDN이 뭔지 배웠었다

CDN

• 콘텐츠 전송 네트워크, Content Delivery Network
• 나와 물리적으로 가까운 캐시 서버로부터 리소스를 가져온다
• 원래대로라면 원본 리소스를 가지고 있는 서버로부터 제공받는다
• 근데 원본 서버가 물리적으로 거리가 멀면 가져오는데 시간이 오래 걸린다
• 원본 서버의 부하도 줄여주고 속도도 빨라지도 좋다
• 보통 정적인 파일들(이미지, js, css)등을 CDN을 사용하여 배포한다

• A, B가 같은 동네에 살고 있다
• A가 asdf라는 파일을 다운로드하는데, 가장 가까운 캐시 서버에 asdf파일이 있는지 확인한다
• 없으면 하나 위로 가서 확인하고, 반복하다가 없으면 원본 서버까지 가서 받아온다
• 최초에 시간이 오래 걸렸지만, 이후 A가 asdf파일을 재요청했을 때 엄청 빨라졌음을 느꼈다
• B도 asdf파일을 엄청 빨리 다운로드할 수 있었다

CDN 사용예

• jquery, font awesome 등 라이브러리들을 보면 CDN 형태로 제공을 하고 있어서
• head에 한 줄 넣기만 하면 해당 라이브러리의 기능을 쉽게 사용할 수 있다
• CDN 말고 직접 배포 파일(dist, build)을 받아서 사용할 수 있지만,
• 실제 서비스를 할 때, 내 서버에서 해당 리소스를 제공해야 하므로 서버에 부하를 줄 수 있고, 느리다
• 라이브러리를 가져올 때, CDN을 사용했다면 이런 걱정을 할 필요가 없다

참고

• https://ko.wikipedia.org/wiki/%EC%BD%98%ED%85%90%EC%B8%A0_%EC%A0%84%EC%86%A1_%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC

• 깃허브 같은 웹페이지는 내가 다크 모드를 쓰는 걸 어떻게 알고, 자동으로 다크 테마를 지원하는 걸까?

@media (prefers-color-scheme: dark)

• 미디어 쿼리로 시스템 테마를 읽어 올 수 있다

테마

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

:root {
  --top-bar: #dddddd;
  --activity-bar: #2c2c2c;
  --side-bar: #61616130;
  --editor: #ffffff;
  --editor-content: #000000;
  --status-bar: #007acc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --top-bar: #3c3c3c;
    --activity-bar: #333333;
    --side-bar: #252526;
    --editor: #1e1e1e;
    --editor-content: #ffffff;
    --status-bar: #007acc;
  }
}

• 테마는 이런 식으로 정의했다
• 미디어 쿼리에 걸리면 색상을 정의해둔 사용자 지정 속성들이 오버라이딩된다

• 색상은 vscode color theme default light, dark에서 가져왔다

테마 토글 버튼

• 시스템 테마와 별개로 웹페이지에서 테마를 토글 하고 싶을 때는 어떻게 해야 할까?
• body 태그에 dark라는 클래스를 유무에 따라 테마를 바꿔보자
• 테마 토글 버튼을 누르면 dark 클래스가 생기고 없어지면서 색상이 적용될 것이다

최초 접속자 테마 초기화

1
2
3

//   visit first time
const isDark = window.matchMedia('(prefers-color-scheme: dark)');
if (isDark) document.body.classList.add('dark');

• 미디어 쿼리로는 최초 웹페이지 접속자가 어떤 테마를 사용할지 판단할 때 사용하도록 했다

토글 버튼

1
2
3
4
5

function toggleTheme() {
  console.log(`toggle theme`);
  document.body.classList.toggle('dark');
  localStorage.setItem('theme', document.body.className ? 'dark' : 'light');
}

• toggle은 있으면 없애고, 없으면 있게 만든다
• toggle 후에는 현재 테마 상태를 localStorage에 저장한다
• 이후 접속 시 localStorage에서 theme에 값이 있는지 확인하고 있으면 해당 테마로 초기화한다

chrome에서 시스템 테마 쉽게 토글 하기

• f12 개발자 도구에서 esc key 눌러서 하단 console 창을 뛰움
• three dot (more tools) 눌러서 Rendering 탭 오픈
• 스크롤 중간 정도에 Emulate CSS media feature prefer-color-scheme 에서 테마 선택

참고

• https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
• https://github.com/chinsun9/dark-theme-practice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

:root {
  --a: pink;
  --b: black;
  --c: white;
}

button {
  background-color: var(--a);
}

/* 변수 --a 를 오버라이딩 */
button.override {
  --a: green;
  background-color: var(--a);
}

• :root는 전역 변수를 선언하는 곳이라고 생각하면 된다
• --을 앞에 붙여야 한다
• 대소문자를 구분한다
• var()함수로 변수를 가져다 사용할 수 있다
• 오버라이딩 가능하다

1
2
3

button {
  background-color: var(--a, red);
}

• var() 함수에 2번째 인자를 넣어서, 대안 값을 지정할 수 있다
• --a가 정의되지 않았을 때, 두 번째 인자 값을 사용한다

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
• :root는 의사 클래스라고 한다

🎨 Flat UI Palette v1 | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE

• https://flatuicolors.com/palette/defo

• 원하는 색을 클릭하면 클립보드에 복사된다
• 복사할 때 애니메이션이랑 소리가 재미나다

• https://1linelayouts.glitch.me/
• layout 잡을 때 참고하기 정말 좋은 사이트

• vscode emmet 으로 lorem 을 적으면 자동 완성할 수 있다

참고

• emmet 활성화 ; https://chinsun9.github.io/2020/11/25/react%EC%97%90%EC%84%9C-html-%EC%9E%90%EB%8F%99%EC%99%84%EC%84%B1-%EC%93%B0%EA%B8%B0-emmet-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

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