0033 HTMLCSS 적용하고 기본 문법 알아보기


CSSHTML 문서에 적용하는 방법은 다음의 3가지 방식이다. 

  

Inline - 개별 요소에 style 속성으로 적용

Internal - <head>의 영역에 있는 <style> 요소에 스타일 시트 설정

External - 외부의 CSS 파일을 링크로 연결하여 적용


인라인(inline) 방식HTMLstyle 속성에서 다루었기 때문에 0025 HTML style 속성(attribute) 및 배경색 설정을 참조하자. 

    

CSSHTML 문서에 적용할 때 가장 자주 사용하는 방법은 외부에 CSS 파일을 만들어서 이를 HTML 문서에 링크하는 External 방식이다. 하지만 External 방식은 나중세 살펴보고 이번에는 우리는 주로 보기 쉽고 이해하기 편한 Internal 방식으로 기본적인 CSS 문법을 익혀보자. 

    

Internal CSS를 사용하는 경우는 하나의 HTML 페이지를 꾸미는 경우다. 이는 하나의 요소만을 대상으로 꾸미는 Inline CSS와 대조된다. 

     

Internal CSS를 사용하기 위해서는 <head> 섹션에 <style> 요소를 중첩시킨다. 

    

다음과 같이 0033.html 파일을 만들어 실행해 보자. 

    

<!DOCTYPE html>

    

<html>

<head>

 <title>간단한 CSS 적용 사례</title>

 <style>

   p

       color: white;

       background-color: red;

   }

 </style>

</head>

<body>

 <p>1번 p블록 시작<br /><br />1번 p블록 끝</p>

 <p>2번 p블록 시작<br /><br />2번 p블록 끝</p>

</body>

</html>


위의 예문은 <style></style> 요소 내에 CSS를 집어넣어 사용하는 Internal CSS 사용방식을 보여준다. 작성한 예문을 실행해보면 다음과 같이 나타난다. 



위에서 작성한 CSS가 어떻게 작성되었는지 기본적인 내용들을 살펴보자.

    

다음은 <p>요소를 선택하여 배경색(background-color) 속성(property)빨간색(red)으로 선언한 규칙이다. 



이 전체를 하나의 규칙(Rule)이라고 부른다. 그리고 규칙(Rule)어떤 요소에 어떤 속성을 적용할지 결정한다. 

    

CSS에서 작성된 규칙이 어떤 HTML의 요소에 적용되는지 나타내는 것을 선택자(selector)라고 한다. 위의 예문에서는 선택자로 <p> 요소를 선택하여 모든 <p> 요소가 해당 규칙의 적용을 받아 서로 다른 2개의 <p> 요소 블록에 동일한 CSS 규칙이 모두 적용되는 것을 확인할 수 있다. 

    

현재는 <p> 요소를 선택하고 있지만, <body> 요소, <h1> 요소 등 다른 요소를 선택할 수 있고 그 외에도 id 속성, class 속성 등 굉장히 다양한 방식으로 선택이 가능하다(나중에 자세히 살펴보자.). 

    

중괄호({ })로 감싸져 있는 부분 안에는 속성(property)속성값(value)이 위치한다. 속성속성값콜론(:)으로 연결되어 있고 여러 개의 속성값이 하나의 속성(property)에 적용되는 경우는 다음과 같이 공백으로 속성값을 구분한다. 

    

border: 10px solid white;


속성(property)속성값(value)은 합쳐서 하나의 단위를 이루고 이 단위를 선언(declaration)이라고 한다. 


그리고 선언(declaration)은 반드시 세미콜론(;)으로 마무리 한다. 

※ 이어지는 다음 선언이 없는 마지막 선언세미콜론(;)을 쓰지 않아도 되지만 그런 습관으로 오류가 발생할 수 있으므로 세미콜론(;)으로 마무리하는 것을 습관으로 하자.

     

여러 개의 선언(declaration)을 한 줄에 또는 여러 줄에 걸쳐서 한 번에 작성할 수 있다.

    

p { color: white; background-color: red; }


또는 


p {

    color: white;

    background-color: red;

  }


하나 또는 여러 개의 선언(declaration)들은 중괄호({ })로 둘러싸이는데 이렇게 중괄호({ })로 묶인 것선언(declaration) 블록이라고 한다. 

    

