0048 CSS로 색깔 넣기


CSS에서는 배경색(background color), 경계선(border), 글자색(text color) 등 많은 부분에 색깔이 들어간다. 따라서 이러한 색깔을 나타내는 몇 가지 방식을 살펴볼 필요가 있다.

      

CSS에서 색깔을 입력하는 방식은 색깔명(color name), RGB, HEX, HSL, RGBA, HSLA의 6가지를 주로 말한다. 이 중에서 HSL과 HSLA를 제외한 나머지 4가지만 알아보자.

          


색깔명(color name)

    

CSS에서는 다음과 같이 색깔명(color name)으로 해당 색깔을 불러올 수 있다. 

     

p { 

  background-color: blue;

  color: yellow;

  border: lightgray;

 }

   

색깔명(color name)은 대소문자를 구분하지 않는다.

     

과거에는 CSS에서는 16가지 색깔명(color name)만 허용되었지만 현재는 대략 140개의 색깔명(color name)을 대부분의 브라우저에서 지원하고 있어 그 사용폭이 늘었다. 

        

      

RGB


색깔명(color name)은 이름을 아는 색을 사용할 경우 편하지만 1,600만 가지의 색 중 140개 정도의 색만 사용할 수 있다는 한계가 있다. 따라서 미묘한 색감을 표현하고자 하는 사람이라면 보다 나은 방법을 찾고자 할 것이다. 

     

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세 종류의 색을 말한다. 컴퓨터 모니터, TV 등은 모두 이 RGB를 적당히 섞어서 다른 모든 색을 조합한다. 즉, RGB는 모니터가 색깔을 구현하는 원리인 셈이다.

      

CSS에서 RGB로 색깔을 구현할 때는 다음의 공식을 이용하여 RGB색을 구현한다. 

     

rgb(red, green, blue)


red, green, blue는 각각 0~255까지의 수를 가질 수 있는 인자(parameter)로 각각, Red, Green, Blue의 3색이 섞이는 정도를 의미한다. 

     

rgb(255, 0, 0)은 Red만 있고 나머지 Green과 Blue가 없으므로 빨간색이다. 

rgb(0, 255, 0)는 Green만 있고 나머지 Red와 Blue가 없으므로 초록색이다. 

rgb(0, 0, 255)는 Blue만 있고 나머지 Red와 Green이 없으므로 파란색이다. 

rgb(0, 0, 0)은 Red, Green, Blue의 모든 빛이 꺼졌으므로 검은색이다. 

rgb(255, 255, 255)는 Red, Green, Blue의 빛이 전부 켜졌으므로 흰색이다. 


red, green, blue의 인자는 0~255까지의 수 대신에 0~100%의 비율로 나타낼 수도 있다. 단, rgb 내에서 숫자와 %를 섞어서 쓰지 않는다. 즉, rgb(100%, 50, 20) 같이 섞어서 쓰지 않는다.

    

rgb(100%, 0%, 0%)는 Red만 100%이므로 빨간색이다.

rgb(0%, 100%, 0%)는 Green만 100%이므로 초록색이다. 

rgb(0%, 0%, 100%)는 Blue만 100%이므로 파란색이다. 

rgb(0%, 0%, 0%)는 Red, Green, Blue의 모든 빛이 꺼졌으므로 검은색이다. 

rgb(100%, 100%, 100%)는 Red, Green, Blue의 빛이 전부 켜졌으므로 흰색이다.


RGB를 사용한 예는 다음과 같다. 

     

p {

 color: rgb(255, 0, 0);

 background-color: rgb(0, 255, 0);

 border: 3px solid rgb(0%, 0%, 0%);

}



RGBA


RGBA는 RGB에서 투명도를 의미하는 알파(A)를 첨가한 것이다. 

           

함수는 rgb와 거의 유사한 rgba 이고 투명도를 의미하는 α 인자(parameter)가 첨가된 것이다. 다음과 같은 공식을 사용한다. 

       

rgba(red, green, blue, alpha)


red, green, blue는 rgb에서와 동일하고 α는 0.0~1.0까지의 값을 가진다. 0은 투명, 1은 완전 불투명이다. 



HEX 코드

HEX 코드는 16진수로 RGB를 다음과 같이 나타내는 것을 말한다. 
   
#rrggbb

HEX 코드는 항상 #으로 시작한다.

       

HEX 코드는 6개의 자리로 이루어져있는데 처음 두개(rr)는 빨간색, 다음 두개(gg)는 녹색, 마지막 두개(bb)는 파란색을 나타낸다.  

         

앞에서 RGB에서 red, green, blue는 각각 0~255까지 총 256개의 수로 표현된다. 256개는 2의 8승으로 8비트에 해당하는 숫자이고 이는 16진수 2자리로 나타낼 수 있다. 즉, 다음과 같다.

    

rr은 RGB에서 0~255 사이에 있는 red 인자의 값을 16진수로 표시한 것

gg는 RGB에서 0~255 사이에 있는 green 인자의 값을 16진수로 표시한 것

bb는 RGB에서 0~255 사이에 있는 blue 인자의 값을 16진수로 표시한 것


실제 전환되는 사례는 다음과 같다. 

         

#cc6600 = rgb(204, 102, 0)

cc = 12×16 + 12 = 204

66 = 6×16 + 6 = 102

00 = 0


HEX 코드를 사용한 예는 다음과 같다. 

     

p {

 color: #ff0000;

 background-color: #00ff00;

 border: 3px solid #000000;

}


파일 용량을 미세하게 줄일 수 있어서 실무에서는 RGB보다 HEX 코드를 더 많이 사용한다고 한다. 

    
마지막으로 사람이 미세한 색깔을 전부 기억해서 그것을 HEX 코드나 RGB로 전환하기는 어렵다. 보통은 포토샵이나  colorpicker에서 원하는 색상의 RGB 값이나 HEX 코드를 따와서 사용한다. 


Anki 파일


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


Ankilog 파일:    0048 CSS로 색깔 넣기.apkg





저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0050 CSS 박스 모델(box model)  (0) 2019.01.25
0049 div 요소와 span 요소  (0) 2019.01.24
0047 CSS의 Font Weight, Style, Variant  (0) 2019.01.08
0046 font-size 설정하기  (0) 2019.01.07
0045 CSS 반응형 길이(responsive length) 단위  (0) 2019.01.04

0047 CSS의 Font Weight, Style, Variant


Font Weight


Font Weight는 글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.

     

font-weight: normal; → 굵지 않음

font-weight: bold;   → 굵음


만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다. 

     

font-weight: normal; → 굵지 않음


이론적으로는 bolder와 lighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기를 보다 굵거나 얇게 만들 수 있다. 

      

