GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

03줄 번호와 짚어 주는 줄

줄 번호는 글자가 아니라 counter-increment 로 세어 ::before 에 찍으므로 복사할 때 따라붙지 않습니다. 짚어 둔 줄은 바탕색이 다르고, 그 줄에 포인터를 올리면 왜 중요한지 적은 쪽지가 뜹니다.

쓰임긴 코드에서 딱 한 줄을 설명해야 하는 튜토리얼

counter-increment::beforeuser-select
줄 번호와 짚어 주는 줄
새 창에서 열기

03 줄 번호와 짚어 주는 줄 — 측정 누적면적 14.751% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 코드 블록 UI 9종 — 하이라이터 없이 붙여 쓰는 코드 창

이 데모가 속한 글

코드 블록 UI 9종 — 하이라이터 없이 붙여 쓰는 코드 창 — 데모 9종 미리보기코드 블록 UI 9종 — 하이라이터 없이 붙여 쓰는 코드 창코드 블록은 문서 안에 프로그래밍 언어를 그대로 옮겨 담은 상자이고, 아홉 가지 모두 복사·전환·펼침·타이핑 같은 동작이 실제로 붙어 있는 화면입니다. 이 글의 데모 전부 보기

이 효과가 마음에 들면 — 비슷한 데모