선택자중괄호 사이, 중괄호선언(declaration) 사이, 선언선언 사이에는 공백을 넣거나 줄을 바꿔 구별하는 것을 권장하는 것 같다. 실제로 공백을 넣지 않아도 작동하는 경우도 있지만 그렇지 않은 경우도 있어서 권장하는 것으로 알고 있다. 



Anki 파일


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


Ankilog 파일:   0033 HTML에 CSS 적용하고 기본 문법 알아보기.apkg






0032 CSS 소개


HTMLCSS서로 매우 긴밀하게 연계되어 있다. 따라서 HTML에서는 CSS 적용을 염두에 두고 요소(element)속성(attribute)을 만들어 두었고 CSS HTML구조 위에서 디자인을 하도록 설계되어 있어 서로 함께 공부해야만 이해할 수 있는 내용들이 많다. 따라서 앞으로 HTMLCSS를 함께 다루기 위하여 지금 CSS의 기본 개념과 사용법을 익혀두고자 한다. 

   

CSSCascading Style Sheets의 약자다. CSS를 이용하여 다양한 기기(device)의 서로 다른 크기의 화면에서 웹페이지의 디자인, 레이아웃(layout) 등  보이는 스타일을 설정할 수 있다.

   

그렇다면 왜 CSS를 쓰는가? 얼핏 생각하기에는 HTML에서 한꺼번에 처리하면 좋을 것 같은데, 갑자기 이질적인 새로운 형식의 언어를 배워서 웹페이지를 꾸며야 한다니 뭔가 이상하다.

    

우선, CSS의 등장 배경에 관해서는 다음과 같이 요약할 수 있다. 

    

HTML은 웹페이지 디자인 및 요소 스타일링에 적합한 언어가 아니다. 과거에 그런 시도를 한 적은 있지만 업무량이 과도해져 참담한 실패로 끝나고 말았다.

따라서 이런 문제를 극복하기 위하여 W3C에서 CSS를 만들어냈고 덕분에 세련된 디자인을 효율적으로 웹 사이트에 적용할 수 있게 되었다.


HTML은 처음부터 웹페이지의 내용(content)를 구조화하기 위한 언어로 설계되었을 뿐 웹페이지의 디자인을 설정하기 위한 용도로 만들어진 언어가 아니고 그런 의도를 가진 적도 없다. 

    
초기의 웹페이지들은 그야말로 단순한 텍스트에 가까웠기 때문에 HTML에서 요구하는 스타일링도 이탤릭과 굵게 하기 정도로 몇 가지 되지 않았다. 하지만 점점 웹이 발전하고 컴퓨터의 연산 용량과 저장 용량이 커지면서 사진이나 그림 등의 이미지가 웹페이지에 들어가고 점차 입체적이고 직관적인 웹페이지로 발전하게 되었다. 
    
또, 웹페이지가 단순한 정보 게시 역할 위주로 활용되다가 트래픽을 끌어들이기 위한 경쟁적인 플랫폼이 되면서 보다 직관적으로 정보를 전달하는 세련된 웹페이지로 전환되었다. 
    
당연히, 웹페이지의 디자인에 대한 수요가 늘어날 수 밖에 없게 되었고 독보적인 웹페이지를 만들기 위하여 부족한 HTML을 보충할 다양한 플러그 인(plug-in)들이 난립하여 웹에 효율성, 보안 등 각종 문제를 일으켰다.
    

당연히 HTML에서 스타일링을 하는 방식의 실험도 있었다. 가령, HTML 3.2에서 <font> 같은 태그가 표준명세에 첨가되었는데, 이런 방식은 거대한 웹 사이트에 속한 수많은 개별 웹페이지의 글꼴(font)과 색깔(color)을 일일이 설정해야 했기 때문에 개발과정은 길어지고 그에 따른 비용은 늘어났으며 해당 작업을 하는 웹 개발자들에겐 지루하고 힘든 악몽같은 경험을 선사하는 최악의 상황이 만들어졌다.

   

이런 문제들을 해결하기 위해서 W3C에서 CSS를 만들어 HTML 페이지에서 스타일 설정을 대체하도록 했고 덕분에  이제는 하나의 스타일 시트 파일(.css)을 수정하면 전체 웹 사이트의 비주얼을 세련되고 효과적으로 수정할 수 있게 되었다. 

   
결국, 웹페이지에서 보이는 부분은 거의 무조건 CSS로 설정한다고 보면 된다. 


Anki 파일


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


Ankilog 파일:  0032 CSS 소개.apkg





0025 HTML style 속성(attribute) 및 배경색 설정


스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.

    

