책 씹어먹는 즐거움

CSS에서는 HTML 요소 하나하나를 네모난 박스(box)로 취급한다. CSS는 HTML 요소가 문단, 제목, 블록 인용구, 리스트, 리스트 항목 등 어떤 요소이든 박스로 다루어지고 <em>과 같은 인라인 요소라고 해도 마찬가지로 박스로 취급한다.

따라서 CSS 박스 모델(box model)이란 HTML 요소가 어떤 모양의 박스(box)인지를 제시하는 모델이다. 그리고 이 박스 모델을 알아야 HTML 요소들의 레이아웃(layout), 크기와 간격 등을 섬세하게 조절할 수 있게 된다.

HTML 요소를 이루고 있는 박스는 마진(margin), 테두리(border), 패딩(padding), 그리고 내용(content)으로 아래의 그림과 같이 구성된다.

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

Ankilog 파일:  0050 CSS 박스 모델(box model).apkg

<div>와 <span> 요소는 인접한 HTML 요소와 텍스트들을 묶는 역할을 하는 요소다. 인접한 요소들을 묶어 구분된 영역인 섹션을 만들어낸다는 점이 클래스 속성(class attribute)과 다르다. 

<div> 요소와 <span> 요소는 다른 HTML 요소들을 묶는 역할만 하기 때문에 보통 여러 요소들을 담는 용기(container)로 이해할 수 있다는 점에서 서로 거의 동일하다. 단지, <div> 요소는 블록 요소이고 <span> 요소는 인라인 요소라는 것이 서로 다를 뿐이다.

<div> 요소

<div> 요소는 HTML 문서에서 섹션이나 영역을 정의하는 블록 요소다.

<div> 요소에 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

다음과 같이 0049_div.html 파일을 만들어 <div> 요소를 실제 사용해보자. 

실행해보면 다음과 같이 2개의 섹션으로 나누어진 HTML 문서를 볼 수 있다. 

위의 사례에서 <div> 요소는 <h3>와 <p> 요소를 담고 있으며 아이디(id) 속성으로 구분되어 별도의 CSS를 적용하고 있다. 

<div> 요소에 담겨 있는 <h3>와 <p> 요소는 모두 <div> 요소에 적용된 CSS가 그대로 상속되어 적용되는 것을 확인할 수 있다.

<span> 요소

<span> 요소는 인라인 요소로 다른 인라인 요소나 텍스트들을 묶는 용도로 사용된다.

인라인 요소라는 점을 제외하면 <span> 요소는 <div> 요소와 동일하다. 

다음과 같이 0049_span.html 파일을 만들어 <span> 요소를 실제 사용해보자. 

실행 결과는 다음과 같다. 

위의 사례에서 <span> 요소의 내부에 텍스트와 <strong> 요소, <em> 요소 등이 중첩(nesting)되어도 문제없이 작동하는 것을 확인할 수 있다. 

<span> 요소도 <div> 처럼 아이디(id) 속성을 이용하여 CSS를 적용하고 있는데 <div>와 마찬가지로 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

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

Ankilog 파일:   0049 div 요소와 span 요소.apkg

2019년 새해가 밝았으니 과거를 한번 돌아보자.

오늘은 Anki에서 제공해주는 통계를 보면서 그동안 학습한 결과를 정리해보자. 

Anki의 통계 및 그래프 읽는 법은 다음의 매뉴얼을 참조하면 된다. 

95_(그래프_및_통계)_통계_(Statics)

96_(그래프_및_통계)_카드_종류_및_오늘_통계_(Types_of_Cards_&_Today)

97_(그래프_및_통계)_그래프_(The_Graphs)

통계를 열어보면 아래에 옵션 선택 단추가 나타난다. 

그 동안 공부한 전체 카드에 대한 통계를 전기간에 걸쳐서 보려는 것이므로 [모음집]과 [뭉치 일생]을 선택한다. 

