- magick.css는 단일 파일로 제공되는 거의 classless CSS 프레임워크로, 읽기 쉽고 정보 전달이 잘 되는 “마법사의 노트” 같은 웹 문서 스타일을 지향함
- 모든 화면 크기에서 동작하며 JavaScript 없이 사용할 수 있어, 정적 문서나 가벼운 HTML 페이지에 바로 적용하기 쉬움
- CDN, 직접 파일 포함, npm import 방식으로 설치할 수 있고,
normalize.css와 함께 쓰는 구성을 안내함
- 기본 구조는
<main>과 <section> 중심의 읽기 좋은 컬럼이며, <aside>와 sidenote로 본문 옆 보충 설명을 붙일 수 있음
- HTML 기본 요소 대부분을 스타일링하되, sidenote와 코드 줄 번호처럼 구조가 필요한 기능은 별도 클래스로 제공함
magick.css의 목표와 성격
- magick.css는 미니멀하고 대부분 classless인 CSS 프레임워크임
- 단일 파일에 담겨 있으며, CSS 안의 주석으로 선택의 이유를 따라갈 수 있음
- 시각적으로는 우아하면서도 장난스러운 마법적 분위기를 만들고, 읽기 쉬움과 정보 전달력을 우선함
- 모든 기기와 화면 크기에서 모양과 기능을 유지하며 JavaScript 없이 동작함
- LaTeX, 오래된 TTRPG 룰북, concrete.css, Tufte CSS, 브루탈리즘의 “usability as design” 윤리에서 영감을 받음
설치와 사용 방식
- 가장 빠르게 확인하려면 HTML
<head>에 CDN 스타일시트 2개를 추가함
<link rel="stylesheet" href="https://unpkg.com/normalize.css">;
<link rel="stylesheet" href="https://unpkg.com/magick.css">;
- 저장소에서
magick.css 파일을 내려받아 일반 CSS처럼 포함할 수도 있음
<link rel="stylesheet" href="path/to/magick.css">
- JavaScript 프로젝트에서는 npm으로 설치한 뒤 import함
npm install normalize.css magick.css
import 'normalize.css'
import 'magick.css'
- 99% classless 구성이어서 기존 HTML5 문서에도 적용하기 쉽게 만들어짐
읽기 중심 레이아웃
- 반응형 컬럼을 만들려면 전체 콘텐츠를
<main>으로 감싸고, 긴 글은 <section>으로 나누는 구성을 권장함
- 일반적인 문서 구조는
<main> 안에 <header>, 여러 <section>, <footer>를 두는 방식임
- 이 구조를 따르지 않아도 magick.css를 타이포그래피와 스타일된 컴포넌트 용도로만 사용할 수 있음
- 부가 정보는
<aside> 태그로 표현함
- 본문 중간에 추가 맥락을 붙이고 싶을 때는 sidenote를 쓰며, 번호는 자동으로 매겨짐
기본 HTML 요소 스타일
- 타이포그래피는 제목, 문단, 링크, 강조, 밑줄, 작은 글자, 인라인 코드 등을 다룸
<h4>보다 낮은 heading은 magick.css가 스타일링하지 않음
- 낮은 단계의 heading은 계층 구조보다 특수한 용도에 쓰이는 경우가 많다고 봄
- 필요한 경우 사용자가 직접 스타일링할 수 있음
- 목록은 콘텐츠를 방해하지 않도록 단순하게 유지함
- 표는 데이터에 집중할 수 있도록 명확하고 간결한 스타일을 사용함
- 폼과 입력 요소는 단독으로 쓰거나 form 안에서 사용할 수 있음
- 텍스트 입력은 용도가 다양하므로 크기나 배치에 강한 의견을 두지 않음
- 체크박스와 라디오 버튼의 label은 input 뒤에 오는 것을 기대함
- form은 손글씨 종이 노트 같은 느낌으로 사용자의 주의를 끌도록 스타일링됨
미디어, 코드, 인용문
- 이미지와 비디오는 단독으로 배치하거나
<figure> 안에 넣어 캡션과 함께 표현할 수 있음
- 단독
<img>는 공간이 충분할 때 자연 크기로 표시되며, 늘어나거나 왜곡되지 않음
<figure>와 <figcaption>을 사용하면 미디어를 더 두드러지게 표시하고 맥락을 추가할 수 있음- 코드는 인라인일 때
<code>를 사용하고, 큰 코드 블록은 <pre>가 <code>를 감싸는 구조를 사용함
- 코드 조각도 figure로 표시할 수 있음
- 인용문은
<blockquote>를 사용함
- 출처 표기는 blockquote 안의
<footer>로 추가함
- 시처럼 서식이 중요한 텍스트는
<pre>로 감쌀 수 있음
별도 클래스로 쓰는 기능
- 일부 기능은 특별한 class가 필요해 magick.css의 핵심 classless 동작과 분리됨
- sidenote를 본문에 넣으려면 참조 위치와 sidenote 본문을 함께 추가함
<span class="sidenote-anchor"></span>
<span class="sidenote">Sidenote Content.</span>
- 모바일 기기에서는 sidenote가 메인 컬럼 안으로 이동함
- 코드나 pre 블록에 줄 번호를 표시하려면 각 줄 번호를 담은
<span>을 삽입해야 함
- 줄 번호 삽입은 수작업, JavaScript, 서버 사이드 처리 중 원하는 방식으로 할 수 있음
프로젝트 링크
- 마음에 들면 GitHub에서 star를 줄 수 있음
- 다른 작업에 관심이 있으면 Discord에 참여할 수 있음