이 때,  HTML개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.

   

HTMLstyle 속성은 다음과 같은 구문으로 사용된다. 

    

<태그명 style="속성:속성값;">


위 구문에서 속성CSS에서 사용하는 속성(property)이고, 속성값CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다. 

    

따라서 이 style 속성을 다루면서 익히게 될 속성(property)속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.

    

또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.

    

추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.

    

하나는 <head> 요소 내부에 중첩된 <style> 요소에 CSS를 작성하는 것이다. 

둘은 <link> 요소를 이용하여 외부에서 CSS 파일을 불러 읽는 것이다.

마지막은 개별 요소에 style 속성을 부가하여 CSS를 이용하는 것이다.


보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).

    

앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.

    

<img src="sun.jpg" style="width:100px;height:100px" alt="떠오르는 태양" />


위의 예문에서 style 속성으로 CSS 속성인 widthheight를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다. 



배경색(Background Color)


HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소인라인 요소의 차이점을 다시 한번 살펴보자.

       

background-color 속성은 다음과 같이 사용한다.

     

<태그명 style="background-color:색상이름;">


색상이름red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.


다음과 같이  0025.html 파일을 만들어 실행해보자.


<!DOCTYPE html>

    

<html>

<head><title>배경색</title></head>

<body style="background-color:black;">

<h1 style="background-color:red;">h1 요소</h1>

<p style="background-color:white;"

  p요소<br />

 <strong style="background-color:yellow;">중요한 텍스트</strong><br />

 <em style="background-color:purple;">강조 텍스트</em><br />

  a 요소 <a href="https://deliciouslearning.tistory.com/" style="background-color:blue;">책 씹어먹는 즐거움</a>

</p>

</body>

</html>


<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다. 



블록 요소인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다. 

    

CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.


Anki 파일


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


Ankilog 파일:  0025 HTML style 속성(attribute) 및 배경색 설정.apkg





0023 HTML에서 인용하기(Quotation)


글을 쓰다보면 소설이나 뉴스 등 다른 글을 인용해야하는 상황이 종종 생긴다. 이런 상황을 위하여 HTML에도 글의 성격이 인용인지 단순한 텍스트인지 등의 요소를 구별할 수 있도록 이에 맞는 요소들을 갖추고 있다. 

    

<q> 요소는 짧은 인용구를 정의하는 요소다. 브라우저는 보통 <q> 요소의 주위에 큰 따옴표를 둘렀거나 굵게 표시한다.

   

<blockquote> 요소는 다른 자료로부터 거의 문단 단위 이상을 인용할 때 사용한다. 브라우저는 <blockquote> 요소를 보통 들여쓰기(indent)로 나타낸다. 

    

<q> 요소가 짧고 핵심적인 인용구라면, <blockquote> 요소는 책이나 시처럼 완전한 문단을 기억하는 인용구이다.

    

<abbr> 요소는 약어(abbreviation)이나 두문자(acronym)를 정의하는 요소이다.

    

<address> 요소는 해당 문건의 작가나 저작자의 연락처를 정의하는 요소이다. <address> 요소는 보통 이탤릭으로 표시되고 대부분의 브라우저는 <address> 요소 위아래로 줄바꿈(line break)을 집어넣는다.

     

<cite> 요소는 해당 작품의 작품명(타이틀)을 정의하는 요소이다. 브라우저에는 보통 이탤릭으로 표시된다.


이제 배운 내용들이 실제로 브라우저에 어떻게 나타나는지 확인해보기 위해서 다음과 같이 작성해서 0023.html 파일로 저장하고 실행해보자. 


<!DOCTYPE html>

   

<html>

<head><title>HTML로 인용하기 예제</title></head>

<body>

<p>

최근 말라리아로 고생하는 사람이 자주 보인다. 특히 해외여행으로 인한 감염이 많은 것으로 나타났다. 다음은 신문기사다.

</p>

<blockquote>

말라리아의 위험성은 해외에서 더 심각하다. <abbr title="world health orginization">who</abbr><q>2015년 전 세계 말라리아감염자가 2억 1400만명, 사망자가 43만8000명에 달한다</q>라고 밝혔다. 이 중 상당수는 아프리카에서 발생했고 국내에도 지난해 해외에서 감염되어 온 환자가 72명으로 전체 국외유입감염병 중 2번째로 많은 수가 감염되었다.

</blockquote>

<P>말라리아에 대해서 좀 더 알고 싶다면 로버트 데소비츠가 쓴 <cite>말라리아의 씨앗</cite>을 추천한다.