첫 번째 나오는 것은 오늘이라는 표시와 함께 나타난다. 아침에 15개의 카드를 잠깐 보았다. 밥 먹으면서 커피를 끓이면서 설거지를 하면서 짜투리 시간을 이용하여 여유롭게 봤기 때문에 6분이나 걸린 것으로 나온다. 보통 카드 복습은 그렇게 많은 시간이 걸리지 않는다. 이는 나중에 좀 더 자세히 이야기해보도록 하자.

다음에 나오는 그래프는 앞으로 공부할 복습량을 예상(forecasting)한 그래프다. 

이 통계는 현재 복습할 카드들이 앞으로 학습 관리 원칙에 따라 그대로 공부할 경우 공부할 카드의 개수가 어떻게 줄어드는지 보여준다. 

즉, 현재 19,271개의 복습 카드가 있다. 이번 달(0달)은 2,800개 정도의 카드를 복습하고 다음날은 1,600개 그 다음날은 1,200개 순으로 줄어들다가 4년 2개월(50개월) 후에는 거의 복습할 카드가 없어진다는 것을 알 수 있다. 이렇게 복습할 카드의 개수가 기하급수적으로 줄어드는 모습은 앞서의 Anki로 하는 공부는 얼마나 효율적일까? 편에서 제시한 주별 일평균 카드수가 기하급수적으로 줄어드는 것과 똑같다. 

위의 그래프에서 제시된 카드들 중에서 성숙한 카드는 학습 간격이 21일 이상인 카드를 의미한다. 즉, 대략 4번 이상 반복된 학습으로 충분히 내용을 숙지한 카드를 성숙한 카드라고 하고 그 이전의 카드를 어린 카드라고 지칭한다.

다음 그래프는 처음부터 지금까지 답변한 질문의 개수를 나타낸 복습 횟수 그래프다.

155,859회 복습을 한 것으로 나타나는데 카드 하나를 여러 번 반복해서 학습했기 때문에 가능한 숫자다.

공부한 기간 85%는 매뉴얼에 별도의 설명이 없어서 스스로 추정해봤다. 공부한 기간은 전체 기간 중에 실제 공부한 날짜를 의미하는 것 같다. 즉, 1035일 중에서 883일 공부했다는 의미로 들린다. 즉, 2016년 3월 2일에 Anki를 이용하여 공부를 시작한 것으로 이제 대략 34개월 정도 공부한 셈이다.

공부한 기간 동안 평균은 실제 공부를 한 883일을 기준으로 평균을 내보면 하루에 176.5개 카드를 복습했다는 의미이고 전체 기간인 1,035일을 기준으로는 하면 하루 150.6개 카드를 공부했다는 의미다.

다음은 실제로 공부한 시간을 집계한 복습 시간 그래프인데 이건 정확히 믿기가 힘들다. Anki 모바일앱을 켜놓고 짜투리 시간이 날 때마다 한 번 들여다보거나 산책하면서 길을 걸으면서 조금씩 내용을 음미하면서 카드를 보는 방식으로 공부했기 때문에 실제 공부한 시간보다 오랜 시간 공부한 것으로 집계되었다. 그럼에도 공부한 기간 동안 평균 학습 시간은 하루에 73.8분으로 1시간 15분 정도밖에 되지 않는다. 즉, 176.5개의 카드를 보는데 최대 1시간 15분 정도 걸렸다는 의미이다. 개인적인 추정으로는 30분이면 될 것이다.

다음은 복습 간격 그래프다. 현재 카드들의 복습간격이 어떻게 분포되어 있는지 나타내는 그래프다. 복습간격이 1달 이내(0달)인 카드들이 780개 정도 있다. 복습간격이 12달과 13달인 카드들이 가장 많은 850개와 900개 정도인 것으로 나타난다. 카드들의 평균 복습 간격은 1.4년이고, 최대 복습 간격은 5.1년인 것으로 나타나니  하나의 카드가 가장 많이 반복된 회수가 8회 정도라는 것을 추정할 수 있다.