혹은, 절대적인 굵기 단위인 100~900 사이의 숫자로 font-weight의 속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normal과 bold만 그 속성값으로 사용한다. 

    

다음과 같이 작성하여 0047_font_weight.html로 저장하고 실행해보자. 

            

<!DOCTYPE html>

    

<html>

<head>

<title>font weight</title>

</head>

<body>

<p style="font-weight: bold;">폰트 굵기(bold)</p>

<p style="font-weight: normal;">폰트 굵기(normal)</p>

<p style="font-weight: 100;">폰트 굵기(100)</p>

<p style="font-weight: 200;">폰트 굵기(200)</p>

<p style="font-weight: 300;">폰트 굵기(300)</p>

<p style="font-weight: 400;">폰트 굵기(400)</p>

<p style="font-weight: 500;">폰트 굵기(500)</p>

<p style="font-weight: 600;">폰트 굵기(600)</p>

<p style="font-weight: 700;">폰트 굵기(700)</p>

<p style="font-weight: 800;">폰트 굵기(800)</p>

<p style="font-weight: 900;">폰트 굵기(900)</p>

</body>

</html>


실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다. 




Font Style


Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.

     

font-style 속성(property)은 세 가지 속성값을 갖는다.

            

font-style: normal; → 변화 없음

font-style: italic; → 이탤릭

font-style: oblique; → oblique는 italic과 매우 비슷



Font Variant


Font Variant는 font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)은 소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다. 

    

font-variant: normal; → 변화 없음 

font-variant: small-caps; → 텍스트가 작은 대문자 글꼴로 나타남


작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다. 

    

<p style="font-variant: small-caps;">HTML ankilog font variant</p>




Anki 파일


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


Ankilog 파일:   0047 CSS의 Font Weight, Style, Variant.apkg




저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0049 div 요소와 span 요소  (0) 2019.01.24
0048 CSS로 색깔 넣기  (0) 2019.01.11
0046 font-size 설정하기  (0) 2019.01.07
0045 CSS 반응형 길이(responsive length) 단위  (0) 2019.01.04
0044 CSS의 길이(length) 중 상대 길이(relative length)  (0) 2019.01.03

0046 font-size 설정하기


앞에서 절대 길이(absolute length)와 상대 길이(relative length) 등을 살펴보았으므로 이제 font-size에 사용되는 길이(length)들이 어떻게 작동하는지 대충 알게 되었다. 

       

텍스트의 크기를 결정하는 것은 알게 되었지만 중요한 것은 다양한 브라우저들 사이에서 일관된 결과물을 만들어내는 것이므로 주로 사용되는 방법에 대해서 알아보자. 


우선, <body> 요소에 텍스트의 크기를 규정하여 웹페이지의 기준 텍스트 크기를 설정한다.

그리고 다른 요소들은 em이나 %를 사용하여 상대적인 비율로 텍스트의 크기를 결정한다.


<body> 요소에 기준이 되는 텍스트 크기를 설정할 때, %를 사용한다. 브라우저는 보통 기본 텍스트 크기를 16px로 설정한다. 따라서 <body> 요소에 텍스트 크기를 %로 설정하면 16px에 대하여 비례하는 텍스트 크기가 된다. 


<body> 요소의 텍스트 크기를 상대 길이(relative length)인 %를 이용하여 규정하면 나중에는 기준이 되는 <body> 요소의 텍스트 크기만 조절하여 전체 웹페이지의 텍스트 크기를 자연스럽게 조절하는 것이 가능해진다.


관련 자료를 찾다보니 불문율 같은 것이 느껴졌다. 이론적으로는 <body> 요소에서 텍스트 크기를 규정할 때 em이나 %나 모두 동일한 상대 길이(relative length)인데 W3C 튜토리얼이나 교재들을 뒤져보면 모든 예제에서 <body> 요소의 텍스트 크기는 반드시 %나 키워드로 규정하고 있다(키워드는 다루지 않으려고 한다.). 하물며 W3C에서는 em 사용을 권장하면서도 예제에는 <body> 요소에서 em으로 텍스트 크기를 설정하는 사례를 보여주지 않는다. 


그래서 Chrome과 FireFox에서 몇 가지 비교 테스트를 해보았지만 <body> 요소에서 font-size를 em으로 정의하나 %로 정의하나 전혀 차이가 없었다. 그래서 불문율이 실제로 있는 것인지 명확하지 않다. 개인적인 망상일지도 모른다고 생각하지만 워낙 HTML의 발달사가 혼란스러워서 과거에 어떤 문제가 있었는지도 모른다는 생각이 든다. 관련 자료를 찾아보니 디자인적인 문제와 개념적인 문제가 혼재되어 이야기를 전개하고 있어 내 역량을 넘어서는 문제라는 생각도 든다. 이에 대한 부분은 좀 더 전문적인 디자이너로 거듭날 때 파악하는 것으로 하고 em과 %에 대한 이야기는 이제 그만하려고 한다. 


em이나 %가 아닌 반응형으로 Font 크기를 결정할 수 있다. 이에 대한 상세한 내용은 0045 CSS 반응형 길이(responsive length) 단위 포스팅을 참고하기 바란다.


Anki 파일


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


Ankilog 파일:  0046 font-size 설정하기.apkg




저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0048 CSS로 색깔 넣기  (0) 2019.01.11
0047 CSS의 Font Weight, Style, Variant  (0) 2019.01.08
0045 CSS 반응형 길이(responsive length) 단위  (0) 2019.01.04
0044 CSS의 길이(length) 중 상대 길이(relative length)  (0) 2019.01.03
0043 CSS의 길이(length) 중 절대 길이(absolute length)  (0) 2018.12.26

0045 CSS 반응형 길이(responsive length) 단위


오늘날에는 컴퓨터가 데스크탑, 노트북, 모바일 기기, 냉장고, 자동차 등 다양한 기기에 다양한 목적으로 설치되어 인터넷에 연결되어 있다. 이 때, 디스플레이 규격이 모두 천차만별이라 다양한 상황에 대응할 수 있는 반응형(resposive) 길이(length)를 사용할 필요가 있다. 

      

반응형(resposive) 길이(length)라는 것은 브라우저 창(viewport) 크기에 따라 길이가 변하는 상대 길이(relative length)를 말한다. 

      

다음과 같은 종류가 있다. 

    

vw : 화면(viewport) 너비(width)의 1%를 1vw로 하는 단위

vh : 화면(viewport) 높이(height)의 1%를 1vh로 하는 단위

vmin : 1vw와 1vh 중 작은 쪽을 1vmin으로 하는 단위

vmax : 1vw와 1vh 중 큰 쪽을 1vmax로 하는 단위


