0009 <html></html> 요소와 속성


HTML 문서의 큰 틀은 다음과 같다. 

      

<!DOCTYPE html>

    

<html>

 <head>웹페이지 관련 정보들</head>

 <body>본문(웹페이지의 내용)</body>

</html>


문서유형선언(document type declaration) 바로 아래에 나오는 <html> 태그에서 HTML 문서가 시작되고 </html> 태그에서 HTML 문서가 끝난다. 즉, HTML 문서는 문서유형선언을 제외하면 하나의 <html> </html> 요소(element)인 셈이다.

     

요소(element) 안에 또 다른 요소를 넣는 것을 ‘중첩(nesting)’이라고 하는데, 하나의 HTML 문서는 <html> </html> 요소 내부에 <head></head> 요소와 <body></body> 요소가 중첩(nesting)되어 만들어진다. 

    

<html></html> 요소가 HTML 문서를 이루는 다른 모든 요소의 뿌리가 되므로 루트 요소(root element)라고도 한다.

     

<html> 요소는 lang 속성을 가질 수 있다. 이 lang 속성검색엔진이 웹 페이지를 검색할 때 어떤 언어로 작성되어 있는지를 검색엔진이 쉽게 인식할 수 있도록 지정하는 것이다. (lang 속성을 <html> 요소만 가질 수 있는 것은 아니다.)

    

만일, <html> </html> 요소가 한국어로 작성되었다고 명시하고 싶다면 시작태그를 아래와 같이 작성하면 된다.

     

<html lang="ko">


lang 속성은 검색을 위해서만 필요하고, 웹 브라우저가 웹 페이지를 게시하는데 어떠한 영향도 미치지 않는다.


Anki 파일


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


Ankilog 파일:   0009 html 요소와 속성.apkg








0008 HTML 문서유형선언(document type declaration)


웹 브라우저 간 시장 점유율 싸움으로 HTML은 상당기간 부침이 있었기 때문에, 버전별로 조금씩 상이한 부분이 있고, 표준과 어긋나는 경우도 상당수 있다. 이런 경우 어떤 HTML을 버전을 사용하고 있는 문서인지 웹 브라우저에게 알려주어 웹 페이지가 정확하게 게시될 수 있게 해주어야 한다. 이를 문서유형선언(document type declaration)이라고 한다.

    

표준 HTML 문서는 최상단에 다음과 같은 선언으로 시작한다. (문서의 선언은 HTML 문서 최상단에 있어야 한다.)

     

<!DOCTYPE html>


따라서 실제 HTML 문서는 다음과 같이 작성되는 셈이다. 

    

<!DOCTYPE html>

     

<html>

 <head>웹페이지 관련 정보들</head>

 <body>본문(웹페이지의 내용)</body>

</html>


HTML5로 넘어오기 전에는 복잡하고 다양한 선언을 알아야 했지만 다행스럽게도 HTML5부터는 표준화가 이루어지면서 <!DOCTYPE html> 선언문만 알면 된다. 

    

<!DOCTYPE html> 선언은 표준 HTML을 사용하고 있다는 것을 웹 브라우저에게 제시하는 선언이고 더 이상 버전 번호를 표시하지 않는다. 그리고 앞으로도 HTML의 표준 명세는 하위 버전과 호환성을 갖추면서 새로운 기능을 지원하는 것을 원칙으로 하고 있어 표준이기만 하다면 더 이상 별도의 버전 표시가 필요 없게 되었다.

     

이 문서유형선언이 꺽쇠(<>)로 둘러싸여 있다고 해서 태그로 이루어진 요소(element)로 여길 수 있지만 왼쪽 꺽쇠(<) 다음에 느낌표(!)가 오면 요소(element)가 아니라는 뜻이다. 

     

HTML5 표준의 선언이 얼마나 간단한지는 다음과 같이 표준이 아닌 버전의 HTML 문서유형 선언을 보면 알 수 있다.

      

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Anki 파일


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


Ankilog 파일:  0008 HTML 문서유형선언.apkg







그리스 알파벳을 외워 두면 의외로 소소하게 많은 도움이 된다. 