마지막 그래프는 카드 유형 그래프이다. 

그 동안 총 21,400개의 카드를 만들었고 그 중 2,124개의 카드를 제외한 19,276개의 카드를 학습한 셈이다. 대부분 성숙한 카드이고 보지 않은 카드들은 새 카드로 만들었지만 한 번도 학습하지 않은 카드들이다. 

과거 3년 정도 학습한 내용이 일목요연하게 보이니 재미있고 신기하다. 이제는 단지 추상적으로 열심히 공부했다고 말하지 않고, 구체적으로 그 동안 19,276개의 카드를 공부했어라고 말할 수 있으니 스스로 공부한 양을 구체적인 수치로 확인한 셈이다. 게다가 이 카드들은 그저 책을 읽듯 읽고 넘어간 것이 아니고 이해하고 암기하고 있으며 추후에도 계속 이해하고 외우고 있을 것을 확신한다는 점에서 마치 재산을 축적한 것 마냥 뿌듯한 느낌이 든다. 올해에도 더욱 발전하고 지식이라는 재산을 더 늘려가고 싶다.

Happy New Year!

Anki가 카드의 앞뒷면을 이용한 학습도구라는 점에 대해서 계속 이야기해왔고 분명히 Anki는 지식을 효과적으로 다루고 볼 수 있게 해주는 훌륭한 카드 학습도구다. 그렇지만 그런 이유 때문에 Anki를 사용하고 있는 것은 아니다. Anki의 진정한 가치는 개별 카드의 학습을 매우 효율적으로 관리해주기 때문에 사용하는 것이다.

앞서 처음 암기(Anki)한 이야기에서 언급한 대로 헤르만 어빙하우스의 망각 곡선의 원칙에 따라서 공부를 해보고 싶다는 생각에 망각곡선에 따라 지식을 관리하고 조절할 수 있는 학습 관리 시스템을 찾았다. 그러다가 마주친 것인 Anki였다. 

Anki의 학습 관리 원칙은 망각 곡선과는 조금 달랐다. 망각 곡선의 원리와 완전히 다른 원칙을 적용하고 있는 것이 아니라 망각 곡선 외에 더 많은 요소를 고려한 복잡하고 섬세한 원칙을 적용하고 있다. 어떤 카드를 공부했을 때, 이 카드를 공부한 횟수가 많을수록 더 카드의 노출 간격이 길어지면서 더 드문드문 그 카드와 마주치게 된다는 점은 망각 곡선과 유사하다. 하지만 카드를 학습한 후 학습자가 평가한 난이도에 따라 조금씩 간격이 길어지거나 짧아지고 항상 비슷한 카드들이 비슷한 순서로 나타나는 것을 막기 위하여 약간의 무작위적 변동(±α)이 적용되도록 한 점 등 좀 더 섬세하게 바뀐 점이 많다. 이런 Anki의 학습 관리 시스템은 결국 카드의 노출 간격을 적절히 조절하여 학습 효과를 극대화하는 것이므로 간격 반복 시스템(spaced repetition system)이라고 부른다. 

Anki의 간격 반복 시스템에 대해서는 다음을 참조하기 바란다.

01_Introduction(개요)_Anki_2.0 유저 매뉴얼

107_(FAQ)_자주_묻는_질문_2.0_유저_매뉴얼

그렇다면 이러한 간격 반복 시스템은 실제 얼마나 효율적일까?

우선 카드를 처음 만들면 새 카드를 익히는 과정을 거치고 나서 충분히 익혔다고 판단되면 복습카드로 변한다. 그리고 복습카드 부터는 한번 공부할 때마다 간격 반복 시스템이 적용되어 해당 카드가 나타나는 노출 간격이 늘어나므로 실제 카드가 나타나는 빈도수는 줄어들게 된다. 

이 때, 카드의 간격은 기본적으로 앞서의 간격의 2.5배±α 가 증가하는 식으로 늘어난다. 