개념을 알았으니 다음과 같이 0045.html 파일을 작성하고 이를 실행해보자. 

    

<!DOCTYPE html>

    

<html>

<head>

<title>반응형 길이</title>

</head>

<body>

<p style="font-size: 5vw;">

 5vw의 텍스트 크기

</p>

<p style="font-size: 5vh;">

 5vh의 텍스트 크기

</p>

<p style="font-size: 5vmin;">

 5vmin의 텍스트 크기

</p>

<p style="font-size: 5vmax;">

 5vmax의 텍스트 크기

</p>

</body>

</html>


실행한 브라우저 창인 뷰포트(viewport)에서 너비(width)를 키워 높이(height)보다 크게 만드니 (vw > vh) 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

      

5vw=5vmax

5vh=5vmin



실행한 뷰포트(viewport)에서 높이(height)를 키워 너비(width)가 보다 크게 만드니 (vw < vh) 이번에는 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

     

5vw=5vmin

5vh=5vmax




Anki 파일


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


Ankilog 파일:  0045 CSS 반응형 길이(responsive length) 단위.apkg




저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0047 CSS의 Font Weight, Style, Variant  (0) 2019.01.08
0046 font-size 설정하기  (0) 2019.01.07
0044 CSS의 길이(length) 중 상대 길이(relative length)  (0) 2019.01.03
0043 CSS의 길이(length) 중 절대 길이(absolute length)  (0) 2018.12.26
0042 텍스트의 크기 font-size 개요  (0) 2018.12.23

Anki 카드와 노트 다루기 01 노트와 노트 유형(Note Type)이 왜 필요한가?


Anki 매뉴얼을 읽다 보면 카드(Card), 노트(Note), 노트 유형(Note Type)이라는 단어들을 종종 마주치게 된다. 처음에는 왜 카드와 노트가 따로 있는지 엄청나게 헷갈렸지만 지금은 그 필요성에 공감하고 있다. 어떻게 보면 Anki의 핵심이 학습 관리 원칙이라면 Anki의 카드를 만들고 분류하고 사용하는 핵심은 노트와 카드에 있다고 할 수 있기 때문에 이번에는 카드와 노트에 대해서 이야기해보려고 한다.

       

카드는 간단하게 말하면 공부를 하는 우리가 매번 마주치는 그것이다. 우리가 카드 앞면의 질문을 보고 답을 생각해보고 [정답] 버튼을 눌러 답을 확인한 후 난이도를 평가하고 넘어가는 모든 일련의 과정은 카드에 대한 과정이다. 이 모든 과정은 개별 카드의 데이터로 켜켜이 쌓이고 묵혀서 학습 간격을 조절한다. 그럼 노트는 무엇일까?

      

노트는 카드를 찍어내기 위한 틀(template)에 집어 넣는 원재료이다. 그리고 노트 유형은 바로 이 노트를 재료로 카드를 만들어내는 틀(template)이다. 



Anki는 기본(Basic) 노트만 쓸 줄 알면 충분하다. 편에서 기본 노트를 다루어 봤는데 말 그대로 기본이다. 즉, 앞면에 질문을 작성하고 뒷면에 답을 작성한 후 추가하면 하나의 카드가 만들어지기 때문이다. 매우 직관적이고 우리가 일상적으로 해볼 수 있는 경험과 유사하다. 하지만 일상적인 물리적 한계에 크게 구속되지 않는 IT 기술의 장점을 생각해보면 좀 더 효율적인 무엇이 있을 것 같다.

     

가령, 이런 상황이다.

    

천자문의 첫 구절 天地玄黃을 개별 한자와 그 문장을 전부 외우고 익히려고 한다. 아마도 공부해야할 내용을 요약 정리하면 다음과 같을 것이다. 이것을 노트(Note)라고 부른다. 

    
天 : 하늘 천
地 : 땅 지
玄 : 검을 현
黃 : 누를 황
天地玄黃 : 하늘과 땅은 검고 누렇다.


제일 먼저 생각해봐야 할 것은 어떻게 카드를 만들 것인가 하는 점이다. Anki는 카드의 앞면을 보고 뒷면을 떠올린다는 기본적인 학습방식 있기 때문에 한 번에 하나의 질문을 던지는 구조로 되어 있다. 따라서 개별 질문들을 만들어 보고 거기에 참고할 것이 무엇인지 덧붙여 봐야 한다. 

     

우선, 개별 한자 별로 학습 한자와 한자의 뜻과 음이 카드 앞면에 나올 필요가 있다. 그리고 이것이 문장으로 어떻게 실현되는지 같이 참고해서볼 수 있으면 좋을 것 같다.

     

또, 天地玄黃이라는 문장을 한글로 해석하고 동시에 한글로 해석된 문장을 다시 天地玄黃이라는 문장으로 전환하고 싶다. 물론, 카드 뒷면에는 개별 한자에 대한 해석이 같이 있어서 문장의 개별 한자와 문장 전체의 해석을 항상 비교할 수 있다면 더 좋을 것 같다.

      

이런 요구사항들을 정리해서 카드를 만들면 다음과 같이 1개의 노트에 대하여 10개의 카드가 필요하다. 

     

카드1

(앞면) 다음 한자의 음과 뜻은?

天

     

(뒷면) 하늘 천 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드2

(앞면) 다음 한자의 음과 뜻은?

地

     

(뒷면) 땅 지 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드3

(앞면) 다음 한자의 음과 뜻은?

玄

    

(뒷면) 검을 현 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드4

(앞면) 다음 한자의 음과 뜻은?

黃

    

(뒷면) 누를 황 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드5

(앞면) 다음 한자어를 한글로 해석하시오.

天地玄黃

    

(뒷면) 하늘과 땅은 검고 누렇다.

天 : 하늘 천

地 : 땅 지

玄 : 검을 현

黃 : 누를 황


카드6

(앞면) 다음의 음과 뜻을 가진 한자를 쓰시오.

하늘 천

     

(뒷면) 天 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드7

(앞면) 다음의 음과 뜻을 가진 한자를 쓰시오.

땅 지

    

(뒷면) 地 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드8

(앞면) 다음의 음과 뜻을 가진 한자를 쓰시오.

검을 현

    

(뒷면) 玄 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드9

(앞면) 다음의 음과 뜻을 가진 한자를 쓰시오.

누를 황

    

(뒷면) 黃 (사용례 → 天地玄黃 : 하늘과 땅은 검고 누렇다.)


카드10

(앞면) 다음에 해당하는 문장을 한자로 작성하시오

하늘과 땅은 검고 누렇다.

    

(뒷면) 天地玄黃

天 : 하늘 천

地 : 땅 지

