모니터에서 카드가 화면 전체로 퍼져 읽기 힘들다면, 최대 폭을 500px 안팎으로 잡으면 해결됩니다. Anki 기본 서식에는 폭을 제한하는 규칙이 아예 없어서, 창을 넓힐수록 한 줄이 그만큼 길어집니다. ankieditor에서 빈 곳을 클릭해 카드 전체를 선택하면 나타나는 "카드 최대 폭" 칸에 숫자를 넣으면 됩니다.
왜 Anki 카드는 화면 전체 폭으로 퍼지나
Anki가 기본으로 주는 노트 유형(Basic, Basic (type in the answer), Cloze)의
스타일에는 max-width가 없습니다. 폭을 제한하는 규칙이 없으니 카드 내용은
창이 허락하는 만큼 가로로 늘어납니다.
스마트폰에서는 화면이 좁아 문제가 되지 않습니다. 문제는 데스크톱입니다. 24인치 모니터를 전체 화면으로 쓰면 한 줄에 글자가 100자 넘게 들어가는데, 그러면 한 줄을 다 읽은 눈이 다음 줄의 시작점을 찾기 어려워집니다. 정렬을 왼쪽으로 바꿔도 줄 자체가 길면 같은 문제가 남습니다.
폭을 얼마로 잡아야 하나
시작값은 500px을 권합니다. 편집기 입력칸의 자리표시자도 같은 값입니다.
- 400px — 단어와 짧은 뜻 위주의 카드. 좁게 모여 시선이 흩어지지 않습니다.
- 500px — 예문이나 두세 줄 설명이 있는 일반적인 카드. 대부분 여기서 시작하면 됩니다.
- 600px — 긴 서술형·표·코드가 들어가는 카드. 더 넓히면 줄이 다시 길어집니다.
이 값들은 측정된 최적값이 아니라 권장 시작점입니다. 글자 크기를 20px보다 크게 썼다면 같은 폭에서도 한 줄에 들어가는 글자 수가 줄어드니, 미리보기를 보며 한 줄이 눈에 편하게 들어오는 지점을 찾는 편이 확실합니다.
ankieditor에서 카드 폭을 바꾸는 방법
- 미리보기의 빈 곳을 클릭합니다. 왼쪽 위 선택 표시가 카드 전체로 바뀝니다.
- 왼쪽 패널 "카드"의 카드 최대 폭 (비우면 제한 없음) 칸에 숫자를 넣습니다. 200부터 1200까지 10 단위로 넣을 수 있습니다.
- 미리보기가 바로 좁아집니다. 값을 바꿔가며 한 줄이 편하게 읽히는 지점을 찾습니다.
- [코드 복사]로 수정된 코드를 복사해 Anki의
도구 → 노트 타입 관리 → 카드...화면에 붙여넣습니다.
카드 폭을 바꾸면 CSS에 무엇이 들어가나
이 칸은 값 하나만 쓰는 게 아니라 세 줄을 함께 씁니다.
.card { max-width: 500px; margin: 0 auto; padding: 0 10px; }
max-width— 카드가 넓어질 수 있는 한계입니다.margin: 0 auto— 남은 공간을 좌우로 똑같이 나눠 카드를 가운데로 모읍니다. 이게 없으면 폭만 좁아지고 내용은 왼쪽에 붙습니다.padding: 0 10px— 화면이 그 폭보다 좁을 때 글자가 가장자리에 닿지 않게 합니다. 서식에 이미padding이 있으면 건드리지 않습니다.
폭을 바꾸기 전에 알아둘 것
칸을 비우면 max-width만 지워집니다.
margin: 0 auto와 padding: 0 10px은 서식에 남습니다. 폭 제한이
없으면 둘 다 눈에 띄는 효과가 없지만 코드에는 남아 있으니, 완전히 되돌리려면
[코드 보기]에서 직접 지워야 합니다.
스마트폰에서는 거의 달라지지 않습니다. 휴대폰 화면 폭이 이미 500px
안팎이라 max-width에 걸리는 일이 드뭅니다. 이 설정은 데스크톱과 태블릿에서
효과가 납니다.
margin을 직접 쓰던 서식이라면 덮어씁니다. 카드에 여백을
따로 주고 있었다면 그 값이 0 auto로 바뀝니다. [코드 보기]로 확인하세요.
노트 유형마다 따로 정해야 합니다. 카드 서식은 노트 유형에 속한 카드 유형에 저장되므로, 여러 노트 유형을 쓴다면 각각에 적용해야 합니다.
자주 묻는 질문
Anki에서 카드 폭을 좁게 만들 수 있나요?
됩니다. 스타일의 .card에 max-width를 넣고
margin을 0 auto로 주면 카드가 그 폭 안에서 가운데로 모입니다.
Anki는 카드를 웹뷰로 렌더링하기 때문에 일반 CSS가 그대로 적용됩니다.
카드 폭은 몇 px이 적당한가요?
500px 안팎에서 시작해 보세요. 단어 위주면 400px, 긴 서술형이면 600px까지 넓혀도 됩니다. 측정된 최적값이 아니라 권장 시작점이라, 미리보기를 보며 한 줄이 눈에 편하게 들어오는 지점을 찾는 편이 확실합니다.
폭을 줄였는데 카드가 왼쪽에 붙어요.
margin: 0 auto가 빠진 경우입니다. max-width만 있으면 폭만
좁아지고 위치는 왼쪽 그대로입니다. ankieditor의 카드 최대 폭 칸을 쓰면 max-width와 margin을
함께 넣어 주므로 이 문제가 생기지 않습니다.
줄이 길어 눈이 미끄러진다면 Anki에서 왼쪽 정렬하는 방법과 Anki 줄간격 조절하는 방법도 함께 보세요.