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

Anki 카드와 노트 다루기 03 카드 템플릿으로 카드 생성


앞의 포스팅에서 노트를 입력할 틀과 필드를 모두 만들었다. 이제는 이 노트를 카드로 만들어야 한다. 노트추가창 왼쪽 상단의 [카드] 버튼을 클릭해서 카드 템플릿을 열도록 하자. 



처음 열린 카드 템플릿은 다음과 같다.



상단에는 “카드 1”이라고 되어 있는 탭이 하나 있다. 이는 이 노트에서는 현재 1개의 카드만 만들어지고 있다는 의미다. 우리는 10개의 카드를 만들어야 하므로 이 탭을 “카드 10”까지 늘려갈 것이다. 

      

카드 템플릿의 왼쪽에는 3개의 박스가 있는데 위에서부터 차례대로 앞면 서식, 스타일, 뒷면 서식이다. 이 중에서 스타일 박스에는 CSS를 이용하여 카드를 마음껏 예쁘게 꾸밀 수 있다. 이에 대한 상세한 내용은 다음 링크의 매뉴얼을 참조하기 바란다. 


31_(카드와_템플릿)_카드_꾸미기

32_(카드와_템플릿)_필드_꾸미기


앞면 서식 박스에는 두개의 중괄호에 둘러싸인 {{한자문장}}이 보인다. 그리고 우리가 한자문장 필드에 입력했던 “天地玄黃”이 왼쪽의 앞면 미리보기 박스에 나타나 있다. 앞서 필드는 정보 조각을 담기 위한 용기(container) 같은 것으로 프로그래밍으로 치자면 변수(variable) 같은 것이라고 한 바 있는데 바로 이것이다. 즉, 필드 이름을 두 개의 중괄호({{ }})로 둘러싸서 카드의 앞면 서식이나 뒷면 서식에 배치하면 실제 카드에는 이 필드명이 나타나는 것이 아니라 이 필드에 입력된 내용이 나타난다. 

    

왼쪽 최하단 박스의 뒷면 서식에도 {{한글문장}} 필드가 보인다. 그리고 우리가 한글문장 필드에 입력한 텍스트인 “하늘과 땅은 검고 누렇다.”가 뒷면 미리보기 하단부에 나타나는 것을 확인할 수 있다. 

     

우리가 만들지 않은 필드명이 보인다. {{FrontSide}} 필드인데 이 필드는 카드 앞면에 나타난 모든 내용을 그대로 반영하는 필드다. 이 필드는 Anki 내부에 내장되어 항상 사용할 수 있도록 만들어진 내장 필드다. 따라서 우리가 이 필드를 직접 만들지 않아도 항상 사용할 수 있다. 

    

앞서 ‘앞면’과 ‘뒷면’이라는 필드명이 좋은 명칭이 아니라고 한 이유는 이 {{FrontSide}} 필드 때문이다. 이 필드명을 번역하면 ‘앞면’이다. Anki는 카드를 다양하게 변형하여 효과적인 학습을 가능하게 하지만 기본적으로 카드의 앞면과 뒷면이라는 구조를 고수하고 있다. 따라서 필드명을 ‘앞면’과 ‘뒷면'으로 번역하면 처음 Anki를 쓰는 사람은 카드 템플릿을 열었을 때, 앞면 서식과 앞면 필드가 어떻게 다른지 혼동할 수밖에 없고 그에 더하여 {{FrontSide}} 필드가 왜  ‘앞면’ 필드가 아닌지 헷갈리게 된다. Anki의 영어 버전에서는 ‘앞면’이 ‘front’이고 ‘뒷면’이 ‘back’이다. 즉, 원래는 ‘앞’, ‘뒤’로 번역하는 것이 더 적절해 보인다.

   

이것저것 알아보았으니 카드를 만들면서 감을 잡아보자. 

         

카드1

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

天


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


앞면과 뒷면 서식 부분은 일종의 브라우저로 HTML을 작성할 수 있다. 우리가 원하는 문장을 <p> 요소로 묶어서 표시하면 원하는 텍스트를 마음껏 집어넣을 수 있다. (실은 <p> 요소로 안 묶고 그냥 써도 되지만 HTML을 써보자.) 다음과 같이 만들면 첫 번째 카드가 완성된다. 뒷면 서식의 <br />은 줄바꿈을 해주는 빈요소이다. 