</p>

<address>

저자 : 방구석 책벌레<br>

블로그 : deliciouslearning.tistrory.com

</address>

</body>

</html>


그러면 크롬 브르우저에서 아래와 같이 나타난다. 



우선 <blockquote> 요소로 인용한 곳은 들여쓰기(indent)가 된 문단처럼 나타났다. 그리고 <abbr> 요소로 집어넣은 내용은 아래에 점선으로 밑줄이 그어졌다. <q>요소는 큰 따옴표("")로 내용을 묶었고, <cite> 요소와 <address> 요소로 묶인 내용들은 이탤릭체로 나타났다.

    

브라우저에 어떻게 표현되었는지는 별로 중요하지 않다. 중요한 것은 브라우저가 각각의 내용에서 어떤 것이 인용구이고 어떤 것이 두문자이고 어떤 것이 인용된 작품명인지 안다는 사실이 중요하다.그러면 검색엔진은 이 웹 페이지가 말라리아에 대한 신문기사나 공신력 있는 단체의 말을 인용하고 있으며, 말라리아의 씨앗이라는 작품을 소개하고 있다는 것을 알게 되고 저자 자신과 접촉할 수 있는 연락처를 제시하고 있는 신뢰할만한 문서라고 판단하여 적절하게 이 웹 페이지를 소개할 것이다. 또, <abbr> 요소를 적절히 사용함으로써 브라우저와 검색엔진, 번역 시스템 등에 잘못된 단어 사용으로 오해받지 않게 될 것이다.

   

게다가 CSS를 이용하면 인용구가 전부 적절한 요소로 묶여 있으므로 각각의 요소에 대한 스타일을 명확하게 지정할 수 있게 된다.

Anki 파일


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


Ankilog 파일:   0023 HTML에서 인용하기(Quotation).apkg






0017 이미지를 보여주는 <img /> 요소 02 대체할 문구 및 크기 결정


3. 대체할 문구를 설정하는 alt 속성


alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

    

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

    

<img src="images/sun.jpg" alt="떠오르는 태양"/>


이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

   

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

    

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

   



4. 이미지 크기 조절


이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

    

일단은 전통적으로 <img /> 요소에 widthheight 속성을 다음과 같이 부여해 크기를 조절해왔다.

     

<img src="sun.jpg" width="100" height="100" alt="떠오르는 태양"/>


이 때 widthheight 속성의 속성값은 항상 픽셀(px)의 수이다.

    

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

    

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

    

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

    

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

    

<img src="sun.jpg" style="width:100px;height:100px" alt="떠오르는 태양"/>


최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.


Anki 파일


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


Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg





문서는 Anki 2.0 유저 매뉴얼을 번역한 문서입니다.


기본적으로 구글 번역을 통해서 초벌을 번역하고 이를 수정하는 방식으로 번역했습니다. 


또한, 본문에 충실한 직역보다는 매뉴얼을 숙지하기 쉽도록 의역 위주로 번역하였습니다.


 


Anki 매뉴얼 전체 개요 페이지 가기




Cards and Templates

 

 

 

 Platform-Specific CSS(특정 플랫폼별 CSS)

 

 

Anki는 여러 플랫폼에서 다른 스타일을 정의할 수 있는 몇 가지 특수 CSS 클래스를 정의하고 있다.

 

아래 예는 어느 플랫폼에서 학습하느냐에 따라서 다른 글꼴을 적용하고 있는 경우이다.

 

