중고등학교 시절에 미쳐있었던 수학은 지금 돈을 계산할 때 사칙역산 하는 것 말고는 잘 쓰지 않는다. 그 이상의 무슨 공식이 나오면 머리만 아프고 생각하기도 귀찮다. 대학교 때에는 각종 사회과학과 철학, 정신분석학 등에 천착했던 것 같지만 지금은 그저 흐릿한 느낌이라 그런 것을 스스로 안다고 자신할 수 없다. 1년 정도 양자역학에 미쳐서 살았지만 “파동방정식”이라는 이름 하나만 기억에 남았고 그것이 무엇이었는지 잘 생각나지 않는다. 천자문을 입에 달고 살았지만 지금은 天地玄黃만 남아있다. 그동안 공부하고 고민했던 모든 것들이 말하고 행동하는 것에 어느 정도 반영된 것 같지만 어느 순간부터 내 것이라는 느낌은 들지 않는다. 


여전히 많은 책을 읽고 많은 흥미를 가지고 살고 있지만, 이건 지금 눈에 들어왔을 뿐 곧 잊혀진다는 것을 항상 깨닫는다. 그저 흥미를 느끼는 것을 읽고 그 와중에 마음에 와 닿는 내용 한 두 가지가 잠시 남아서 영향력을 발휘하다가 1주일 이내로 사라진다. 그래서 발전하고 싶으면 그에 관한 내용을 더 읽어야 한다. A가 쓴 책으로 얻은 것이 있으면 그 논지를 발달시킨 B의 책을 읽는다. 그리고 어느 순간 알 것 같다는 느낌을 받는다. 몇 년여에 걸친 독서 끝에 그 분야에서 사용하는 어휘가 익고 논리 전개에 익숙해지면서 이제 잘 설명할 수 있을 것 같다. 그리고 이제 알았으니 더 이상 흥미가 생기지 않는다. 현실에서 그 내용을 업으로 삼았다면 모를까? 쓰지 않는 지식과 생각은 조금씩 사라지다가 어느 순간 그 흔적도 남지 않는다. 몇 년 후에 돌이켜 보면 너무나 허무하다. 그래도 별 수가 없었다. 그저 익히고 배우면서 조금씩 남기면서 지나가다 보면 저 무의식 깊은 곳에서 착실히 양분이 쌓이고 있을 것이라고 스스로를 위로할 뿐이다.


이미 지나가 버린 지식을 다시 일일이 찾아서 들여다보고 싶다는 생각도 가끔 해보지만 다시 지나간 책들은 그저 과거의 빛바랜 생각인 경우가 많다. 다시 몇 년을 투자하여 흥미가 없는 분야를 다시 공부하라고 한다면 그것은 또 새로운 수험생활일 것이다. 게다가 지금은 다른 공부를 하고 다른 사람들과 다른 일을 하고 있으니 과거의 것을 들출 여유가 남아있을 리가 없다. 


그래도 마음속에는 이런 궁금증이 있다. 삶의 환경에서 정신분석학을 검증하고 철학에 대한 결론을 내리면서 지내왔으면 어땠을까? 수학을 이용하여 상황을 모델링하고, 통계와 확률을 끌어들여 보다 나은 의사판단을 해왔으면 어땠을까? 잘못된 지식을 거르고 삶의 고민마다 결론을 이끌어냈다면 지금은 얼마나 다른 삶을 살고 있었을까? 내 삶 속에서 지식이 검증되고 정련되고 현실을 깨닫는 틀이 되며 다시 현실을 반영하는 지혜가 되었다면 내 삶은 얼마나 충실해졌을까? 이런 궁금증 말이다.


이런 궁금증이 들 때마다 호기심을 해결해줄 방법을 찾아보았지만 마음에 드는 처방은 없었다. 그저 옛날 선비들처럼 하루에 일만번씩 성현의 지식을 낭독해서 영혼에 때려 박으라는 식의 처방 말고는 없었다. 이럴 때 만난 것이 Anki였다. 더 이상 일만번씩 책을 읽을 필요가 없이 잊을만하면 예전에 공부했던 내용들이 카드로 나타난다. 어떤 카드는 이제 더 이상 유효하지 않고 어떤 카드는 수정될 필요가 있다. 어떤 카드는 내가 잊고 있었던 것이 무엇인지 환기해준다. 덕분에 지금 하고 있는 수많은 활동들이 과거의 기억과 함께 항상 재평가되고 재검토될 수 있는 기회를 제공해준다. 현재의 발전된 수준으로 과거의 오류를 바로잡기도 하고 과거의 기억으로 현재의 오류를 바로잡기도 한다. 그래서 나는 Anki의 카드마다 사적인 사족이나 당시의 생각을 적어놓는다. 잊을만하면 다시 나타나 과거의 내 모습을 보여주면서 대화하기 때문이다. 더 이상 독서는, 공부는 그저 한때의 흥미에 불과한 것이 되지 않는다. 그것은 항상 미래의 자산이 되고 미래의 나에게 보내는 메시지로 남게 되었다.