카드의 간격은 기본적으로 2.5배씩 늘어나지만 응답시간이나 난이도 평가에 따라서 조금씩 그 비율이 변경된다. 이 부분에 대해서는 나중에 다루고 이번에는 기본 간격인 2.5배로만 이야기를 진행하도록 하자.

±α는 카드들이 매번 동일하게 나타나는 것을 막기 위하여 도입된 변동 요소다. 

아래의 그림을 보자 ±α가 없을 때 1,000개의 카드가 시간이 지나가면서 어떻게 나타나는지 보여주고 있다. 2.5배씩 간격이 벌어지지만 매번 하루에 1,000개의 카드가 나타난다. 

±α가 있으면 양상이 달라진다. 간격이 벌어지면서 카드들이 여러 날에 걸쳐서 분산되기 시작한다.

±α가 있음으로 인하여 카드들은 공부한 회차가 늘어날수록 점점 여러 날에 걸쳐 나타나게 되기 때문에 카드를 공부할수록 1,000개의 카드가 점점 넓게 여러날로 분산되고 그만큼 매일매일 공부하는 부담도 같이 줄어들게 된다. 

※ ±α 값은 공개된 값을 찾지 못해 임의로 추정하여 적용한 값이다. 

간격 반복의 가장 기본적인 원칙을 살펴 보았으니 이번에는 간단한 사례로 실제로 카드가 시간에 따라서 어떻게 나타나는지 확인해보자. 

우선, 카드 1개가 어떻게 나타나는지 보자. 

카드의 노출 간격은 앞선 간격의 대략 2.5배로 늘어난다. (±α는 평균적으로 0이므로 개별 카드 1개의 기간을 계산할 때는 고려하지 않는다.)

그러면 첫날 공부한 카드는 3일, 9일, 26일, 75일, 218일, 632일 순으로 노출 간격이 늘어나게 된다. 이를 표로 나타내면 다음과 같다. 

즉, 하나의 카드를 9번 공부하는데 걸리는 시간이 22.2년이므로 평생 1개의 카드를 9번 정도 반복해서 공부하게 된다. 바꿔서 생각해보면 한 개의 카드를 9번만 반복해서 익히면 평생 해당 기억을 유지할 수 있다는 말이니 얼마나 효율적인 학습인지 가늠할 수 있다. 물론, 매순간마다 제대로 학습한다는 전제하에서 하는 말이다.

학습을 하면서 전체 학습하는 카드가 줄어드는 양상을 살펴보면 얼마나 효과적인 학습인지가 분명해진다. 가령, 1,000개의 카드를 매번 적절하게 학습한다고 가정할 때 카드의 개수가 어떻게 변화하는지 시뮬레이션 해보자. 

1,000개의 카드는 대략 2일 후에 500개 3일 후에 500개 정도의 카드로 반으로 쪼개져서 나타난다. 

그래서 첫 주는 첫날 1,000개의 카드와 3일 500개, 4일 500개로 2,000개의 카드를 7일 동안 학습하게 되므로 첫 번째 주에는 일평균 286개의 카드를 학습한다. 하지만 두 번째 주부터는 일평균 카드의 수가 143개로 반으로 줄어들고 매주 마다 거의 절반 수준으로 일평균 카드의 수가 줄어들다가 반년(26주)이 지나면 이제 주당 1~2개의 카드 정도를 학습하게 된다.

Anki의 간격 반복 시스템은 결국, 학습할 카드들을 대략 9번 정도 반복하면서 그 때마다 간격을 크게 늘리고 카드를 분산시켜 극한의 효율로 학습할 수 있도록 관리하고 있다.  

그렇다면 이렇게 터무니없게 공부량이 줄어드는데 과연 제대로 학습이 이루어지는가 하는 의문이 생길 것이다. 최적의 실험을 설계해서 이를 철저히 검증하면 좋겠지만 너무 많은 시간과 비용이 들어가므로 Anki에서 주장하는 그 학습 관리 원칙이 옳은지 틀린지는 개인으로 검증하긴 어렵다. 그래서 할 수 있는 이야기라고는 Anki를 사용하고 있는 나 자신의 경험상 Anki의 학습 관리 원칙에 따른 학습은 매우 만족스럽다는 정도에 불과하다.