玄 : 검을 현

黃 : 누를 황


이렇게 일일이 카드를 만드는 것도 공부에 꽤나 도움이 된다. 하지만 정말 많은 카드를 만들어야 한다고 생각해보자. 천자문이니까 앞으로 250번을 똑같이 만들어야 한다고 생각하면 2500개의 카드를 일일이 만들어야 하는 상황이 온다. 공부하기 전에 노가다에 질릴 판이다. 


단순 작업을 피해 말고 한 번에 카드를 10장씩 생성할 방법이 없을까?

     

IT 기술답게 이런 문제를 해결하기 위한 방법이 준비되어 있다. 

      

그것이 노트를 노트 유형에 집어 넣어 일괄적으로 카드를 만드는 것이다.


다음엔 노트와 카드를 직접 만들어 보자.


to be continued....


저작자표시 비영리 변경금지

'Anki 하는 이야기' 카테고리의 다른 글

Anki 카드와 노트 다루기 03 카드 템플릿으로 카드 생성  (6) 2019.01.07
Anki 카드와 노트 다루기 02 새로운 노트 유형 생성과 필드 구축  (0) 2019.01.06
2019년 새해 Anki 정산(통계)  (0) 2019.01.01
Anki로 하는 공부는 얼마나 효율적일까?  (0) 2018.12.31
삶과 함께 무르익는 지혜를 얻기 원하면서....  (2) 2018.12.27

0044 CSS의 길이(length) 중 상대 길이(relative length)


앞에서 CSS의 절대 길이(absolute length)를 다루면서 웹페이지는 모니터 스크린에 구현되므로 절대 길이(absolute length) 중에서 픽셀(px)을 자주 사용한다는 점에 대해서 언급했다. 하지만 절대 길이(absolute length) 보다는 상대 길이(relative length)를 사용하는 경우가 훨씬 더 많다. 

       

상대 길이(relative length)란 것은 다른 기준이 되는 길이에 비례하여 결정되는 길이를 말한다. 여기에서 기준이 되는 길이를 어떤 것으로 잡느냐에 따라서 다양한 상대 길이(relative length)가 나온다. 

      

W3C의 튜토리얼에서 상대 길이(relative length)로 제시하는 단위들은 다음과 같다. 

     

em, ex, ch, rem, vw, vh, vmin, vmax, %


각각의 설명은 다음과 같다. 

     

em : 현재 요소의 텍스트 크기를 1em으로 하는 단위

ex : 현재 텍스트 크기에서 소문자 x의 높이를 1ex로 하는 단위

ch : 현재 텍스트 크기에서 숫자 "0"의 너비를 1ch로 하는 단위

rem : 루트 요소의 텍스트 크기를 1rem으로 하는 단위이다. 

vw : 화면(viewport) 너비(width)의 1%를 1vw로 하는 단위

vh : 화면(viewport) 높이(height)의 1%를 1vh로 하는 단위

vmin : 1vw와 1vh 중 작은 쪽을 1vmin으로 하는 단위

vmax : 1vw와 1vh 중 큰 쪽을 1vmax로 하는 단위

% : 부모 요소의 텍스트 크기에 비례하는 단위  (이 부분은 조금 잘못되었다.)


이 중에서 ex, ch, rem은 많이 사용하지 않는 단위들이고 vw, vh, vmin, vmax는 화면(viewport) 크기를 기준으로 상대적인 크기를 갖는 단위이므로 다음 기회에 살펴보고 가장 자주 사용하는 em과 %만 자세히 살펴보자. 

    

최근 CSS 관련 포스팅을 하지 못하고 있는 이유는 em과 %의 개념이 헷갈려 이것 저것 찾다가 결국 결론을 내리지 못했기 때문이다.

     

em과 %에 대한 W3C 튜토리얼의 정의는 다음과 같다.

     

em : 현재 요소의 텍스트 크기를 1em으로 하는 단위

% : 부모 요소의 텍스트 크기에 비례하는 단위