0043 CSS의 길이(length) 중 절대 길이(absolute length)


이쯤에서 CSS길이(length) 단위들에 대하여 정리하고 넘어가는 것이 적절할 것 같다. CSS로 스타일링을 할 때 길이(length)를 제시해야하는 경우가 많아 앞으로 width(너비), margin(여백), padding, font size(텍스트의 크기), boder-width(경계선의 굵기) 등 수많은 경우에 길이(length)속성값으로 제시하기 때문이다.

      
길이(length)와 같이 속성값에 단위가 붙는 경우에는 해당 숫자와 단위 사이는 10px, 2em 등 같이 공백없 딱 달라붙어야 한다.



절대 길이(absolute length)


앞서 언급한 것처럼 절대 크기(absolute size)특정한 물리적 길이를 제시한 것이다. 그래서 그 단위도 cm은 센티미터(centimeter), mm은 밀리미터(millimeter), in은 인치(inch)와 같이 모두 현실에서 실제 길이를 측정할 때 자주 사용하는 단위들이다.

포인트(pt)1/72인치로 활자를 주조하여 사용하던 시절 활자의 치수를 규정하던 단위이다. 지금은 글자 크기나 줄 간격을 지정할 때 많이 사용한다. 파이카(pc)12포인트(pt)이고 1/6인치인치(in)포인트(pt)의 중간 단위이다.

픽셀(px)을 제외하면 절대 길이(absolute length)에 사용되는 단위들은 모두 실제 자를 대고 길이를 측정할 때 사용하던 길이들이다. 따라서 이러한 실제 길이를 속성값으로 사용하면 인쇄하거나 제작할 때 정확히 필요한 사이즈의 결과물을 구현할 수 있다는 장점이 있다. 따라서 정확한 결과물을 실제로 구현하기 위하여 작업하는 디자이너들은 이러한 정확한 절대 길이(absolute length)를 알아두면 매우 유용할 수 있다.

하지만 웹페이지는 그런 실제 구현하고 조금 다르다. 다양한 디바이스에서 서로 다른 화면 크기와 해상도를 가진 모니터 화면에 표시되는 웹페이지는 실제 물리적 길이가 중요하지 않으므로 절대 길이(absolute length)가 별로 유용하지 않다.

하지만 이러한 절대 길이(absolute length)픽셀(px)은 그 성격이 조금 다르다.



픽셀(px)

픽셀(px)이란 모니터 액정이 나타내는 가장 작은 하나의 점으로 화소라고도 한다. 우리가 흔히 말하는 해상도 1024×768 같은 수치는 가로 1024개의 픽셀이고 세로 768개로 전체 786432개의 픽셀이라는 의미이다. 이미지를 더 많은 픽셀을 이용한다면 더 상세하게 표현할 수 있게 되므로 픽셀이 많을수록 고품질의 이미지를 보여줄 수 있게 된다. 광고에 5백만 화소니 천만 화소니 하는 것을 강조하는 이유다.

픽셀(px)길이를 제시하면 모니터의 화면에서 몇 개의 픽셀로 해당 결과물을 구현할 것인가를 나타낸다는 점에서 현실 세계의 실제 길이를 나타내는 다른 절대 길이(absolute length)들과 성격이 조금 다르다.

모니터 화면으로 나타나는 결과물들은 현실에서 어떻게 구현되는지와 상관없이 모니터에서는 결국 픽셀로 환원되어 나타난다. 다양한 기기의 다양한 화면 크기에서도 결국 픽셀로 결과물이 구현되므로 웹페이지와 같이 주로 모니터로 출력되는 결과물에는 픽셀이 가장 적합한 길이 단위인 셈이다.

따라서 웹 디자인을 한다면 구현된 결과물이 모니터 스크린에 나타나므로 다른 절대 길이(absolute length) 단위는 몰라도 픽셀(px) 단위는 어느 정도 사용할 줄 알아야 할 것이다.

물론, 픽셀(px)절대 길이(absolute length)이므로 실제 물리적 길이가 1/96 인치로 설정되어 있다.