마지막으로 카드를 학습할수록 카드들이 획기적으로 줄어든다는 사실을 알게 되니 공부하기가 한결 수월해졌다. 왜냐하면 지금 이 고비만 넘어가면 그 다음부터는 카드의 개수가 훨씬 줄어든다는 것을 알기 때문에 힘들 때에도 속으로 “이번만 잘 넘기면 다음부턴 훨씬 쉬워”라고 뇌까리면서 카드를 끝까지 공부하게 된다. 그리고 다음에 파격적으로 줄어드는 카드의 개수를 볼 때마다 기분이 좋아지고 후련하게 된다. 이런 식의 선순환 덕분에 나의 Anki 공부는 카드를 치워서 점점 부담이 줄어들고 후련해진다는 식으로 자리잡게 되었고 지금은 매일매일 카드를 치워 버릴 때마다 느끼는 후련함에 중독되어 버렸다. 

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

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

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

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

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

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

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

앞서 언급한 것처럼 절대 크기(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)로 명시한 것이다.

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

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

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

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

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

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

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

CSS에서 font-size 속성(property)으로 텍스트의 크기를 설정한다. 

body 요소에 적용되는 텍스트의 크기를 설정하는 규칙은 다음과 같이 작성하면 된다. 

font-size의 속성값(value)은 텍스트의 크기인데 이 텍스트의 크기 속성값이 한 가지 형식이 아니다. 

일단, font-size 속성의 속성값인 텍스트의 크기를 결정하는 형식은 크게 절대 크기(absolute size)와 상대 크기(relative size)로 분류할 수 있다.

절대 크기(absolute size)는 실제 길이(length) 단위인 mm(millimeters), cm(centimeters), in(inches), pt(points), pc(picas),  px(pixels) 등이다.

상대 크기(relative size)는 퍼센트(%)나 em 등이다.

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

Ankilog 파일:  0042 텍스트의 크기 font-size 개요.apkg

Ankilog파일 문구 수정 2018-12-23 10:20

바로 앞의 0038 클래스(class) 속성 포스팅에서 클래스(class) 속성에 대해서 알아보았으니 이제 이를 간단하게 사용해보자. 

다음은 같이 전 세계의 주요 여행지들 중에서 가고 싶은 곳을 추려 가나다순으로 나열해 놓은 0039_1.html

실행한 결과는 다음과 같다. 

여행지를 찾기 좋게 가나다순으로 나열해 놓았지만 조금 심심해 보인다. 만일 여행지를 고른다면 각 여행지가 도시인지 아니면 아름다운 자연과 전통적인 문화를 즐길 수 있는 시골인지에 따라 다를 것 같다. 

따라서 일단 도시인 "urban"과 시골인 "rural"로 나누어 나타내고 싶다. 그렇다면 이를 어떻게 HTML 요소에 반영할 수 있을까?

단순히 HTML로만 만든다고 한다면 중첩된 목록(nested list)을 이용하여 전체 여행지들을 도시인 "urban"과 시골인 "rural"로 나누어 다음과 같이 만들어 볼 수 있을 것이다. 0039_2(중첩된목록).html 참조

그런데 이렇게 분류해보니 조금 부족해 보인다. 일단, 가나다순으로 나열하겠다는 원칙이 무너진 것도 그렇고, 시골(rural)인 곳도 3군데 밖에 없어 좋은 분류가 아닌 것 같다. 차라리 원래의 가나다순으로 돌려놓고 각각의 여행지들 별로 특색을 표시해보는 것이 좋을 것 같다. 

바로 이런 경우에 필요한 것이 클래스(class) 속성이다. 전체 여행지들을 urban 클래스(class)와 rural 클래스(class)로 분류하여 다음과 같이 0039_3.html을 만들어 보자. 