두 번째 카드를 만들려면 카드 템플릿 상단 오른쪽에 있는 [+] 버튼을 눌러야 한다. 그러면 “카드 2” 탭이 열리면서 두 번째 카드를 만들 수 있게 된다.



새로 열린 두 번째 카드는 “카드 1”의 내용을 거의 그대로 가져오므로 적절히 수정해주면 된다.




카드2

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

地


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


카드2는 다음처럼 한자1 필드를 한자2 필드로 해석1 필드를 해석2 필드로 바꾸기만 하면 된다.




카드3

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

玄


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


카드3은 다음처럼 한자2 필드를 한자3 필드로 해석2 필드를 해석3 필드로 바꾸기만 하면 된다.




카드4

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

黃


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


카드4는 다음처럼 한자3 필드를 한자4 필드로 해석3 필드를 해석4 필드로 바꾸기만 하면 된다.




카드5

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

天地玄黃


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

天 : 하늘 천

地 : 땅 지

玄 : 검을 현

黃 : 누를 황


이번에는 조금 카드를 변형해야 한다. 다음과 같이 변형한다.




카드6

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

하늘 천


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


카드6 부터는 조금 다른 형식이다. 다음과 같이 수정한다.




카드7

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

땅 지


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


카드7은 다음처럼 해석1 필드를 해석2 필드로, 한자1 필드를 한자2 필드로 바꾸기만 하면 된다.




카드8

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

검을 현


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


카드8은 다음처럼 해석2 필드를 해석3 필드로, 한자2 필드를 한자3 필드로 바꾸기만 하면 된다.




카드9

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

누를 황


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


카드9는 다음처럼 해석3 필드를 해석4 필드로, 한자3 필드를 한자4 필드로 바꾸기만 하면 된다.




카드10

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

하늘과 땅은 검고 누렇다.


(뒷면) 天地玄黃

天 : 하늘 천

地 : 땅 지

玄 : 검을 현

黃 : 누를 황


카드10은 다시 카드5에서와 마찬가지로 카드를 다음과 같이 변형한다. 



이제 10개의 카드를 만드는 카드 템플릿을 전부 완성했으므로 카드 템플릿 오른쪽 하단의 [닫기] 버튼을 클릭하여 원래의 노트 추가창으로 돌아오자. 그리고 노트추가창 하단의 [추가] 버튼을 클릭해서 카드를 만들어 보자.



카드가 추가되고 다시 데이터가 모두 비어 버린 노트가 나타나 새로운 데이터 입력을 기다린다. 

    

[닫기]를 클릭하여 노트추가창을 닫으면 기본 카드뭉치에 새 카드가 10개 있는 것을 확인할 수 있다. 즉, 한번의 데이터 입력으로 10개의 카드가 생긴 것이다.



카드가 추가되었으니 이제10개의 카드를 천천히 공부하면 된다. 

    

지금까지 진행해온 모든 과정을 요약하면 이렇다. 

     

우선, 공부할 내용을 정리하고 어떻게 카드로 만들지 생각했다. 


그 다음에는 새로운 노트 유형을 생성하여 요구되는 학습 내용에 따라 정보의 조각을 나누어 필드를 만들었다. 


그리고 마지막으로 해당 필드를 카드 템플릿을 이용하여 카드를 만들었다. 


이제 많은 단순 작업 없이 필요한 데이터만 넣으면 마법처럼 수많은 카드가 나오게 하는 법을 알게 되었다. 기본적으로 카드 템플릿은 HTML/CSS를 적극 활용하고 거기에 Latex까지 사용하여 전문적인 조판을 할 수 있지만 그런 것 몰라도 문제없이 잘 쓸 수 있다. 물론, 더 예쁘고 재미있는 카드를 만들고 싶다면 조금 더 공부가 필요할 것이다. 

저작자표시 비영리 변경금지 (새창열림)

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

Anki의 반복적인 사용으로 인한 변화  (2) 2019.04.07
무엇을 공부할까?  (0) 2019.01.12
Anki 카드와 노트 다루기 02 새로운 노트 유형 생성과 필드 구축  (0) 2019.01.06
Anki 카드와 노트 다루기 01 노트와 노트 유형이 왜 필요한가?  (0) 2019.01.03
2019년 새해 Anki 정산(통계)  (0) 2019.01.01

+ Recent posts

티스토리툴바