다음의 구문은 텍스트의 크기를 14픽셀(px)로 명시한 것이다.


p { font-size: 14px; }


이 때 단위인 px숫자 사이에 공백을 두지 말아야 한다.

절대 크기(absolute size)는 사용자가 임의로 텍스트의 크기를 조절할 수는 없지만 줌(zoom)을 이용하여 웹페이지 전체를 확대하거나 축소할 수는 있다.

다음과 같이 작성하고 
0043.html로 저장하자.


<!DOCTYPE html>

   

<html>
<head>
 <title>텍스트 크기</title>
 <style>
  p.centimeter { font-size: 1cm; }
  p.millimeter { font-size: 10mm; }
  p.inch { font-size: 1in; }
  p.point { font-size: 72pt; }
  p.pica { font-size: 6pc; }
  p.pixel { font-size: 96px; }
 </style>
</head>
<body>
 <p class="centimeter">텍스트 크기(1cm)</p>
 <p class="millimeter">텍스트 크기(10mm)</p>
 <p class="inch">텍스트 크기(1in)</p>
 <p class="point">텍스트 크기(72pt)</p>
 <p class="pica">텍스트 크기(6pc)</p>
 <p class="pixel">텍스트 크기(96px)</p>
</body>
</html>


실행해보면 다음과 같이 텍스트의 크기가 1cm10mm인 경우 서로 동일하고, 1in, 72pt, 6pc, 96px가 서로 동일하게 나타나는 것을 확인할 수 있다.




Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0043 CSS의 길이(length) 중 절대 길이(absolute length).apkg


2018-12-26-21:43 본문 및 Anki 파일에서의 문구를 다듬고 Anki에서 오류를 수정함(1in를 9pc로 작성한 오류 수정)




Anki 2.0 유저 매뉴얼을 블로그 형식으로 보니 과거의 매뉴얼을 찾기가 너무 어렵고 불편하다. 검색으로만 매뉴얼을 찾는 것에 한계가 있다고 판단하여 아래와 같이 매뉴얼을 게재한 블로그 페이지 제목과 주요 키워드를 나열했고 그에 대한 각각의 페이지에 링크를 붙여 색인을 만들었다.

Introduction(개요)
Active Recall Testing(능동적 기억환기)
Use It or Lose It(사용하지 않으면 잊는다.)
Spaced Repetition(간격 반복)
Why Anki?(왜 Anki인가?)

The Basics
Cards(카드들)
Decks(카드뭉치들)
Notes & Fields(노트와 필드)
Card Types(카드유형)
Collection(컬렉션)
Note Types(노트유형)
  1) 기본(Basic)
  2) 기본(역방향 카드 포함)
  3) 기본(선택적 역방향 카드)
  4) 빈칸(Cloze)

Adding Material(학습자료추가)
Downloading Shared Decks(공유 카드뭉치 다운로드 하기)
Adding Cards and Notes(카드와 노트 추가하기)
Adding a Note Type(노트유형 추가하기)
Customizing Fields(필드 입맛대로 사용하기)
Changing Deck / Note Type(카드뭉치와 노트유형 변경하기)
Using Decks Appropriately(카드뭉치를 적절하게 사용하기)

Studying(공부하기)
Decks(카드뭉치)
Study Overview(학습 개요)
Questions(문제들)
Learning(익히기)
Reviewing(복습하기)
Due Counts and Time Estimates(대기 카드수와 학습간격 추정)
Editing and More(편집 및 그 외)
Display Order(표시 순서)
Siblings and Burying(유사카드와 덮기)
Keyboard Shortcuts(단축키)
Falling Behind(학습이 뒤처지는 경우)

Editing(편집하기)
Features (편집기 기능)
Cloze Deletion (빈칸 만들기)
Inputting Foreign Characters and Accents (외국문자 및 액센트 집어넣기)

Cards and Templates(카드와_템플릿)
Reverse Cards(카드 뒤집기)
Basic Templates(기본 템플릿)
Checking Your Answer(답을 입력하여 확인하기)
Newlines(줄바꾸기)
Card Styling(카드 꾸미기)
Field Styling(필드 꾸미기)
Hint Field(힌트 필드)
Special Field(특수 필드)
Card Generation & Deletion(카드의 생성과 삭제)
Selective Card Generation(선택적 카드 생성)
Media & LaTex References(미디어 및 LaTeX 참조)
Conditional Replacement(조건부 대체)
Cloze Templates(빈칸 노트유형 템플릿)
Other HTML(HTML 사용)
Dictionary Links(온라인 사전 링크 만들기)
HTML Stripping(HTML 서식 지우기)
Browser Appearance(탐색기에서 표시할 때)
RTL (right to left) text(오른쪽에서 왼쪽으로 읽는 텍스트)
Platform-Specific CSS(특정 플랫폼별 CSS)
Installing Fonts(글꼴 설치하기)
Javascript(자바스크립트)