아직, CSS를 만들지 않았으므로 바로 다음과 같이 0039.css 파일을 작성하여 0039_3.html 파일과 같은 디렉터리에 저장한다.

CSS는 간단하게 도시(urban)는 파란색 글씨로, 시골(rural)은 녹색 글씨로 스타일을 적용해보았다. 

이제 실행해보면, 경주, 교토, 오사카의 글자색이 녹색(green)으로 바뀐 것을 확인할 수 있다. 

구별해놓고 보니 온통 파란색으로 여행지가 전부 도시(urban) 일색이다. 그렇다면 도시의 종류를 조금 나누어 보자. 도시 중에는 각국의 수도인 서울, 워싱턴 같은 곳들도 있고, 그저 번화한 도시인 곳들도 있다. 이번에는 각국의 수도에 경계선(boder)을 주어 다른 도시와 구별해보도록 하자. 

우선, 각국의 수도인 여행지는 "main" 클래스(class)에 속하도록 다음과 같이 0039_4.html 파일을 작성한다. CSS를 적용할 파일도 변경할 것이므로 <link /> 요소의 href 속성도 "0039_1.css"로 수정한다. 

그리고 다음과 같이 0039_1.css 파일을 작성하여 0039_4.html 파일과 같은 디렉터리에 저장한다. 

실행 결과는 다음과 같다.

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

Ankilog 파일:  0039 클래스(class) 속성 사용해보기.apkg

이제 클래스(class)를 다루어보자. 

1. HTML에서 클래스(class)

클래스(class)는 요소(element)들을 특정 클래스(class)로 묶는 속성(attribute)이다. 

HTML에서 클래스(class) 속성(attribute)은 주로 동일한 클래스에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용된다. 

HTML 요소(element)에 클래스(class)를 부여하는 형식은 다음과 같다. 

실제 사용례는 다음과 같다.

클래스(class) 속성은 아이디(id) 속성처럼 모든 요소에 부가될 수 있는 전역 속성(global attribute)이므로 <p>와 <li>와 <h2> 요소 등 서로 다른 요소들이 동일한 클래스로 묶일 수 있다. 

그런데 이렇게 요소들을 클래스로 묶다 보면 하나의 요소가 여러 클래스에 속할 때가 있기 마련이다. 그런 경우 해당 요소의 클래스는 여러 개의 클래스명을 속성값으로 갖는다. 이런 경우에는 순서에 상관없이 클래스명을 공백으로 띄어서 구분해주기만 하면 된다. 

2. CSS에서 클래스(class)

CSS에서 클래스(class)에 따라서 요소를 선택하려면 요소와 클래스를 점(.)으로 이어 다음과 같은 형식으로 클래스 선택자를 만들면 된다. 

클래스(class)에 속한 요소 중에서 특정 요소만 선택할 경우에는 요소명.클래스명 형식으로 선택하고, 특정 클래스에 속한 요소들을 모두 선택할 경우에는 앞의 요소명을 생략하여 .클래스명 형식으로 작성하면 된다. 

실제 사용례는 다음과 같다.

클래스(class) 속성(attribute)은 아이디(id) 속성과 마찬가지로 대소문자를 가리므로 선택자를 작성할 때는 대소문자를 정확하게 기입해주어야 한다. 

3. 클래스(class)와 아이디(id)의 차이

아이디(id)와 클래스(class)는 모두 HTML 요소(element)들을 구분하고 분류하여 특정하는 용도로 사용되는 속성들이지만 두 가지 큰 차이점이 있다는 점을 다시 한번 상기하도록 하자. 

첫 번째는 아이디(id)는 요소 1개만 고유하게 특정하지만 클래스(class)는 여러 요소들을 묶는다는 것이다.

두 번째는 요소는 단 한 개의 아이디(id)만 가지지만 여러 개의 클래스(class)를 가질 수 있다는 점이다. 

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