그리스 알파벳을 실생활에 언어에 쓰지는 않지만 표기법, 음성기호, 각종 수식에 사용하는 변수 등으로 사용하는 경우가 많기 때문에, 서구권의 학문에서는 수식의 변수나 지표 등으로 광범위하게 사용된다. 


따라서 해당 문자의 대문자와 소문자를 알고 읽는 법을 알아두면 그러한 문서를 읽는 것에 은연중 도움이 많이 되고, 언어학이나 문자 관련 자료를 읽을 때는 거의 필수적으로 알아두어야 한다.


그리스 문자 암기용 Anki 파일은 아래와 같다. 


외우려고 하기 보다는 카드를 보면서 한번씩 인상에 새기면 하루에 5분 정도로 3일이면 금방 익숙해질 것이다. 


그리스문자.apkg



Anki 파일의 구성 내용


Anki에서 내용 구성은 다음과 같다. 


그리스 문자 24개 각 문자별로 대문자와 소문자 그리고 읽는 법을 엮어 1개씩 노트를 만들어 총 24개의 노트를 만든다.


아래는 노트번호-대문자-소문자-읽는 법 순으로 배열했다. 


01 Α α alpha 알파

02 Β β beta 베타

03 Γ γ gamma 감마

04 Δ δ delta 델타

05 Ε ε epsilon 엡실론

06 Ζ ζ zeta 제타

07 Η η eta 에타

08 Θ θ theta 세타

09 Ι ι iota 요타

10 Κ κ kappa 카파

11 Λ λ lambda 람다

12 Μ μ mu 뮤

13 Ν ν nu 뉴

14 Ξ ξ xi 크시

15 Ο ο omicron 오미크론

16 Π π pi 파이

17 Ρ ρ/ς rho 로

18 Σ σ sigma 시그마

19 Τ τ tau 타우

20 Υ υ upsilon 업실론

21 Φ φ phi 피

22 Χ χ chi 키

23 Ψ ψ psi 프시

24 Ω ω omega 오메가



각 문자별로


대문자, 소문자, 읽는 법을 각각 빈칸으로 처리하여 각 노트마다 3개의 카드를 만들어 총 72개의 카드를 만든다.


만들어진 카드는 아래와 같이 나타난다. 


기초 사용법 마무리



이제껏 vim에 대해서 기초적인 것들은 대부분 언급한 것 같다. 이 다음 단계는 vim의 각종 플러그인을 사용해보고vim 프로그래밍 스크립트를 작성하는 것이다.

 

스스로의 공부를 위해서 공부할 내용을 짧고 간결하게 제시하고 이를 앙키(Anki)로 정리하여 첨부한 것이 Ankilog. 그리고 vim을 익히려면 우선적으로 어느 정도 수준으로는 사용할 수 있게 만들어놓아야 그 때부터 실제 작업에 vim을 사용하면서 시행착오를 겪고 발전해나갈 수 있게 될 것이라고 판단했다. 그래서 잘 모르는 부분이라도 일단, 기초적인 사용법을 숙지하는 것에 초점을 두고 Ankilog를 작성해왔다.

 

그런데 해보니 역시 IT에 대한 기초가 없이 많이 부족한 자신과 마주치게 되었다. 간단한 텍스트 에디터의 사용법을 파악하는데도 이해하기 어려운 맥락이 많이 보이고, 원문 기술서들은 영어는 알아먹겠는데 그 내용이 전혀 이해가 되지 않는 이상한 현상을 자주 겪었다. 아마도 내 무지로 인하여 vim에 대해서 그 동안 올린 것들도 일부 틀린 것이 존재할 것이라고 생각한다.

 

그래서 원래, 계획은 플러그인이나 스크립트에 대해서도 공부를 할 생각이었지만 지금의 내 실력으로는 도저히 역부족으로 보여서 이제는 잠깐 접고 내공을 기르기 위하여 다른 공부를 하려고 한다. 오히려 다른 IT 공부를 하면서 지금까지 배운 vim을 적극 활용해서 개발도 해보고 프로그래밍도 공부하면서 시행착오를 겪어가면서 vim을 직접 사용하는 것에 중점을 두어야 할 시기라는 생각이다.

 