.win .jp { font-family: "MS Mincho"; }
.mac .jp { font-family: "Hiragino Mincho Pro"; }
.linux .jp { font-family: "Kochi Mincho"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

 

그리고 템플릿에서 다음과 같이 작성한다.

 

<div class=jp>{{Field}}</div>

 

다른 iOS 장비의 경우 .iphone .ipad를 사용할 수 있다.

 

AnkiWeb을 사용할 때 .gecko, .opera .ie와 같은 속성을 사용하여 특정 브라우저를 선택할 수도 있다.

 

전체 옵션 목록은 http://rafael.adm.br/css_browser_selector/ 를 참조하면 된다.

 




Anki 매뉴얼 전체 개요 페이지 가기



문서는 Anki 2.0 유저 매뉴얼을 번역한 문서입니다.


기본적으로 구글 번역을 통해서 초벌을 번역하고 이를 수정하는 방식으로 번역했습니다. 


또한, 본문에 충실한 직역보다는 매뉴얼을 숙지하기 쉽도록 의역 위주로 번역하였습니다.


 


Anki 매뉴얼 전체 개요 페이지 가기




Cards and Templates

 

 

 

 Field Styling(필드 꾸미기)

 

 

기본으로 설정된 스타일은 모든 카드에 공통으로 적용된다.  

 

하지만 기본 설정이 아닌 어떤 필드나 카드의 일부분은 다른 글꼴, 색깔 등등을 적용할 수 있다.

 

이건 외국어를 공부할 때 매우 중요하다.

 

왜냐하면 외국어들에게만 적용되는 글꼴이 있어서 어떤 글꼴은 외국어를 읽지 못한다.

 

따라서 Anki에서도 특정 외국어에 적합한 글꼴을 선택해서 해당 사항을 적용해야 한다.

 

 

우선 "Expression"이라는 필드가 있다.

 

이 필드에 OSX Thai 글꼴인 "Ayuthaya"를 적용하고 싶다.

 

템플릿에는 다음과 같이 적혀있다.

 

        What is {{Expression}}? 

 

        {{Notes}}

 

이제부터 할 일은 스타일을 적용할 텍스트를 HTML을 이용하여 묶는 것이다.

 

우선 텍스트 앞에 다음과 같은 문구를 삽입한다.

 

        <div class=mystyle1>

 

그리고 텍스트의 바로 뒤에도 다음과 같이 삽입한다.

 

         </div>

 

즉 스타일을 적용하고자 하는 텍스트 부분을 다음과 같이 감싸는 것이다.

 

         <div class=mystyle1> 우리가 스타일을 적용하고자 하는 텍스트 </div>

 

이렇게 텍스트를 감싸면 "mystyle1"이라는 사용자 정의 스타일을 사용하여 해당 텍스트의 스타일을 저정한다.

 

 

따라서 템플릿에 작성된 "What is ...?"라는 표현 전체를 태국어 글꼴로 사용하려면 다음과 같이 사용한다.

 

         <div class=mystyle1>What is {{Expression}}?</div>

         {{Notes}}

 

"Expression" 필드에만 태국어 글꼴을 사용하기를 원한다면 다음과 같이 하면 된다.

 

          What is <div class=mystyle1>{{Expression}}</div>?

          {{Notes}}

 

이렇게 템플릿을 편집한 후에는 "mystyle1"이라는 사용자 정의 스타일을 지정하기 위해서 스타일 섹션으로 이동한다.

 

스타일 섹션은 편집하기 전에 다음과 같이 나타나야 한다.

 

     .card {

font-family: arial;

fotn-size: 20px;

text-align: center;

color: black;

background-color: white;

       }

 

아무런 사용자 정의 스타일이 지정되지 않았을 때의 카드창은 다음과 같다.

 

 

 

 

 

이제 새로운 사용자 정의 스타일을 하단에 다음과 같이 추가하면 해당 스타일이 적용된다.

 

 

      .card {

font-family: arial;

font-size: 20px;

text-align: center;

color: black;

background-color: white;

       }

 

       .mystyle1 {

font-family: ayuthaya;

       } 

 

스타일을 적용한 것은 다음과 같다.

 

 

 

 

스타일에는 하고자 하는 어떤 스타일도 지정할 수 있다.

 

글꼴 크기도 키우려면 mystyle1 섹션에서 다음과 같이 변경하면 된다.

 

 

      .card {

font-family: arial;

font-size: 20px;

text-align: center;

color: black;

background-color: white;

       }

 

       .mystyle1 {

font-family: ayuthaya;

font-size: 30px;

       } 

 

 

개인의 사용자 글꼴을 카드뭉치와 함께 엮는 것이 가능하므로 이러한 글꼴들을 별도로 컴퓨터나 모바일 기기에 설치할 필요가 없다.

 

여기에 대한 자세한 정보는 "글꼴 설치" 섹션을 참조하면 된다.

 

또한, 사용할 수 있는 스타일 옵션에 대한 자세한 내용은 "카드 꾸미기" 섹션을 참조하면 된다.

 


Anki 매뉴얼 전체 개요 페이지 가기



문서는 Anki 2.0 유저 매뉴얼을 번역한 문서입니다.


기본적으로 구글 번역을 통해서 초벌을 번역하고 이를 수정하는 방식으로 번역했습니다. 


또한, 본문에 충실한 직역보다는 매뉴얼을 숙지하기 쉽도록 의역 위주로 번역하였습니다.


 


Anki 매뉴얼 전체 개요 페이지 가기




Cards and Templates

 

 

 

 Card Styling(카드 꾸미기)

 

 

YouTube에서 카드를 꾸미는 것에 대한 동영상을 볼 수 있다.  

 

 

카드창을 열어보면 앞면 템플릿과 뒷면 템플릿 사이에 카드 스타일을 설정할 수 있는 스타일 섹션이 있다.

 

여기에서 카드의 배경색, 기본 글꼴, 텍스트 정렬 등을 변경할 수 있다.

 

 

 

주의 : 위에서 언급한 스타일 섹션에서 다양한 설정이 가능하지만 답을 텍스트 박스에 입력하고 이것을 실제 답과 비교하는 과정에서 사용되는 텍스트 박스의 글꼴을 변경할 수 없다. 만일 텍스트 박스에서 글꼴을 변경하는 법을 배우고 싶다면 "답을 입력하고 확인하기" 섹션과 "필드를 입맛대로 사용하기" 섹션을 참조하면 된다.  

 

 

스타일 섹션에서 사용할 수 있는 표준 옵션은 다음과 같다.

 

 font-family

카드에 사용할 글꼴의 이름이다. 위의 카드창에는 다음과 같이 작성되어 있다. 글꼴의 이름에 "MS Unicode"와 같은 공백이 있으면 이 문장에서와 같이 큰 따옴표로 묶어주어야 한다. 하나의 카드에 여러 글꼴을 사용할 수 있다. 이에 대한 정보는 아래를 참조하라.

 

 font-size

픽셀 단위로 적는 글꼴크기이다. "px"라는 단위를 삭제하면 안된다.

 

 text-align

텍스트를 중앙(center), 왼쪽(left), 오른쪽(right)로 정렬

 

 color

텍스트의 색이다. "blue", "lightyellow"와 같이 간단하게 색상이름을 쓰거나 HTML 색상 코드를 사용하여 임의의 색상을 선택할 수 있다. 자세한 내용은 이 웹페이지를 참조하라.

 

 background-color

카드의 배경색이다.

 

 

 

이 스타일 섹션에는 CSS를 마음껏 사용할 수 있다.

 

아마도 고급 사용자라면 배경 이미지나 그래디언트를 추가하는 등의 일을 하고 싶을 것이다.  

 

만일, 특정 서식이나 형식을 얻는 방법이 궁금하다면 웹을 검색하여 CSS로 어떻게 하는지 확인해볼 수 있다.

 

아마도 정말 많은 관련 문서들을 볼 수 있을 것이다.

 

 

 

스타일은 해당 노트유형을 사용하는 모든 카드에 공유된다.

 

즉, 현재의 노트유형에서 스타일을 수정하면 해당 노트유형을 사용하는 다른 카드도 전부 수정된다.

 

가령, 노트유형이 기본(역방향 카드 포함)이라면 하나의 노트당 2개의 카드가 생긴다.

 

따라서 기본(역방향 카드 포함)의 스타일을 변경하면 2개의 카드 전부 변하게 된다.

 

아래의 카드창에서는 background-colorwhite에서 yellow로 변경한 결과, 이 노트유형에 포함된 카드1카드2 전부 배경색이 노란색으로 변경되었다.

 

 

 

물론 카드별로 스타일을 다르게 지정할 수도 있다.

 

다음 예제는 첫번째 카드는 파란색 배경을 사용하게 하는 코드이다.

 

.card1 { background-color: blue; }

 

아래의 카드창에 이 문구를 추가한 결과 <카드1>의 카드 배경색은 파란색으로 차별화됨

 

 

 

 

그리고 주의해야할 또 하나의 사실은 Anki에 이미지를 삽입하면 Anki는 이를 화면 크기에 맞추어 축소하게끔 하는 설정이 기본으로 되어 있다.

 

이를 수정하고 싶다면 스타일 섹션의 아래쪽에 다음을 추가하면 된다.

 

img { max-width: none; max-height: none; }

 

 

 

만일, 이미지의 스타일을 수정했는데 노트의 별표가 엄청나게 커진다든지 하는 영향을 받을 수 있다.

 

이런 경우에는 다음과 같이 노트의 별표 이미지만 대상으로 이를 수정할 수 있다.

 

img#star { ... }

 

 

 

 

Anki 매뉴얼 전체 개요 페이지 가기



+ Recent posts