Ankilog 파일:  0038 클래스(class) 속성.apkg

앞서, 요소 선택자(element selector)를 이용하여 CSS 규칙을 요소에 적용시켜 보았다. 하지만 이러한 요소 선택자는 해당 요소들을 가리지 않고 일괄적으로 모두 선택하는 문제가 있다. 

다음과 같이 0037_1.html 파일을 작성하여 실행해보자.

이것을 실행하면 다음과 같이 나타난다. 

요소 선택자로 <p> 요소를 선택하여 스타일을 적용했기 때문에, 4개의 <p> 요소 모두 동일한 스타일의 적용을 받는다.

하지만 우리는 동일한 요소들에게 각각 서로 다른 스타일을 적용하고 싶다. 어떻게 해야 하나?

이때, 각각의 요소를 고유하게 만들어주는 아이디(id) 속성을 이용하면 된다. 

아이디(id) 속성에 대해서는 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성에서 <a> 요소를 이용하여 특정 아이디(id)를 가진 요소로 이동할 수 있다는 내용으로 다룬바 있다. 

아이디(id) 속성(attribute)은 HTML 요소에 고유한 아이디(id)를 부여하는 속성이다. 따라서 그 속성상 당연히 하나의 웹페이지에서 각각의 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id)가 하나의 웹페이지에서 중복되면 웹 표준 위반이다. 

이러한 아이디(id) 속성을 이용하여 요소(element)가 고유해지면 CSS는 이 고유한 요소(element)를 선택하여 꾸미거나 필요한 작업을 수행할 수 있게 된다.

CSS에서는 특정 아이디(id)의 요소를 선택하기 위해서는 해쉬(#) 문자를 아이디(id) 속성값 앞에 붙여 해당 아이디(id)를 가진 요소를 선택하는 선택자를 만들 수 있다.

이제 다음과 같이 수정해서 0037_2.html보자. 

처음 작성한 0037.html 파일과 달리 각각의 <p> 블록에 아이디(id) 속성들이 주어졌고, 이러한 아이디(id)를 가진 요소를 선택하기 위하여 CSS에서는 #first, #second, #third, #fourth로 각각의 아이디(id) 속성을 가진 요소들에게 개별적으로 스타일을 적용하고 있다.

실행해보면 다음과 같이 동일했던 <p> 블록들이 각자 서로 다른 <p> 블록들로 나타난다.

아이디(id) 속성은 모든 HTML 요소에 사용할 수 있는 전역속성(global attribute)이다. 아이디(id)의 속성값은 최소 1개의 문자가 있어야 하며 스페이스나 탭 등의 공백(whitespace)은 허용되지 않는다. 이 때, 아이디(id)의 속성값은 대소문자를 가리므로 선택자를 작성할 때 주의해야 한다. 

2019. 1. 2일 아이디(id) 속성값에 대하여 다음과 같은 내용을 추가함. 

HTML 5 이후로 아이디(id) 속성값은 은 상기와 같은 규칙으로 바뀌었다고 W3C 튜토리얼에서 확인했으나 실제 아이디(id)를 숫자로 시작하거나 하이픈, 밑줄, 콜론, 마침표가 아닌 특수 문자를 쓸 경우 아이디(id) 속성이 작동하지 않는 것을 확인하고 아래와 같은 HTML 4.01 기준이 여전히 작동하고 있는 것을 확인함

다음은 아이디(id)의 속성값이 잘못 기입된 사례이다. 

아이디(id)와 비슷한 것으로 클래스(class)가 있다. 아이디(id)는 오직 하나의 고유한(unique) 요소를 식별하기 위하여 부여하는 속성이라면 클래스는 다양한 요소들을 묶어서 특정한 클래스(class)로 만들기 위한 속성이다. 클래스(class)에 대해서는 다음에 알아보도록 하자.

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

Ankilog 파일:   0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택.apkg

2019/01/02 1:19 AM 아이디(id) 속성값 작성 규칙 수정 및 Ankilog 파일 수정