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

transition ease ease-in ease-out ease-in-out 무슨 차이일까

style.css
1
2
3
.box {
  transition: all 0.2s ease;
}
  • 자연스러운 변화를 주기 위해서 사용하곤 했다
  • ease는 여러 가지가 있는데 어떤 차이일까?

transition-timing-function

  • 영상 편집할 때 영상의 앞뒤에 투명도를 가지고 페이드인 페이드아웃하는 그래프가 있는데 그거랑 똑같다
  • ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps 가 있다

함수들

  • ease ; 천천-빠름-천천
  • linear ; 등속
  • ease-in ; 천천-보통
  • ease-out ; 보통-천천
  • ease-in-out ; 천천-보통-천천
  • cubic-bezier ; 커스텀
  • steps ; 뚝뚝 끊어 보여준다

cubic-bezier

베지에 곡선이라고 한다
ease, in, in-out은 미리 정의어 있는 곡선이다
각각을 cubic-bezier로 표현하면 다음과 같다

  • ease === cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear === cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in === cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out === cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out === cubic-bezier(0.42, 0, 0.58, 1.0)

참고

유용한 도구

용어

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

input datalist


1
2
3
4
5
6
7
8
<label for="myInput">select: </label>
<input list="myInputList" id="myInput" />

<datalist id="myInputList">
  <option value="hello">안녕</option>
  <option value="hi">안뇽</option>
  <option value="bye">잘가</option>
</datalist>
  • datalist를 사용하면 input 태그를 select 태그와 비슷하게 쓸 수 있다
  • input에 입력하면 자동으로 필터링된다

참고

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

CSS BEM

BEM

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

🤔

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

참고

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

github 404 page clone

  • github 404 페이지를 클론해보았다
  • 마우스 움직임에 따라 원근감 있게 움직이는 이미지들이 재밌었다
  • 전에 3d 카드 이펙트 만들면서 perspective css 속성을 사용해보았는데, 그때 사용한 코드를 거의 그대로 사용해서 만들 수 있었다
  • 3d card effect ; https://github.com/chinsun9/3d-card-effect
  • 이미지는 직접 그렸다. 물론 바닥에 대고…

참고

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

CDN

  • 속도!
  • 웹프로그래밍 시간에서 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을 사용했다면 이런 걱정을 할 필요가 없다

참고

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

web dark theme

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

@media (prefers-color-scheme: dark)

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

테마

style.css
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 클래스가 생기고 없어지면서 색상이 적용될 것이다

최초 접속자 테마 초기화

index.js
1
2
3
//   visit first time
const isDark = window.matchMedia('(prefers-color-scheme: dark)');
if (isDark) document.body.classList.add('dark');
  • 미디어 쿼리로는 최초 웹페이지 접속자가 어떤 테마를 사용할지 판단할 때 사용하도록 했다

토글 버튼

index.js
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 에서 테마 선택

참고

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

css 변수 사용하기

style.css
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()함수로 변수를 가져다 사용할 수 있다
  • 오버라이딩 가능하다
style.css
1
2
3
button {
  background-color: var(--a, red);
}
  • var() 함수에 2번째 인자를 넣어서, 대안 값을 지정할 수 있다
  • --a가 정의되지 않았을 때, 두 번째 인자 값을 사용한다

참고

카테고리

아카이브

광고

×