Profiles and Preferences(프로필 및 환경설정)
Profiles(프로필)
Preferences(환경 설정)

Deck Options(카드뭉치 옵션)
Introduction(개요)
New Cards(새 카드)
Reviews(복습)
Lapses(실패)
General(일반)
Description(설명)

AnkiWeb and Synchronization(AnkiWeb과 동기화)
Setup(동기화 설정)
Automatic Syncing(자동 동기화)
Media(미디어)
Conflicts(충돌들)
Merging Conflicts(충돌들 통합하기)
Firewalls(방화벽)
Proxies(프록시)

Browser(브라우저)
Introduction(개요)
Sidebar(사이드바)
Searching(검색)
  Simple searches(단순검색)
  Limiting to a field(특정 필드만을 대상으로 검색)
  Tags, decks, cards and notes(태그, 카드뭉치 그리고 노트)
  Card state(카드 상태)
  Card properties(카드 속성)
  Recently added(최근 추가된 카드)
  Recently answered(최근 학습된 카드)
  Object IDs(객체 ID)
Card List(카드 목록)
Current Note(현재 노트 창)
Toolbar(툴바)
Find and Replace(바꾸기)
Find Duplicates(중복된 항목 찾기)
Other Menu Items(다른 메뉴 항목들)
  Reschedule(일정 재조정)
  Reposition(위치 재조정)
  Change Note Type(노트 유형 바꾸기)
  Select Notes(노트 선택)
  Go(이동)

Filtered Decks & Cramming(여과된 뭉치와 벼락치기)
Introduction(도입)
Custom Study(맞춤 공부)
Home Decks(홈 뭉치)
Creating Manually(여과된 카드뭉치 수동으로 생성하기)
Order(선택 기준 순서)
Steps & Returning(익힘 단계 및 카드 복귀)
Counts(카드 수 집계)
Due Reviews(만기에 이른 복습카드)
Reviewing Ahead(앞당겨 복습하기)
Rescheduling(일정조정)
Catching up(뒤처진 학습 따라잡기)

Leeches(거머리)
Waiting(대기)
Deleting(삭제)
Editing(삭제)

Importing(가져오기)
Importing text files(텍스트 파일 가져 오기)
Spreadsheets and UTF-8(스프레드 시트 및 UTF-8)
HTML
Importing Media(미디어 가져오기)
Adding Tags(태그 추가하기)
Duplicates and Updating(중복 및 업데이트)

Exporting(내보내기)
Exporting Text(텍스트 내보내기)
Exporting Packaged Decks(카드뭉치 묶음 내보내기)

Managing Files and Your Collection(파일 및 컬렉션 관리)
Checking Your Collection(컬렉션 검사하기)
File Location(파일 위치)
Startup Options(시작 옵션)
DropBox and File Syncing(DropBox 및 파일 동기화)
Network Filesystems(네트워크 파일 시스템)
Running from a Flash Drive(플래시 드라이브로 실행)
Backups(백업)
Inaccessible Harddisk(접속 권한이 없는 하드 디스크)
Permissions of Temp Folder(Temp 폴더의 사용 권한)
Corrupt Collection(손상된 컬렉션)

Graphs and Statistics(그래프 및 통계)
Card Info(카드 정보)
Statistics(통계)
Types of Cards(카드의 종류)
Today(오늘)
The Graphs(그래프)
Manual Analysis(수동 분석)

Media(미디어)

LaTex Support(LaTex 지원)
Installing and Assumed Knowledge(설치 및 알고 있어야 할 내용들)
LaTex on Web/Mobile(웹 및 모바일에서 LaTex)
Example(사례)
LaTex packages(LaTex 패키지)
LaTex conflicts(LaTex 충돌)

Miscellanea(기타)
Menu Shortcuts(메뉴 바로 가기)
Debug Console(디버그 콘솔)
Add-ons(추가 기능)

Contributing
Sharing Decks Publicly(카드뭉치 공개 공유하기)
Sharing Decks Privately(개인적으로 카드뭉치 공유하기)
Sharing Add-ons(추가 기능 공유하기)
App Translations(앱 번역)
Translating the Manual(매뉴얼 번역하기)
Contributing Code(코드 기여하기)

FAQ(자주 묻는 질문)

Resources
SuperMemo





+ Recent posts