그리고 이제껏 공부했던 vimAnki를 하나로 모아서 아래에 첨부하니 필요한 분은 사용하시기 바란다. 



Anki 파일


아래는 그 동안 올렸던  vim의 Anki를 하나로 모아놓은 Anki 파일입니다. 참고하시기 바랍니다. 








탭 끼워넣기


작업을 하다보면 들여쓰기 때문에 행의 맨앞에 탭을 삽입해야할 경우가 많이 생긴다. 물론, 그럴 때마다 일일이 행의 처음으로 이동해서 편집 모드로 들어가 탭을 집어넣고 다시 나와서 작업을 해야 한다면 무척 번거로울 것이다.


이런 경우를 위해서 vim에서는 행 앞에 탭을 쉽게 삽입하거나 제거할 수 있게 만들어 놓았다


명령 모드 >>(오른쪽 꺽쇠 2회 누름)

 

현재 커서가 위치한 행의 맨 앞에 탭 하나를 삽입한다.


명령 모드 <<(왼쪽 꺽쇠 2회 누름)

 

현재 커서가 위치한 행의 맨 앞에 있는 탭 하나를 제거한다


위에 소개된 명령은 여러 개의 행에 동시에 적용할 수 있다.

 

명령 모드 [#]>> 

 

현재 커서 위치를 1행으로 해서 아래로 #행까지 행의 맨 앞에 탭 하나를 삽입한다


명령 모드 [#]<< 

 

현재 커서 위치를 1행으로 해서 아래로 #행까지 행의 맨 앞에 탭 하나를 제거한다



들여쓰기 자동정렬


소스코드의 들여쓰기가 잘못되었거나 잘못되었을 경우 이를 제대로 정렬할 수 있는 손쉬운 방법이 있다.

 

비주얼 모드로 들여쓰기를 정렬할 영역을 지정한 후 등호(=) 를 누르면 들여쓰기가 깔끔하게 정렬된다.

 

, 별도로 블록을 지정하지 않고 그냥 소스코드 전체의 들여쓰기를 정렬하려면 명령 모드에서 gg=G라고입력하면 된다.

 


자동완성 기능 사용하기


어떤 변수나 함수를 타이핑할 때 너무 복잡한 이름이거나 잘 모르는 이름일 경우에는 자동 완성 기능을 사용하여 손쉽게 이를 해결할 수 있다.

 

편집 모드 <Ctrl-p>


커서 위치에서부터 위로 자동 완성이 가능한 단어가 있는지 찾아서 제시함


편집 모드 <Ctrl-n>


커서 위치에서부터 아래로 자동 완성이 가능한 단어가 있는지 찾아서 제시함


자동완성 기능을 사용하는 모습은 다음과 같다. 



Anki 파일


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



폴딩 기능 이용


폴딩 기능은 별로 구태여 볼 필요가 없는 부분을 접어서 보기 편하게 해 주는 기능으로 이렇게 사용한다.


접기(folding)

접고 싶은 부분을 비주얼 모드로 영역 지정한 후 zf 키를 누르면 해당 부분이 접어진다


펴기(unfolding)

접힌 부분에 커서를 위치시키고 zo 키를 눌러주면 접힌 부분이 펴진다


즉, 아래의 사진과 같이 지정된 영역을 접고 편다.




이를 응용해서 함수의 여는 중괄호 ‘{’ 위에 커서를 위치시키고 명령 모드에서 v]}zf 명령을 내리면 비주얼 모드로 진입하여(v) 함수의 코딩된 블록이 지정되어(]}) 접힌다(zf).


함수의 여는 중괄호 '{' 위에 커서를 위치시키고 v]}zf

비주얼 모드로 진입하여(v) 함수의 코딩이 이루어진 블록이 지정되어(]}) 접힌다(zf).




이 키가 다소 복잡하고 자주 사용하므로 아래와 같이 키 매핑을 해두는 것도 좋다. 


map <F1> v]}zf


