Guitar Chords in CSS

분야

프로그래밍/소프트웨어 개발

대상자

CSS 개발자, 웹디자이너, 음악 애호가. 중급~고급 수준의 기술자.

핵심 요약

• *CSS Grid와 attr() 메서드를 활용해 기타 채ORD를 시각화하는 기법**
• attr() 함수로 HTML 속성 값을 CSS에 동적으로 전달
• CSS Grid로 피트보드 구조 설계 (열: --_strings * 2, 행: --_frets)
• barre 속성 처리로 바레 채ORD 시각화 (열 확장)
• finger 속성으로 각 음에 사용할 손가락 표시

섹션별 세부 요약

1. 기본 그리드 설정

• frets와 strings 속성으로 그리드 열/행 수 결정
• --_frets와 --_strings 변수로 동적 계산
• 상단/하단 라인 추가 (12% / 15% 높이)
• grid-template-columns과 grid-template-rows로 구조 정의

1. 피트와 스트링 시각화

• linear-gradient로 수직 스트링과 수평 피트 생성
• --fret-board-string-w와 --fret-board-fret-w로 높이/폭 조절
• background-size로 스트링/피트 간격 계산 (스트링: 100% / (var(--_strings) - 1))

1. 음표 위치 및 손가락 표시

• grid-column과 grid-row로 음표 배치 (열: var(--string) * 2 - 1, 행: var(--fret) + 1)
• string-note::after로 finger 속성 표시 (색상, 폰트 조절)
• text-box: cap alphabetic로 라인 높이 최적화

1. 미트/오픈 스트링 처리

• mute 속성: border-image + 45° 회전으로 X 표시
• open 속성: radial-gradient로 빈 원 효과 생성
• border-radius: 50%로 원형 마스크 적용

1. 바레 채ORD 및 피트 번호 표시

• barre 속성으로 다중 스트링 커버 시 열 확장 (span: var(--barre) * 2)
• 태그로 피트 번호 표시 (value 속성 활용)
• rotate: 45deg로 X 표시 회전

결론

• *CSS만으로 기타 채ORD 시각화 구현 가능**
• attr() 메서드와 CSS Grid를 활용해 HTML 속성 기반으로 디자인
• 바레 채ORD, 오픈/미트 스트링 처리 등 음악적 요소 시각화
• Chrome 브라우저에서만 작동 (현재 제한)
• 기술적 유연성: 기타, 우쿨렐레, 바이올린 등 다른 악기에도 적용 가능
• 실무 팁: light-dark() 함수로 모드별 색상 자동 조정