이 설명은 정확하지 않다. 위의 설명에 따르면 em과 % 모두 텍스트 크기를 기준으로 작동한다고 설명하고 있지만 실험해보면 em은 확실히 텍스트 크기를 기준으로 작동한다. 하지만 퍼센트(%)는 다양한 기준이 있다. 가령 다음과 같은 HTML을 작성해서 0044.html로 저장하고 실행해보자. (0044example.zip

     

<!DOCTYPE html>

    

<html>

<head>

<title>relative size</title>

</head>

<body style="font-size: 2em;">

<p style="font-size: 50%;">

첫 번째 p요소의 폰트 사이즈는 50%인 16px

</p>

<p style="font-size: 1em;">

두 번째 p 요소의 폰트 사이즈는 1em인 32px<br />

이미지는 높이 3em, 너비 100%<br />

<img src="sun.jpg" style="height: 3em; width: 100%;" alt="sun" />

</p>

</body>

</html>


모든 브라우저의 기본 텍스트 크기는 보통 16px로 설정되어 있다. 

       

따라서 <body> 요소에 적용되는 텍스트의 크기는 16px이고 이 상황에서 텍스트의 크기를 2em으로 설정되었을 때, 2em은 32px(2×16px)가 된다. 

     

<p> 요소는 <body> 요소의 상속을 받으므로 텍스트의 크기는 32px로 설정된다. 

     

font-size 속성(property)에는 em이나 % 모두 동일하게 작용한다. em의 수치에 100을 곱하면 %가 나오는 관계로 아주 심플하다. 그래서 첫 번째 <p> 요소의 font-size는 50% 이므로 이는 0.5em이고 16px가 된다. 그리고 두 번째 <p> 요소의 font-size는 1em 이므로 이는 100%이고 32px가 된다. W3C에서 제시한 설명은 %는 부모 요소의 텍스트 크기를 기준으로 하고 em은 현재 요소의 텍스트 크기를 기준으로 한다고 설명되어 있지만 실제 font-size에 적용해보면 부모 요소를 기준으로 하거나 현재 요소를 기준으로 하는 경우에도 차이가 없다.

     

하지만 우리가 지금 이야기하고 있는 것은 텍스트의 크기 뿐만 아니라 상대 길이(relative length)에 대하여 이야기하고 있는 것이므로 이 상대 길이를 다른 것에 적용할 때 어떻게 달라지는지 살펴볼 필요가 있다. 

    

0044.html에는 <p> 요소 내부에 <img /> 요소를 중첩시켜 놓았다. 

그리고 그 <img /> 요소의 크기(size)는 style="height: 3em; width: 100%;" 으로 높이가 3em이고 너비가 100%로 규정해놓았다. W3C에서 제시한 바에 따르면 이런 경우 너비는 <p> 요소의 텍스트 크기인 32px가 되어야 할 것이다.

       

이제 0044.html을 실행해보자. 



가장 위의 첫 번째 <p> 요소는 텍스트 크기가 16px로 설정되어 있고, 그 아래의 두 번째 <p> 요소는 32px로 나타난다. 텍스트 크기를 결정하는 font-size 속성(property)에서는 em과 %는 완전히 동일하게 작동한다. 

     

하지만 이미지의 크기에서는 전혀 다르다. 위의 결과에서 이미지의 높이는 3em으로 설정되어 있다. 해당 이미지의 여백까지 생각하면 얼추 96px(3×32px)로 제대로 작동하고 있는 것 같다. 하지만 너비(width)는 100%이므로 32px가 되어야 하는데 가로폭을 완전히 차지하는 모양으로 나타난다.

     

이는 브라우저 창의 가로폭을 이리저리 변화시켜 보아도 이미지는 항상 가로폭 전체에 걸쳐 나타나도록 변형되는 것을 다음과 같이 확인할 수 있다.



이는 결국, <img /> 요소의 너비로 부과된 100%가 브라우저 창의 가로폭 전체를 의미한다는 것을 알 수 있다. 즉, W3C에서 설명한 것과는 다르게 부모 요소의 텍스트 크기를 반영하는 것이 아니라 너비처럼 해당 CSS 속성(property)에 설정된 별도의 기준이 작동하는 것을 알 수 있다. 

      

반대로, em은 <img /> 요소의 크기를 결정하는 상대 길이(relative length)를 결정할 때에도 font-size를 기준으로 해당 크기를 적용하고 있다. 

     

이외에도 이리저리 실험을 계속해본 결과 다음과 같은 사실을 알게 되었다. 

      

em은 기존의 설명대로 현재 요소의 텍스트 크기를 1em으로 하는 단위라고 하면 된다. 하지만 %는 부모 요소의 텍스트 크기가 아닌 그냥 %가 쓰이는 해당 속성(property) 크기에 비례하는 단위로 수정하면 타당하다.

      

em은 해당 요소의 font-size를 1em으로 하는 값이고 이 값은 다른 CSS 속성에도 그대로 적용할 수 있다. 즉, 다른 CSS 속성의 길이(length)가 해당 요소의 텍스트 크기에 따라서 상대적인 길이로 조정되는 것이다. 

하지만 %는 각각의 CSS 속성 별로 정해진 별도의 길이를 기준으로 작동한다. font-size 속성에서는 %의 기준이 부모 요소의 font-size 속성값을 기준으로 비례하지만 해당 %를 width로 가져가면 이는 부모 요소의 width 속성값을 기준으로 비례하지 해당 요소의 font-size 속성을 기준으로 비례하지 않는다. 또, %는 어떤 경우에는 작동하지 않는 것 처럼 보이기도 한다. 

     

가령, CSS에서 border 속성에 경계선의 두께를 %로 주면 경계선이 나타나지 않는다. 즉, 다음과 같은 경우다.(참조 0044_1.html)

     

<p style="border: 100% solid red;">첫 번째 p 요소</p>

<p style="border: 1em solid red;">두 번째 p 요소</p>


실행해보면 다음과 같이 두 번째 <p> 요소에만 경계선이 1em 두께로 나타나는데 결론적으로 말하면 부모 요소인 <body> 요소에 경계선이 없어 두께가 0px이므로 이를 기준으로 하는 % 길이도 같이 0px가 되어 경계선이 나타나지 않는 것이다.



이리저리 실험해보고 내리고 생각해본 결과 em과 %의 차이를 나름 정리해보았다. 결국, W3C에서 em을 기준으로 작성하라고 권고하는 이유도 em이 텍스트의 크기를 기준으로 다른 CSS 속성(property)의 길이를 모두 규정할 수 있어 일관되면서도 광범위하게 사용할 수 있기 때문이 아닌가 싶다. 

    

이 내용들은 명쾌하고 믿을만한 자료를 찾지 못해서 임의로 이것저것 실험해보고 스스로 개인적인 확신으로 결론을 내렸으니 주의하시기 바랍니다.


Anki 파일


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


Ankilog 파일:  0044 CSS의 길이(length) 중 상대 길이(relative length).apkg


2019/01/03 pm 2:40 Ankilog 문구 일부 수정




저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0046 font-size 설정하기  (0) 2019.01.07
0045 CSS 반응형 길이(responsive length) 단위  (0) 2019.01.04
0043 CSS의 길이(length) 중 절대 길이(absolute length)  (0) 2018.12.26
0042 텍스트의 크기 font-size 개요  (0) 2018.12.23
0041 CSS로 텍스트의 폰트 설정하기(font-family 속성)  (0) 2018.12.19

0042 텍스트의 크기 font-size 개요


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

    

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

    

body { font-size: 텍스트의 크기; }


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

      

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

     

절대 크기(absolute size)

 - 텍스트를 특정 사이즈로 고정한다. 

 - 사용자가 어떤 브라우저에서도 임의로 텍스트 크기를 변경할 수 없다.

 - 모니터 화면에서 사용하기에 적합하지는 않지만 프린트 등 물리적으로 구현될 경우에는 유용하다. 

     

상대 크기(relative size)

 - 상대적인 비율로 크기를 설정한다.

 - 사용자가 브라우저에서 텍스트의 사이즈를 변경할 수 있다.


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

    

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

    


Anki 파일


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


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


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






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0044 CSS의 길이(length) 중 상대 길이(relative length)  (0) 2019.01.03
0043 CSS의 길이(length) 중 절대 길이(absolute length)  (0) 2018.12.26
0041 CSS로 텍스트의 폰트 설정하기(font-family 속성)  (0) 2018.12.19
0040 글꼴, 서체, 폰트 개요  (0) 2018.12.18
0039 클래스(class) 속성 사용해보기  (0) 2018.12.15

처음 Anki를 기본(Basic) 노트로 질의/응답 형식으로만 만들었을 때는 카드를 만드는게 조금 골치아픈 문제였다. 질의/응답 형식의 카드 만들기는 완성형에 비해서 상대적으로 조금 어렵다. 어떤 문제를 만들까? 어떤 사항이 핵심일까? 고민하고 그것을 일일이 타이핑하고 사진을 붙이고 작업을 해야 한다. 실은 이미 해당 내용에 대한 공부가 되고 나서야 질의/응답 형식의 카드를 만들 수 있는 것이다. 

      

물론, 카드를 만들다보면 자연스럽게 공부가 된다. 해당 주제에 대하여 고민하고 이를 다각적으로 고찰하는 과정이 자연스럽게 이루어지기 때문에 카드를 다 만들고 나면 이미 상당히 깊은 수준까지 해당 지식을 체득하게 되고 그 뒤의 카드는 그저 기억을 환기하는 정도다. 따라서 카드를 만드는 과정도 학습에 중요한 기여를 한다. 

    

하지만 이런 경우도 생각해볼 필요가 있다. 과거에 이미 공부한 내용이다. 새롭게 이해하고 고찰하는 과정은 그닥 필요하지 않다. 하지만 너무 많은 공부량이기 때문에 그것을 다시 정리하고 보고 싶지는 않다. 그저 기억을 환기할 수 있고 숙련될 수 있도록 누군가 만든 자료가 있었으면 좋겠다. 가령, 초중고의 수학 같은 것들이다. 이것을 하나하나 정리해서 다시 보기는 그 양이 너무 많아 엄두가 나지 않는다. 하지만 최근 트렌드는 수학을 자주 사용해야 해서 기억을 환기시키고 싶다. 누군가 잘 정리해 놓은 것이 없을까? 

     

과거에 공부한 그러나 지금은 기억이 희미한 내용들을 다시 공부하고 싶을 때 타인이 해 놓은 것을 업어올 방법이 없을까? 몇 가지 아이디어가 떠올랐다. 처음 생각한 것은 문제집이었다. 평생 문제집이라는 말을 부담스럽게 생각했는데, 막상 스스로 공부할 생각을 하니 문제집이라고 하는 것이 모든 분야에 있는 것이 아니다. 스스로 간단한 질의/응답 문제를 만들어 보니 알 것 같다. 이것도 골머리 아픈데, 난이도 별로 복잡한 온갖 요소들을 고려해서 섬세하게 답까지 유도하는 문제와 답을 만든다는 것은 상당한 정신적 노동이다. 문제집이라는 것이 학습에 있어서 굉장히 중요한 인프라인 것이다. 하지만 문제집 파일이 웹에 돌아다니는 경우를 찾지 못했다. 유료 이북이거나 학원 강의 같은 것을 들어야만 제공해주는 경우가 많았다. 그 흔한 PDF도 찾지 못했다. 관련 속내를 살펴보니 문제들 하나하나가 출판사에서 상당히 중요한 자산 취급을 받는 것 같았다. 해외의 문제집은 조금 돌아다니는데 워드 파일보다는 주로 웹에서 학습을 하는 형태들이 많았다. 

      

서점에서 문제집을 사서 해당 내용을 Anki로 옮기는 것도 생각해보았지만 내가 원하는 것은 학습한 개념에 대한 기억을 환기하고 간단히 적용해보는 정도의 기본적인 수준이다. 하지만 문제집의 문제들은 문제를 어렵게 꼬아서 학생들의 수준을 변별하려는 의도를 가진 그런 문제들 위주다. 오히려 기본적인 질문은 상대적으로 적다. 또는, 자리에 앉아서 연습장을 펼쳐놓고 풀어야 하는 그런 문제들이다. 이런 문제들은 그 자체로 학습에 도움을 주기는 하겠지만 개인적으로 Anki를 사용하고자 하는 방식과는 조금 거리가 있다. 나는 Anki를 주로 모바일로 운동 중이거나, 이동 중이거나 대기 중일 때 짜투리 시간을 활용해서 공부하는 용도로 사용하려고 하는 것이기 때문이다. 

       

국내의 문제집을 이용하는 것은 개인적인 Anki 사용 방식과도 대치되고 또, 이를 멋모르고 공유했을 때 발생할 수 있는 저작권 문제도 있기 때문에 포기했다. 그 다음으로 살펴본 것이 AnkiWeb의 공유카드(Shared Deck)들이었다. AnkiWeb의 공유카드는 이 페이지를 방문하면 된다. 다음과 같은 화면이 나타난다. 딱히 로그인을 하지 않아도 들어가서 해당 카드들을 다운받을 수 있다. 



위의 사진은 Anki가 어떤 용도로 사용되는지 잘 보여준다. 단순히, Anki 공유카드의 모든 카테고리를 보여주는 것이 아니라 실제 선호되는 카드들 위주로 나열되어 있는 것 같다. 1차적으로는 대부분 언어이고 2차적으로는 압도적인 암기량을 자량하는 의학계열의 공유카드들이 대부분이다. 이는 노골적으로 암기하는 과정이 필요한 분야들이 암기와 의학계열이기 때문인 것으로 보인다. 실제로 어떤 내용이 있나 둘러보면 영어(English)와 Anatomy(해부학) 정도가 정말 해당 카드를 쓸만한 정도의 품질을 보여준다. 이미 의대생에게 Anki는 없어서는 안되는 필수적인 앱으로 자리잡은 것 같다. YouTube에서 Anki를 설명하고 있는 많은 동영상들이 같은 다른 의대 출신의 대학생들에게 Anki를 권유하는 내용인 것은 이래서 그렇다. 실제로 해부학의 Anatomy 카드들은 엄청난 용량으로 엄청난 고품질이다. 

       

해부학을 공부할 필요를 못 느끼니 그것은 논외로 하고 평소에 관심 가는 분야에서 흥미로운 카드들을 검색하여 공부해보려고 했지만 실패했다. 타인이 만들어 놓은 카드를 사용한다는 것이 녹록치 않았다. 일단, 카드를 특정하기 어렵다. 1만개의 단어가 수록된 English 단어 암기용 카드뭉치를 다운 받아 사용해보니 태반이 아는 단어이고 몇 가지 단어는 제대로 작성한 것인지 의심스러웠다. 그 뒤에 어떤 단어가 왜 나오는지도 알 수 없고 그저 파편화된 상태로 단어를 암기하다 보니 어느 순간부터 내가 왜 이런 것을 공들여 암기하고 있는 것인지 알 수 없는 상황에 이르렀다. 또, 어떤 카드들은 자신만의 맥락이 있어서 처음 카드를 접하는 사람들은 맥락을 이해할 수 없게 카드가 만들어진 경우도 있다. 어떤 것은 너무 부실하고 어떤 것은 뜬금없는 카드들만 모여있는 경우도 있었다.


타인의 카드를 쓰는 것이 왜 이리 어려운 것일까? 일단은 근본적으로 맥락의 부재 때문이었다. 

      

카드를 이용한 암기는 카드의 양면에 지식을 매우 축약한 것이다. 맥락을 아는 사람은 속으로 “맞아 이것만 외우면 돼!”라고 말하지만 실은 수많은 맥락이 그 카드에 축약된 것이다. 가령 주기율표를 외우는 방식 중에 두음을 이용하여 암기하는 방식이 있다. 각 원소의 첫 글자를 따서 연달아 외우는 것인데 "에헤리베...." 라는 식으로 주욱 이어진다. 작성자 본인이야 다음과 같이 카드를 만들어 공부하면 된다. 

       

질문 : 에[ ]리베 의 빈칸에 들어갈 원소는?

답 : 헤


작성자는 본인이 왜 이런 카드를 만들었는지 알기 때문에 아무런 불만이 없다. 하지만 다른 사용자는 이런 의도와 맥락을 알 수 없으니 당황스럽기 그지없다. 이 카드를 열심히 추론하여 깊은 고민 끝에 두음이라는 것을 발견하고 이를 활용하는 사람이 얼마나 있을까?

     

이것 외에도 수많은 맥락이 있다. 스스로 공부를 할 때는 사람들은 다양한 이유로 암기를 한다. 어떤 사람은 공부하다가 자신이 모르는 사실을 발견할 때만 암기하고, 어떤 이는 헷갈리는 부분만 암기한다. 어떤 이는 너무 많은 카드를 만들고 어떤 이는 너무 적은 카드를 만든다. 하지만 그 모든 낱장의 카드들은 각자의 필요에 각자의 관점에서만 만들어질 수밖에 없고 그런 카드 제작자의 맥락을 모르는 다른 사용자들은 이러한 카드들이 너무 많거나 너무 적거나 너무 지엽적이라고 느끼게 될 것이다.

      

이렇게 주욱 살펴보니 해부학과 같이 교과서를 Anki가 대체하고 있는 경우가 아니라면 거의 쓰기 어려웠다. 혹은, 딱 자신이 원하는 취향의 카드뭉치를 찾기 어려웠다. 결국, 카드 업어오기는 포기하게 되었고, 완성형 스타일로 카드를 만들게 되면서 공부할 내용이 너무 많아져 다른 카드를 업어올 생각은 사라지게 되었다.

     

그럼에도 한쪽으로는 카드를 공유하기 위해서는 어떻게 해야할까? 하는 생각이 맴돌았고 그에 대한 고민이 후에 Ankilog로 이어졌다.

저작자표시 비영리 변경금지

'Anki 하는 이야기' 카테고리의 다른 글

Anki로 하는 공부는 얼마나 효율적일까?  (0) 2018.12.31
삶과 함께 무르익는 지혜를 얻기 원하면서....  (2) 2018.12.27
완성형 카드를 빈칸 만들기(Cloze Deletion)로 만들어 보자.  (0) 2018.12.19
Anki 완성형으로 카드 만들기  (0) 2018.12.18
Anki는 기본(Basic) 노트만 쓸 줄 알면 충분하다.  (3) 2018.12.16

0041 CSS로 텍스트의 폰트 설정하기(font-family 속성)


CSS는 font-family 속성(property)으로 텍스트의 font를 설정한다.

     

다음은 <p> 요소에 적용될 폰트를 설정한 CSS 규칙이다. 

     

p {

 font-family: Verdana, Arial, sans-serif;

}


font-family 속성에는 여러 개의 폰트를 지정할 수 있다. 각각의 폰트는 대소문자를 정확하게 맞춰서 작성되어야 하며 쉼표(,)로 구분한다. 그리고 마지막에는 항상 'sans-serif', 'cursive', 'monospace', 'serif', 'fantasy'의 일반 그룹(generic family) 이름을 넣는다(권장사항).

      

font-family 속성에 주어진 폰트들은 순차적으로 적용(fallback)된다. 즉, 브라우저에 font-family 속성으로 정의한 첫 번째 폰트가 없을 경우 그 다음 폰트를 시도하고, 그것도 없으면 다시 그 다음 글꼴을 시도하는 식으로 계속 이어진다.

     

위의 예문이라면 Verdana를 적용할 수 있는지 따져보고 적용할 수 없을 때  그 다음의 Arial로 넘어간다. Arial도 없으면 마지막으로는 브라우저에 설정된 sans-serif의 기본 폰트를 사용한다. 사용할 수 있는 폰트의 개수가 정해져 있는 것은 아니므로 위의 사례처럼 꼭 3개의 폰트를 나열할 필요는 없다.

     

폰트의 이름에 공백이 포함되어 있을 때는 큰 따옴표(“”)로 감싸주어야 한다. (예: "Times New Roman")


그렇다면 왜 font-family 속성에는 여러 개의 폰트를 쓰는 것일까?

     

OS나 브라우저에 따라서 지원하는 폰트가 다르기 때문이다. 어떤 폰트는 지원되고 어떤 폰트는 지원되지 않으므로 원하는 폰트들이 없을 때를 위하여 원하는 폰트를 차례로 배치하는 것이다. 전부 없다면 그나마 원하는 폰트와 비슷한 것을 쓸 수 있도록 일반 그룹(generic family) 계열의 이름을 마지막에 두는 것이다.

      

따라서 폰트를 설정할 때는 일단 원하는 폰트로 시작하고 마지막은 원하는 것과 유사한 일반 그룹(generic family)로 배치하는 것을 권장한다. 그러면 브라우저가 우리가 원하는 폰트들을 사용할 수 없을 경우 약간이나마 유사한 일반 그룹의 기본 지정된 폰트를 사용하기 때문이다. 


Anki 파일


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


Ankilog 파일:  0041 CSS로 텍스트의 폰트 설정하기.apkg




저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0043 CSS의 길이(length) 중 절대 길이(absolute length)  (0) 2018.12.26
0042 텍스트의 크기 font-size 개요  (0) 2018.12.23
0040 글꼴, 서체, 폰트 개요  (0) 2018.12.18
0039 클래스(class) 속성 사용해보기  (0) 2018.12.15
0038 클래스(class) 속성  (0) 2018.12.14

Anki의 기본(Basic) 노트는 앞면에 질문이 있고, 뒷면에 답이 있는 간단한 질의/응답 형식이다. 당연히 다음과 같이 질문과 답을 만들어야 한다. 

         

질문 : 미국의 수도는?
답 : 워싱턴
      
질문 : 탄소의 화학기호는?
답 : C


보면 알겠지만 질의/응답 형식은누구나 쉽게 만들 수 있는 간단한 방식이다. 

          

그런데 이 질의/응답 형식을 사용하다 보니 몇 가지 문제점을 깨닫게 되었다.

       

다음은 font에서 세리프(serif) 그룹을 설명한 내용의 일부이다. 

       

세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다. 이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다. 세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.


여기에서 몇 개의 질문과 답을 생각해볼 수 있을까? 가능한 만큼 만들어보자.

         

질문 : 가는 장식 선을 지칭하는 용어는?

답 : 세리프(serif)

     

질문 : 세리프(serif)라는 용어가 원래 지칭하는 뜻은?

답 : 가는 장식 선

     

질문 : 세리프(serif)는 어떤 font들의 그룹인가?

답 : 문자 끝부분에 장식용 가시와 고리 모양이 있는 font

     

질문 : 문자 끝부분에 장식용 가시와 고리 모양이 있는 font들의 일반 그룹을 지칭하는 용어는?

답 : 세리프(serif)

    

질문 : 폰트들의 일반 그룹 중에서 고상하고 고전적인 느낌을 주기에 적합한 폰트들의 일반 그룹은?

답 : 세리프(serif)

     

질문 : 세리프(serif)는 어떤 느낌을 주는가?

답 : 고상하고 고전적인 느낌

    

질문 : 세리프(serif)가 고상하고 고전적인 느낌을 주는 이유는?

답 : 문자 끝부분에 장식용 가시와 고리 모양이 있어서

     

질문 : 세리프(serif)가 문자 끝부분에 장식용 가시와 고리 모양이 있어서 어떤 느낌을 주는가?

답 : 고상하고 고전적인 느낌


저 짧은 3개의 문장만으로 8개의 질의/응답 카드가 만들어진다. 저 짧은 3개의 문장을 공부하기 위해서 8가지의 문항을 생각해야 하는 부담과 그 문항을 일일이 작성해야 하는 부담이 발생한다. 물론, 이런 부담은 나중에 조금씩 여러 가지 요령이 생기면서 어느 정도 편해지기는 한다. 그런데 문제는 맥락이다. 

          

위의 3개의 문장은 하나로 어우러져서 일정한 지식체계를 구축하고 있는데, 질문과 답 형식으로 되어있는 간단한 카드는 그렇게 어우러져서 만들어지는 통합적인 지혜나 지식을 보장해주지 못한다. 그러다 보니 암기를 진행하다 보면 가끔 어떤 문항들은 너무나 생뚱맞게 느껴지기도 하고 맥락 없이 무의미하게 느껴질 때가 있다. 그렇다고 모든 맥락을 보충하기 위해서 카드를 만들다 보면 지나치게 카드가 많아지고 질문도 번잡해지게 된다.

        

이 때, 사용할 수 있는 방식이 바로 전체 문장을 통으로 암기하는 것이다. 8개의 카드를 볼 필요 없이 전체 문장을 통으로 외우면 지식의 손실도 없고 오히려 축약하여 농축된 지식을 학습할 수 있기 때문이다. 

       

다시 위의 문장을 살펴보면 전체 문장은 3개의 문장으로 나누어진다. 그러면 다음과 같이 3개의 카드를 만들어 볼 수 있다. 

      

질문 : 다음 빈칸을 채우시오.

[                                          ]. 

이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다. 

세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

    

답 : 세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다


질문 : 다음 빈칸을 채우시오.

세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다. 

[                                                      ]. 

세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

     

답 : 이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다


질문 : 다음 빈칸을 채우시오.

세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다. 

이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다.

[                                       ].

      

답 : 세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.


이런 식의 문제를 전통적으로 “완성형” 문제라고 한다. 즉, 빈 칸을 완성할 수 있는지 물어보는 형태의 질문 형식이다. 원래는 특정 맥락에 들어갈 단어를 맞추는 것을 요구하는 방식이지만 나의 경우는 아예 문장을 외우기 위하여 문장을 빈칸으로 묶어버렸다. 따라서 원하는 사람은 주요한 단어만을 빈칸으로 만드는 완성형 문제를 만들 수 있다. 

    

질문 : 다음 빈칸을 채우시오.

[          ]는 ‘가는 장식 선’을 지칭하는 말이다. 

이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다

세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

     

답 : 세리프(serif)


질문 : 다음 빈칸을 채우시오.

세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다. 

이것이 font로 오면서 문자 끝부분에 [                  ]  모양이 있는 font를 통칭하는 용어로 사용된 것이다

세리프 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

     

답 : 장식용 가시와 고리


질문 : 다음 빈칸을 채우시오.

세리프(serif)는 ‘가는 장식 선’을 지칭하는 말이다. 

이것이 font로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 font를 통칭하는 용어로 사용된 것이다

세리프 폰트는 [                      ]을 주기에 적합하다.

     

답 : 고상하고 고전적인 느낌


주요 단어를 빈칸으로 만드는 방식으로는 수많은 카드를 수월하게 만들 수 있다. 위의 경우에도 더 나열하지는 않았지만 단어의 수만큼 빈칸을 만들어 카드를 만들 수 있을 것이다. 나도 처음에 빈칸을 만들어 카드를 만들 때에는 정말 많은 카드를 만들곤 했다. 위와 같은 3개의 문장이라면 거의 15개 정도의 카드를 만들어서 반복에 반복을 했었다. 하지만 카드가 너무 많아지는 문제가 있고, 문제가 너무 쉬어서 문장을 읽지도 않고 답을 떠올린 후 넘어가는 경우가 많아 학습을 한다기 보다는 순발력 게임을 하는 느낌을 받고 문장 단위로 완성형 카드를 만들게 되었다. 

     

여튼 문장 단위로 완성형 카드를 만들게 되면 지식은 유기적으로 결합되어 농축되고 카드의 수는 줄일 수 있게 되어 상당히 효율적이 된다. 게다가 머리 아프게 문제를 만들기 위하여 끙끙댈 이유가 없게 된다. 그저 심금을 울리거나 새로운 통찰을 제공하는 글을 만나면 해당 문장을 통으로 Anki에 옮겨 빈칸을 만들고 완성형으로 카드를 만들어 문장을 통째로 외우면 되기 때문이다. 이 완성형 카드 만들기를 깨닫고 카드 만들기가 너무 쉬어지자 개인적인 공부에 효율이 더 붙기 시작했다.

        

물론, 이 완성형 카드를 이용한 학습에 대해서는 할 말이 많다. 오랜 기간 하다 보니 몇 가지 장단점을 체감할 수 있었고 여러가지 깨닫는 바도 많게 되었지만 조금 다른 주제와 연계되어 있으므로 이에 대해서는 다음에 이야기하도록 하자.


저작자표시 비영리 변경금지

'Anki 하는 이야기' 카테고리의 다른 글

Anki 카드 업어오기 혹은 공유하기  (0) 2018.12.22
완성형 카드를 빈칸 만들기(Cloze Deletion)로 만들어 보자.  (0) 2018.12.19
Anki는 기본(Basic) 노트만 쓸 줄 알면 충분하다.  (3) 2018.12.16
Anki 다운로드하기  (0) 2018.12.15
처음 암기(Anki)한 이야기  (0) 2018.12.09

+ Recent posts

티스토리툴바