※ 키 매핑은 앞서 포스팅한 이곳을 참조하면 된다



Anki 파일


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


064 폴딩 기능.apkg

vim에서 셸 명령 사용하기


vim으로 작업하다 보면 셸에서 어떤 명령을 실행해야 하는 경우가 종종 발생할 수 있다. 파일 리스트를 확인하거나 네트워크의 IP를 확인해야할 때도 있고 필요한 데이터를 만들거나 연산할 상황이 발생하는 등 다양한 상황이 발생하는 것이다


이런 경우 vim을 닫고 셸 명령을 실행하고 다시 vim을 실행하는 일련의 번거로움을 없애기 위하여 vim에서 바로 셸 명령을 실행하고 실행이 종료되면 vim으로 바로 복귀할 수 있게 하는 명령 형식이 있다.


, 아래와 같이 명령 라인에 느낌표를 앞에 붙이고 셸 명령을 입력하는 것이다.


명령 라인 :![셸 명령]


명령을 수행하기 위해 잠깐 vim을 빠져나왔다가 명령이 수행된 후 [Enter]를 눌러 다시 vim으로 돌아온다


가령, 다음과 같이 명령할 수 있다.


명령 라인 :!ls


vim을 빠져나가 현재 디렉터리의 파일 및 디렉터리의 리스트를 보여준다


실행 결과는 다음과 같다. 





셸에서 원하는 명령을 수행하고 다시 vim으로 돌아오려면 셸에서 [Enter] 키를 누르면 된다.



셸 명령의 결과로 화면에 출력되는 내용이 필요할 수 있다. 그 때는 다음과 같은 형식으로 명령한다.


명령 라인에 :r ![셸 명령]


셸 명령으로 수행된 결과 데이터를 현재 커서의 위치에 삽입 



명령 라인에 :r !ls


셸 명령 ls 의 결과로 나타난 파일 및 디렉터리 리스트를 현재 커서 위치에 삽입


참고로 명령라인 :r [파일명] 형식의 명령은 현재 커서의 위치에 해당 파일명의 파일에 기록된 내용을 삽입하기 위하여 사용한다. 그래서 test1.txt 파일을 수정하고 있는데, :r test2.txt 명령을 내리면 현재 커서의 위치에 test2.txt의 내용이 삽입된다



Anki 파일


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



매크로란 무엇인가?


앞에서 배운 레지스터 중에서 우리가 임의로 사용할 수 있는 임시 저장소로 알파벳 레지스터에 대해서 배운 바 있다.

 

이 알파벳 레지스터에는 보통 데이터가 들어가지만 일련의 키 입력을 저장할 수도 있다.

 

이 때, 일련의 키 입력레지스터에 저장하고 이것을 다시 실행할 수 있도록 만드는 것vim매크로라고 한다.



매크로 기록 및 사용


매크로를 기록하고 사용하는 과정은 다음과 같다. 


1) 매크로 기록 시작 

q와 키 입력을 저장할 알파벳 레지스터에 해당하는 알파벳을 누르면 이후에 이루어지는 키 입력이 해당 알파벳 레지스터에 기록되기 시작한다


2) 키 입력

매크로로 지정할 키를 실제로 사용하면서 입력한다.


3) 매크로 기록 완료

원하는 키 입력을 마친 후 q를 누르면 매크로 기록이 완료된다.


4) 매크로 사용

명령 모드에서 @알파벳 레지스터에 해당하는 알파벳을 같이 누르면 레지스터에 기록된 매크로를 실행한다.



매크로 기록 및 사용 사례


그럼 실제 사용해보면서 매크로를 익혀보자. 


반복적으로 사용되지만 키 입력이 귀찮은 경우에 해당하는 일련의 키 입력을 매크로로 지정하는 것이 바람직할 것이다. 


소스코드를 작업하다 보면 들여쓰기를 해야하는 경우가 많다. 그 때마다 일일이 행의 처음으로 돌아가서 편집모드로 들어간 후 [Tab] 키를 누른 후 다시 명령 모드로 돌아오는 과정이 조금 귀찮았던 것 같다. 이것을 매크로로 만들어 보자


