0003_HTML에 대한 간단한 소개

 

정식 명칭 : Hyper Text Markup Language

 

월드와이드웹(www)에서 웹페이지를 부호화하고 Hyper Text 링크를 제공하는 언어

 

Markup의 측면과 Hyper Text의 두 가지 측면이 있음

 

Markup적인 측면에서 머리말, 문단, 도표 등의 구조를 제공하고

 

Hyper Text적인 측면에서 앵커웹주소(URL)을 가리켜 다른 웹페이지의 링크를 제공한다.


 <단어 공부>


URL 웹주소(Universal Resource Locator)




Anki로 공부하시려면 아래의 파일을 다운받아 공부하시면 됩니다.


Anki 학습 파일 2가지 버전


0003_HTML에 대한 간단한 소개(기본_질의_응답_형식).apkg

0003_HTML에 대한 간단한 소개(빈칸_채우기_형식).apkg








0002_웹의 구조와 HTML의 역할



간략한 웹의 구조는 다음과 같다.




웹페이지 관련 파일들을 보유하고 있는 웹서버는 인터넷에 연결된 컴퓨터로 웹브라우저의 요청에 따라 파일을 제공한다.


웹브라우저는 웹서버에 HTML 페이지를 요청하고 요청에 대한 응답을 받아 화면에 보여준다.


이러한 웹의 구조하에서 HTML의 역할은 웹페이지의 구조와 내용을 브라우저에게 알려주는 것이다.



Anki로 공부하시려면 아래의 파일을 다운받아 공부하시면 됩니다.


Anki 학습 파일 : 0002_웹의 구조와 HTML의 역할.apkg







HTML 공부 시작의 변

 

’97대한민국이 사실상 파산하면서 나라가 고꾸라졌다. 그리고 IMF와 함께 나라의 빚을 갚기 위한 일대의 변혁이 시작되었다. 이러한 사태로 대한민국이 뿌리부터 변하는 그 변화의 한 가운데에 있을 때 그러한 변화와는 큰 관계가 없는 군대에 입대하였고 제대할 즈음에는 IMF 구제금융을 털어낸 나라가 다시 엉금엉금 모양새를 갖추면서 부활하고 있었다. 하지만 IMF 이전과 이후로 대한민국은 많은 것이 바뀌었고 그러한 변화와 떨어져 있다가 2년만에 돌아오니 대한민국 사회는 이질적인 느낌을 줄만큼 달라져 있었다.


HTML를 처음 접했던 것은 2000년 군대를 제대한 그 즈음이었다. 당시, 사회는 군대를 들어가기 전 사회와 생활방식과 활기가 많이 달랐다. 그리고 그 배경에는 초고속 인터넷 회선의 보급이 있었고 IT버블로 사람들은 새로운 대박신화에 열광하고 있었다. 인터넷이 보급되면서 홈페이지가 없으면 시대적 흐름에 따라가지 못하는 못난 사람인 것 마냥 사람들은 유행처럼 너도나도 홈페이지를 만들고, 명함에 자신의 홈페이지 주소를 박아놓던 시절이다.

 

전자오락에 미쳐 살던 세대로서 PC방의 등장은 무척 반겼다. 그렇지만 프로그래밍을 배우고 홈페이지 제작을 할 줄 알아야 한다면서 기본적으로 HTML 정도는 해야 한다고 사람들이 입을 모아 말하는 것에는 이상할 정도로 거부감이 들었다. 당시의 나는 컴퓨터와 관련된 일체의 것에 전혀 관심이 없었다. 이러한 내용들이 너무 공허하게 들렸기 때문이다.

 

너도 나도 홈페이지를 제작하지만 그 홈페이지에 올릴 컨텐츠는 없는 시대였다. 사람들은 홈페이지를 만들었지만 내용을 채우는 경우는 드물었다. 그저 사진 한 개만 올라와서 누구누구의 홈페이지라고 표시되어 있는 그런 홈페이지 천지였다. IT 부흥에 따라가는 이러한 태도들이 빈수레처럼 여겨졌고, 개인적으로도 IT를 통해서 무엇을 해보고 싶은 것이 없으니 관심이 있을 리 없다


애석하지만 당시의 나의 선택을 후회한다. IT는 정말 놀아볼만한 공간이기 때문이다. 우리는 인터넷에 포위되어 살고 있다. 이젠 모바일 기기까지 나와서 웹에 접속되지 않은 삶이란 것을 상상하기도 어렵게 되었다. 하지만 IT가 무엇인지 어떻게 작동하는지 잘 모르는 나는 그저 그것을 소비하기에 바쁘다. 잘 몰라도 충분히 즐겁게 소비할 수 있으니 문제는 없다. 하지만 조금 내용을 알면 그저 서비스의 객체가 되는 것에서 벗어나 나를 둘러싼 이 웹의 세계와 적극적으로 연결될 수 있다. 멋진 홈페이지를 보면서 소비자로서는 그저 멋있다는 생각을 하겠지만 조금 알고 보면 디자인과 구조에 대한 영감을 얻을 수 있을 것이다. IT세계의 각종 담론과 발전방향에 대한 논의에도 참여할 수 있을 것이고 스스로의 아이디어를 구현해볼 수도 있을 것이다.