1) 매크로 기록 시작


알파벳 레지스터 중 a매크로를 기록한다.


일단은 명령 모드에서 qa 를 눌러 매크로 기록을 시작한다


다음의 사진과 같이 하단에 '기록 중 @a라는 표시가 나타난다.




2) 키 입력


다음과 같이 기록할 키 입력을 수행한다.

우선 커서가 행의 공백이 아닌 첫 글자에 위치하도록 캐럿(^) 키를 누른다.

 

편집 모드로 진입하기 위하여 i키를 누른다.

 

이제 [Tab]키를 눌러 탭을 삽입하고 [Esc] 키를 눌러 명령 모드로 돌아온다.


3) 매크로 기록 완료


q를 눌러 매크로 기록을 마친다.



4) 매크로 사용


명령 모드에서 @a 를 눌러 a 레지스터에 기록된 매크로를 사용해본다.


이 때, 행의 앞에 탭을 3개를 한꺼번에 삽입하고 싶으면 명령 모드에서 3@a 를 누르면 된다. 그러면 @a 3번 반복하여 실행하므로 탭이 3개가 삽입되는 효과가 나타난다.



Anki 파일


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


062 매크로 사용.apkg


vim 단축키 만들기


vim에는 정말 다양한 기능과 굉장히 많은 명령어가 있다. 하지만 이 많은 기능과 명령어를 모두 사용할 줄 알아야 하는 것은 아니다. 오히려 이러한 다양한 명령과 기능들을 둘러보고 나서 자신에게 필요한 것만 최적화 하는 것이 바람직하다. 특히, 자주 쓰는 명령어나 기능들을 간단한 키로 실행할 수 있도록 만들어 놓으면 작업이 대단히 수월해질 것이다. 이 때 자주 쓰는 명령어나 기능들을 간단한 키로 만들어주는 것이 키 매핑(mapping)이다. , 사용자 지정 단축키인 셈이다.

 

우선 어떤 키 매핑들이 사용되고 있는지 확인해보자


명령 라인에 :map 사용 중인 키 매핑 리스트를 화면에 표시한다.


실행해 보면 굉장히 많은 키 매핑이 사용중인 것을 볼 수 있을 것이다. 이미 지정된 키 매핑을 사용하는 것은 나중 문제로 하고 일단, 우리가 원하는 키 매팽을 해보는게 좋을 것 같다. 


위에서 사용한 명령라인에 :map 명령어 뒤에 [단축한 키][단축될 명령어]를 다음과 같이 배치하면 [단축될 명령어][단축한 키]매핑(mapping) 시킨다.


명령 라인에 :map [단축한 키] [단축될 명령어]


[단축될 명령어][단축한 키]매핑(mapping)


가령, 다음과 같다.


명령 라인에 :map <F2> :tabnew<CR>


기능키인 <F2> 키에 :tabnew<CR>매핑(mapping) 

명령 모드에서 기능키 <F2>를 누르면 :tabnew 명령어가 실행되어 새로운 탭이 열리면서 이름 없는 빈 파일이 표시됨


※ <CR>vim 내에서 [Enter]키를 입력했음을 의미한다. 만일, 위의 사례에서 <CR>을 집어넣지 않은 채로 매핑을 하면 <F2>키를 눌렀을 때 명령 라인에 :tabnew 명령어가 나타나지만 [Enter]명령어가 입력되지 않으므로 아무 일도 일어나지 않는다.



.vimrc 에 설정한 키 매핑 기록하기


지금 열심히 키 매핑으로 원하는 단축키를 만들어놨어도 vim을 끄고 다시 켜면 처음부터 다시 설정을 해줘야 한다. 단축키는 앞으로도 지속적으로 사용할 것이므로 vim의 설정 파일인 .vimrc에 설정한 키 매핑을 기록하여 매번 vim을 실행할 때마다 다시 설정하지 않도록 조치할 필요가 있다. 


우리는 앞서 vim의 설정 파일인 .vimrc에 대해서 간단하게 둘러본 바가 있으니 이를 참조하기 바란다.