개인적으로는 스스로의 아이디어를 구현한다는 점이 가장 마음에 든다. 그리고 이러한 아이디어를 구현하기 위해서는 그저 프로그래밍만 하면 된다는 점도 마음에 든다. 만일 건축을 하거나 유전자 공학을 하거나 첨단 화학실험을 하려고 하면 자본을 감당할 수 있는 어느 회사에 소속되어서 눈치를 보면서 그것을 구현해야 할 것이다. 하지만 IT는 그렇지 않다. 물론, 대용량의 서버나 수퍼컴퓨터 등이 필요하다면 역시 자본이 필요하겠지만 그럼에도 대부분의 아이디어를 집에서 항상 쓰는 컴퓨터의 수준으로 대략적인 구현이 가능하다. 그리고 구현된 것이 쓸만하다면 바로 시장에 해당 제품을 내놓을 수도 있다. 다른 사람과 아이디어를 공유해볼 수도 있고 같이 예술적인 프로젝트를 해볼 수도 있다. 가능성은 무궁무진하다.


또, 좋은 점은 IT 기술이 어렵지 않다는 것이다. 다른 첨단 기술은 접근하기 위해서 많은 실험과 통찰이 필요하고 고가의 실험장비와 큰 자본이 필요하다. 또한, 자연의 법칙이란 것이 오묘하여 인간의 머리로는 잘 이해하기 어려운 것들도 많이 있다. 하지만 IT기술은 그렇지 않다. 상당히 명백하고 단순하다. 물론, 이 분야도 첨단의 부분에서는 많은 철학적인 고뇌와 성찰이 필요하겠지만 단순히 프로그래밍을 배워서 필요한 것을 구현하는 것은 단순한 구현과 검토의 반복일 뿐이다. 접근성도 좋다. 집에서 항상 사용하는 컴퓨터에서 개발환경을 구축하기만 하면 된다. 오픈소스 소프트웨어를 사용하면 비용도 거의 들지 않는다. 구현 결과는 바로바로 알 수 있고 수정이 가능하다. 


마지막으로는 나이가 들어도 할 수 있다. 육체적인 힘을 많이 쓸 필요도 없고, 여러 사람과 긴밀하게 협업을 할 필요도 상대적으로 적다. 취미라면 혼자서 만들어보면서 놀 수도 있다. 늙어서 몸이 움직이지 않더라도 자판을 두들길 수는 있지 않을까? 그러니 늙어서 잘할 수 있는 것을 지금부터 구축해놓으면 잘 놀다 갈 수 있지 않을까라고 생각하는 것이다치매예방도 될 것이고 말이다.

 

나이 들어서 공부하는 것이니 너무 어렵게 가장 기초적인 내용부터 컴퓨터의 구조와 설계부터 파악해서 쌓아올리는 것은 바람직하지 않을 것 같다. 원래, 본인의 취향은 가장 기초적인 것부터 구축해서 올리는 것이지만 너무 많은 시간과 노력이 필요할 것 같다. 그래서 가장 쉽게 접할 수 있고 많이 활용할 수 있는 것부터 익혀서 천천히 심화시켜 나가는 방식으로 IT 세계를 탐험해보려고 HTML을 IT 공부의 시작으로 정했다.

 

공부하는 방식은 당연히 Anki를 적극 활용하는 방식으로 하려고 한다. 어차피, HTML관련 교재나 문서는 웹상에 풍부하게 있으니 다양한 문서들을 참조하여 공부를 해나가고 그 공부 결과를 요약 정리한 내용을 블로그에 올리고자 한다. 그리고 중요한 내용을 학습할 수 있는 Anki파일을 같이 첨부해서 올릴 계획이므로 같이 공부하고 싶은 사람은 Anki파일을 받아서 같이 공부했으면 좋겠다.

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


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


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


 


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




 LaTex Support(LaTex 지원)

 

LaTeX은 수학 공식, 화학 공식, 음악 표기 등을 입력할 수 있는 이상적이고 강력한 조판 시스템이다.

 

AnkiLaTeX을 어느 정도 지원하여 노트에 LaTeX 코드를 입력 할 수 있게 하고 있다.

 

기본적으로 카드를 학습할 때 AnkiLaTeX를 호출하고 그로 인하여 생성된 이미지를 표시하는 방식으로 사용한다.

 

 

 

Installing and Assumed Knowledge(설치 및 알고 있어야 할 내용들)

 

 

AnkiLaTeX을 지원하는 방식은 그냥 자동적인 것이 아니다.

 

오히려, 이미 LaTeX 사용 방법을 충분히 숙지하고 있고, LaTeX가 컴퓨터에 설치되어 있다고 가정하고 지원하는 것이다.

 

그러니 LaTeX을 쓸 줄 모른다면 제발 인터넷에서 제공되는 많은 가이드 중 하나를 참조하길 바란다.

 