~/.vimrc 파일을 열어 다음 내용을 가장 마지막 행에 추가한다


map <F2> :tabnew<CR>

.vimrc에 기록할 때는 명령 라인에 명령어를 입력할 때 앞에 붙는 콜론(:)을 쓰지 않는 점에 주의


이제 vim을 닫고 다시 열어서 명령 라인에 :map 을 입력하여 사용중인 키 매핑 리스트를 확인하면 아래과 같이 등록된 것을 확인할 수 있다.



Anki 파일


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


061 단축키 만들기-키 매핑(mapping).apkg


Backquote(`)와 작은따옴표(')의 차이


앞서 배운 것처럼 backquote(`)와 마킹한 알파벳을 같이 누르면 마킹된 위치로 이동한다.


이때, backquote(`) 대신 작은따옴표(')와 마킹한 알파벳을 같이 누르면 마킹된 위치가 속한 행의 공백이 아닌 첫 글자로 이동한다


다음은 backquote(`)작은따옴표(')를 이용한 경우다. 


명령 모드 `a : 같은 파일 내에서 마킹된 위 a로 이동

명령 모드 'a : 같은 파일 내에서 마킹된 위치 a가 속한 행의 공백이 아닌 첫 글자로 이동

명령 모드 `A : 마킹된 A로 이동

명령 모드 'A : 마킹된 위치 A가 속한 행의 공백이 아닌 첫 글자로 이동


작은따옴표(')와 backquote(`)가 서로 비슷하면서도 조금씩 다른 역할을 하는 것을 알 수 있다.


 

마킹 관련 몇 가지 사용법


vim 커서가 이전에 있었던 위치를 자동으로 마킹해준다. 물론이것은 커서의 모든 위치를 일일이 지역 마킹한다는 뜻은 아니다이동 명령을 이용하여 커서의 위치가 급격하게 변화할 때 직전에 커서가 있던 위치를 자동으로 지역 마킹한다


가령, 탐색된 문자열을 n이나 N로 점프하는 경우 또는, 명령 모드에서 gg키로 문서의 처음으로 이동하거나 G키를 눌러 문서의 마지막으로 점프하는 경우 등 같은 경우에 자동으로 지역 마킹이 이루어진다.


이러한 자동 지역 마킹을 알아두면 작업을 하면서 주요 위치들 사이를 손쉽게 오가면서 작업을 할 수 있다. 


사용법은 아래과 같다. 


명령 모드에서 ``(Backquote 연속 두 번 누름)


같은 파일 내에서 현재 위치로 점프해오기 전 커서 위치로 이동


명령 모드에서 ''(작은따옴표 연속 두 번 누름)


같은 파일 내에서 현재 위치로 점프해오기 전 커서가 위치한 행의 공백이 아닌 첫 글자로 이동


이렇게 되면 backquote(`) 두개 또는 작은따옴표('두개를 연달아 연타하면서 간단하게 이전에 작업했던 곳으로 돌아갈 수 있게 된다. , 이것은 같은 파일 내에서만 사용할 수 있는 지역 마킹이다.



또, 열심히 작업하다가 잠시 끊고 쉬었다가 다시 작업을 할 때, 이전에 작업하던 부분에서 연속으로 작업하길 원할 수 있다. 이런 경우를 위하여 vim은 해당 파일이 어느 위치에서 작업을 끝냈는지 자동으로 지역 마킹을 해둔다


사용법은 다음과 같다. 


명령 모드에서 `"(Backquote큰따옴표)


전에 vim으로 현재 파일을 닫았을 때 커서가 있던 위치로 이동


명령 모드에서 '"(작은따옴표큰따옴표)


이전에 vim으로 현재 파일을 닫았을 때 커서가 있던 행의 공백이 아닌 첫 글자로 이동


마지막으로 마킹된 내용을 확인해보고 싶을 때는 명령 라인에 :marks 라고 명령어를 입력하면 된다.

 

그러면 아래와 같이 전역 마킹과 현재 파일에 지정된 지역 마킹 그리고 파일 마킹들이 전부 화면에 표시된다.




Anki 파일


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



+ Recent posts