그리고 마크업에 문제가 있는 경우 LaTeX 포럼에 문의하길 바란다.

 

 

LaTeX을 설치하려면 Windows에서 MiKTeX을 사용해야 한다.

 

OSX에서는 MacTex를 사용하고 Linux에서는 배포자의 패키지 관리자를 사용한다.

 

Dvipng도 설치해야 한다.

 

 

< 주 의 >

 

Windows에서는 MikTek의 관리창에 있는 설정으로 이동하여 "즉석에서 누락된 패키지 설치" 옵션의 설정이 "먼저 물어보기"가 아니라 "아니오"로 설정되어 있는지 확인해야한다.

 

만일, 계속해서 문제가 발생했을 때 어떤 사용자는 도움을 받아 모든 패키지를 가져와서 설치할 때까지 Anki를 관리자 권한으로 실행한 것으로 보고한 바 있다.

 

 

< 주 의 >

 

OSX에서 LaTeXMacTex BasicTex에서만 테스트되었다.

 

BasicTex를 사용하는 경우 다음 명령을 사용하여 dvipng을 별도로 설치해야한다.

 

sudo tlmgr update --self; sudo tlmgr install dvipng

 

 

명령이 경로에 없을 수 있으므로 다음과 같이 전체 경로를 제공해야 할 때도 있다.

(: /usr/local/texlive/2014basic/bin/x86_64-darwin/tlmgr)

 

< 주 의 >

 

위에서 언급한 LaTeX 패키지를 사용하지 않는 경우 latex dvipng의 전체 경로를 지정하려면 "LaTeX 편집" 추가 기능을 사용해야한다

 

 

 

LaTex on Web/Mobile(웹 및 모바일에서 LaTex)

 

LaTeX이 올려진 카드를 학습할 때, Anki는 해당 LaTeX에 대한 이미지를 생성하고 그 이미지를 해당 컬렉션의 미디어 폴더에 저장하여 나중에 사용할 수 있도록 한다.

 

웹 및 모바일 클라이언트에서는 이미지가 이미 존재할 경우 해당 이미지를 표시하지만, 이미지를 자체적으로 생성 할 수는 없다.

 

이런 상황에서 웹이나 모바일 클라이언트에서 해당 이미지를 공유하려면 카드를 적어도 한번 전부 학습해서 이미지를 전부 생성해야할 판이다.

 

이런 상황을 피하려면 Anki가 이미지를 대량으로 생성 할 수 있음을 알고 있어야 한다.

 

모든 이미지를 생성하려면 도구 미디어 검사를 클릭하면 된다.

 

그런 다음 동기화를 실행하면 생성된 미디어가 AnkiWeb 및 다른 클라이언트에 업로드 된다.

 

 

 

Example(사례)

 

 

LaTeX 컨텐츠를 입력하는 가장 일반적인 방법은 그 컨텐츠를 [latex] [/latex] 태그로 둘러싸는 것이다.

 

이 부분에 대한 바로 가기 버튼이 편집기 섹션에 있다.

 

 

 

Warning

 

[latex] 태그는 필드 내부에서만 사용되어야 한다.

 

카드 템플릿에 배치하면 문제가 발생할 수 있다.(카드와 템플릿 섹션의 미디어 및 LaTeX 참조 편)

 

 

예를 들어 Anki 플래시 카드의 앞면 필드에 다음과 같이 입력해보자.

 

Does [latex]\begin{math}\sum_{k = 1}^{\infty}\frac{1}{k}\end{math}[/latex] converge?

 

그러면 플래시 카드에는 다음과 같은 이미지가 생성된다.

 

 

위의 경우에 사용된 수식은 텍스트 수식이라고 부른다.

 

왜냐하면 수식이 비수학적인 텍스트 내에 배치되어 표시되기 때문이다.

 

반대로 다음과 같이 입력하면 표시된 수식을 보여준다.

 

Does the sum below converge?

 

[latex]\begin{displaymath}\sum_{k = 1}^{\infty}\frac{1}{k}\end{displaymath}[/latex]

 

 

텍스트 수식과 표시 수식은 LaTeX이 가장 일반적으로 사용하는 형식이므로Anki는 해당 형식의 축약 된 버전을 제공한다.

 

아래에 나타난 양식의 표현식은

 

[latex]\begin{math}...\end{math}[/latex]

 

다음과 같이 단축될 수 있다.

 

[$]...[/$]

 

, 아래에 나타난 양식의 표현식도

 

[latex]\begin{displaymath}...\end{displaymath}[/latex] 

 

다음과 같이 단축될 수 있다.

 

[$$]...[/$$]

 

 

예를 들어, 앞서 보여주었던 사례에서 표시된 두 개의 LaTeX 발췌문은 각각 다음과 같이 축약할 수 있다.

 

Does [$]\sum_{k = 1}^{\infty}\frac{1}{k}[/$] converge?

  

Does the sum below converge?

 

[$$]\sum_{k = 1}^{\infty}\frac{1}{k}[/$$]

 



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



+ Recent posts