0015 URL 간략하게 이해하고 연습하기


일반적으로 URL이라고 함은 웹 브라우저 주소창에 입력하는 다음과 같은 주소를 말한다.

   

http://www.ankilog.com/index.html


HTTP(HyperText Transfer Protocol)는 월드와이드웹(WWW)에서 클라이언트와 서버 사이에 정보를 주고받기 위해 만들어진 상호규약(protocol)을 말하고 http://는 HTTP(HyperText Transfer Protocol)로 통신한다는 것을 의미한다.

    

www.ankilog.com 은 웹 사이트의 이름이다. 

   

/index.html 은 index.html 이라는 파일이 위치한 루트로부터 절대 경로를 말한다.

    

URL에서 절대 경로란 루트 디렉터리를 기준으로 특정 파일이나 페이지를 찾아가는 경로를 말한다. 먼저 루트 디렉터리는 슬래쉬(/)에서 시작하고 디렉터리를 넘어갈 때마다 슬래쉬(/)로 구분한다.

    

즉, 전체적으로 해석해보면 개인 컴퓨터(클라이언트라고 한다.)에서 www.ankilog.com 이라는 웹사이트의 서버에 루트 디렉터리에 있는 index.html 파일을 HTTP로 요청하는 것이다. 이에 서버는 해당 파일을 찾아서 HTTP로 응답할 것이고 파일이 없으면 404 not found 에러를 보여준다.

    

사례를 들어보자. 아래의 그림은 www.ankilog.com 이라는 가상의 사이트 서버 안에 있는 디렉터리와 파일들이다. 즉, www.ankilog.com 이라는 사이트에 관련된 파일은 전부 그림에 있는 main, about, menu, etc, images 디렉터리에 있는 것이다. 



여기서 루트(/) 디렉터리는 보통 main 디렉터리가 된다. (웹 서버 컴퓨터의 루트 디렉터리가 아니라 웹페이지의 루트 디렉터리라는 점을 주의) 그리고 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 이를 아래와 같이 루트(/)인 main 디렉터리에 접속시킨다. 

   

http://www.ankilog.com → http://www.ankilog.com/

슬래쉬(/)가 말미에 자동으로 붙으면서 루트 디렉터리인 main 디렉터리로 접속된다. 


웹페이지는 html 파일이므로 디렉터리에 접속한다는 개념은 이상하다. 하지만  사람들이 어디에 어떤 html 파일이 있는지를 전부 알고 개별 파일을 접속하기는 어렵기 때문에 해당 디렉터리에 접속했을 때 그 디렉터리의 웹페이지 파일을 자동으로 보여주게끔 하는데 이 파일을 디폴트 파일(default file)이라고 부른다. 디폴트 파일은 루트에만 적용되는 것이 아니다. 각각의 디렉터리마다 디폴트 파일이 있다. 

   

디폴트 파일은 기본적으로 'index.html', 'default.htm'이 된다. 이 사례에서는 index.html 파일을 쓰고 있다.

    

즉, 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 main 디렉터리에 있는 index.html 파일을 자동으로 보여준다.

    

위의 그림과 같은 디렉터리 구조를 보이는 웹사이트 www.ankilog.com에서 개인 컴퓨터(클라이언트)가 이 웹사이트의 특정 파일에 접근하려고 할 때 URL을 어떻게 작성해야할지 살펴보자. (구분하기 쉽게 색깔과 폰트를 변경함)

    

main 디렉터리의 index.html

http://www.ankilog.com/index.html 

(index.html은 디폴트 파일이므로 생략가능)

    

about 디렉터리

index.html → http://www.ankilog.com/about/index.html

(index.html은 디폴트 파일이므로 생략가능)

about.html → http://www.ankilog.com/about/about.html

map.html → http://www.ankilog.com/about/map.html

   

menu 디렉터리

index.html → http://www.ankilog.com/menu/index.html

(index.html은 디폴트 파일이므로 생략가능)

menu.html → http://www.ankilog.com/menu/menu.html

    

etc 디렉터리

index.html → http://www.ankilog.com/menu/etc/index.html

(index.html은 디폴트 파일이므로 생략가능)

etc.html → http://www.ankilog.com/menu/etc/etc.html

    

images 디렉터리

sun.jpg → http://www.ankilog.com/images/sun.jpg

(사진만 브라우저에 나타남)



Anki 파일


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


Ankilog 파일:  0015 URL 간략하게 이해하고 연습하기.apkg






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

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

0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정  (0) 2018.11.17
0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성  (0) 2018.11.16
0014 빈요소(empty element) br과 hr  (0) 2018.11.14
0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0012 제목(heading)의 h요소  (0) 2018.11.12

0014 빈요소(empty element) br과 hr

   

이제까지 배운 요소(element)들은 모두 내용(content)을 시작태그와 종료태그로 감싸는 형식이었다. 하지만 처음부터 내용(content) 없이 어떤 구조적인 기능만 하게끔 만들어진 요소들이 있다. 이런 요소들을 내용없이 비었다고 해서 빈요소(empty element)라고 한다.

   

내용(content)이 없다고 모두 빈요소가 되는 것은 아니다. 즉, <title></title> 처럼 <title> 요소가 내용을 가지지 않는다고 해서 </title> 종료태그를 붙이지 않아도 된다는 뜻이 아니라 처음부터 빈요소로 설계된 것만 빈요소이니 오해가 없길 바란다.


  <br /> 요소

   

앞에서 <p> 요소에서 줄바꾸기가 한 칸의 공백으로 나타난다는 점을 언급했다. 이런 줄바꾸기를 해주는 요소가 있는데 그것이 <br> 요소이다. 

   

<br> 요소는 HTML에서 하나의 줄바꿈(line break)을 삽입하는 요소이다.

   

<br> 요소는 빈요소이므로 종료태그(</br>)를 쓰지 않는다. 

   

HTML에서는 빈요소를 시작태그에서 바로 종료태그를 겸하는 방식으로 <br /> 형식으로 작성할 수도 있다. 이러한 방식은 오류가능성이 낮은 좀 더 엄격한 방식이고  XML이나 XHTML에서도 사용하는 방식이므로 개발자들은 시작태그에 종료태그를 겸하는 <br /> 같은 형식을 선호한다. 

   

<br /> 사용례를 살펴보자.

   

HTML을 다음과 같이 작성하면

<p>HTML<br />Ankilog</p>

   

웹 브라우저에는 다음과 같이 나타난다.

HTML
Ankilog

※ <br />로 인하여 줄이 한 행 바뀐다.



  <hr /> 요소

HTML에서 <hr /> 요소는 구조적으로 주제의 변화를 의미하고 수평선으로 나타나는 요소다. 즉, 서로 구별되는 별도의 내용들을 수평선으로 분리해주는 요소이다.
   
<hr /> 요소는 빈요소이므로 종료태그(</hr>)를 쓰지 않는다. 
   
<hr /> 사용례를 살펴보자. 우선, hr요소test.html 파일을 다음과 같이 작성한 후 저장한다. 

   

<!DOCTYPE html>

   

<html>

 <head>

   <title>HTML Ankilog</title>

 </head>

 <body>

   <h1>Ankilog란?</h1>

   <p>Ankilog는 Anki를 이용하여 HTML을 효과적으로 배우고 익힐 수 있도록 만든 Anki와 Blog의 합성어</p>

   <hr />

   <h1>HTML이란?</h1>

   <p>HyperText Markup Language</p>

 </body>

</html>

  

그리고 파일을 실행하면 다음과 같이 수평선이 그어지는 것을 확인할 수 있다. 




Anki 파일


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


Ankilog 파일:  0014 빈요소(empty element) br과 hr.apkg





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

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

0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성  (0) 2018.11.16
0015 URL 간략하게 이해하고 연습하기  (0) 2018.11.15
0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0012 제목(heading)의 h요소  (0) 2018.11.12
0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10

0013 단락(paragraph)을 정의하는 p요소


HTML의 <p> 요소는 단락을 정의하는 요소이다.

  

글을 쓸 때는 제목(heading)을 표시하고 이어서 아이디어와 완결된 생각 등을 문단, 단락 등으로 구분지어가며 쓴다. 웹 페이지에서는 이러한 단락을 구조적으로 나타내기 위하여 단락을 의미하는 paragraph의 첫 글자를 의미하는 <p> 요소를 이용한다.

  
작성 방식은 다음과 같다. 
  

<p>내용(content)</p>

즉, 시작태그 <p>와 종료태그 </p> 사이에 단락으로 작성된 텍스트를 내용(context)으로 집어넣는다. 종료태그를 잊지말자.

   

앞서 배운 <h> 요소와 <p> 요소를 이용하여 웹 페이지에 다음과 같은 글을 써보자. 

Ankilog란?

  

Ankilog는 Anki를 이용하여 HTML을 효과적으로 배우고 익힐 수 있도록 만든 Anki와 Blog의 합성어입니다. 스스로 공부한 것을 정리하여 작은 단위로 쪼개고 꼭 외워두워야할 사항은 Anki로 정리하여 짬짬이 효과적으로 공부를 할 수 있는 좋은 도구입니다.

  

Anki를 충실히 하다보면 하루 2~30분의 시간의 투자로 전문지식을 추구하고 발전할 수 있습니다. 매일매일 적은 량을 스스로의 사정에 맞추어 충실히 나가다보면 지식이 갖추어지고 식견이 생기며 지혜가 발휘되는 변화를 느끼게 될 것입니다.

  

첫 줄은 제목(heading) 요소라면 그 다음부터 나타나는 단락들은 <p> 요소로 묶어주면 되므로 아래와 같이 작성하여 p요소test.html로 저장한다.

  

<!DOCTYPE html>

    

<html lang="ko">

 <head>

   <title>HTML Ankilog</title>

 </head>

 <body>

   <h1>Ankilog란?</h1>

   <p>Ankilog는 Anki를 이용하여 HTML을 효과적으로 배우고 익힐 수 있도록 만든 Anki와 Blog의 합성어입니다. 스스로 공부한 것을 정리하여 작은 단위로 쪼개고 꼭 외어야할 사항은 Anki로 정리하여 짜투리 시간을 활용하여 효과적으로 공부를 할 수 있는 좋은 도구입니다.</p>

   <p>Anki를 충실히 하다보면 하루 2~30분의 시간의 투자로 전문지식을 추구하고 발전할 수 있습니다. 매일매일 적은 량을 스스로의 사정에 맞추어 충실히 나가다보면 지식이 갖추어지고 식견이 생기며 지혜가 발휘되는 변화를 느끼게 될 것입니다.</p>

 </body>

</html>


  

이제 파일을 실행해보면 웹 브라우저에 아래와 같이 나타난다.




추가적으로 <p> 요소는 한 칸 이상의 공백(스페이스, 탭)과 줄바꾸기를 모두 한 칸의 공백으로만 나타내므로 공백과 줄바꾸기에 주의해야 한다. 가령, 다음과 같다.


HTML을 다음과 같이 작성하면

<p>HTML

   Ankilog</p>

   

웹 브라우저에는 다음과 같이 나타난다.

HTML Ankilog

※ 줄바꾸기가 한 칸의 공백으로 나타남


HTML을 다음과 같이 작성하면

<p>괄호 안에 10칸의 공백(         )</p>

   

웹 브라우저에는 다음과 같이 나타난다.

괄호 안에 10칸의 공백( )

※ 10칸의 공백이 한 칸의 공백으로 나타남


HTML을 다음과 같이 작성하면

<p>괄호 안에 2개의 탭(        )</p>

   

웹 브라우저에는 다음과 같이 나타난다.

괄호 안에 2개의 탭( )

※ 2개의 탭이 한 칸의 공백으로 나타남


Anki 파일


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

    

Ankilog 파일:  0013 단락(paragraph)을 정의하는 p요소.apkg




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

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

0015 URL 간략하게 이해하고 연습하기  (0) 2018.11.15
0014 빈요소(empty element) br과 hr  (0) 2018.11.14
0012 제목(heading)의 h요소  (0) 2018.11.12
0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10

HTML 문서의 큰 틀에서 <html> 요소와 <head> 요소 다음에는 <body> 요소가 등장한다. 그리고 이 <body>요소에 중첩되어 들어있는 요소들이 우리가 보는 웹페이지에 실제 나타나는 요소들이다. 하나씩 알아보자.


0012 제목(heading)의 <h> 요소


신문기사에서 볼 수 있는 헤드라인(Headline)이나 글에 붙이는 간단한 소제목 같은 것을 제목(heading) 요소로 묶어서 구조화한다. 사람이 글을 읽을 때도 이러한 제목(heading)들이 도움 되지만 그것보다 검색엔진이 이러한 제목(heading) 요소를 이용하여 웹페이지의 구조와 그 내용을 분류하고 색인화하기 때문에 적절한 제목을 뽑아서 제목(heading) 요소로 묶어주면 검색 엔진이 웹 페이지에서 전하고자 하는 정보를 검색 결과로 적절하게 제시할 수 있게 된다. 

     

제목 요소는 <h1>에서 <h6>까지 6종류가 있다. 


작성 방식은 다음과 같다. (h1만 대표적으로 작성했지만 나머지도 동일하다.)

<h1>내용(content)</h1>


즉, 시작태그와 종료태그 사이에 제목으로 사용할 텍스트를 내용(content)으로 집어넣으면 된다.

    

<h1>이 가장 중요한 메인이고 <h6>로 갈수록 덜 중요하고 지엽적이다.

실무에서는 보통 <h3> 요소까지 사용한다고 한다.

    

우선, 간단하게 아래와 같이 heading_test.html 파일을 만들어 실행해보자.

    

<!DOCTYPE html>


<html>

 <head>

   <title>HTML Ankilog</title>

 </head>

 <body>

   <h1>가장 중요한 h1입니다.</h1>

   <h2>2번째인 h2입니다.</h2>

   <h3>3번째인 h3입니다.</h3>

   <h4>4번째인 h4입니다.</h4>

   <h5>5번째인 h5입니다.</h5>

   <h6>가장 덜 중요한 h6입니다.</h6>

 </body>

</html>


똑같은 파일을 구글의 크롬(Chrome)과 마이크로소프트의 엣지(Edge)로 열어본 것이 아래의 그림이다. 



우선, 두 브라우저 모두 공통적으로 <h1> 요소를 가장 크게 하고 <h6> 요소를 가장 작게 표현하고 있지만 글자 폰트와 글자 크기 등이 다름을 알 수 있다.

    

이는 HTML은 표준화되어도 HTML 문서에서 사용된 요소들을 웹 브라우저가 표시하는 기준은 표준화되어 있지 않아 웹 브라우저들마다 자체적인 기준을 적용하고 있기 때문이다.

    

따라서 동일한 HTML 문서라도 어떤 웹 브라우저로 표시하느냐에 따라서 그 모양이 달라질 수 있다. 이런 차이가 발생하지 않게 하려면 CSS로 글자의 폰트와 크기를 지정해주어야 한다.

    

슬쩍 보기에는 <h> 요소로 내용(content)을 감싸면 글자의 크기가 커지고 굵어지는 효과가 있으므로 그러한 효과를 보기 위하여 <h> 요소를 사용할 수 있다. 하지만 그렇게 하지 않아야할 두 가지 이유가 있다.

     

첫 번째는 그러한 스타일링은 CSS의 영역이고 HTML로 처리하는 것은 적합하지 않다.

두 번째는 요소(element)는 웹 페이지의 구조를 형성하여 정보를 구조화하는 용도이므로 적절하게 사용되어야만 적절하게 검색되어 올바른 정보 이용자와 연결되기 쉽기 때문이다.


Anki 파일


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


Ankilog 파일:  0012 제목(heading)의 h요소.apkg






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

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

0014 빈요소(empty element) br과 hr  (0) 2018.11.14
0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09

0011 <head> 요소와 그 내부에 중첩된 <title> 요소


HTML 문서의 큰 틀에서 <html> 요소 다음에는 <head></head> 요소가 등장한다.

     

<!DOCTYPE html>


<html lang="ko">

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

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

</html>


<head>요소는 HTML 문서에 대한 메타데이터(metadata)를 담고 있는 가장 상위의 요소로써 <head>와 </head> 사이에는 다른 요소들이 중첩(nesting) 되어 웹페이지 관련된 다양한 정보(metadata)들을 웹 브라우저에 제시한다.

     

<head> 요소에 중첩되어 들어올 수 있는 요소는 다음의 6개 요소 뿐이다. 

     

<meta>, <title>, <script>, <link>, <style>, <base>


이 외의 요소들이 <head> 요소 내부에 중첩될 경우 웹 브라우저가 해당 요소를 자동으로 <body> 요소로 옮긴다.



   <head> 요소 내부에 중첩된 <title> 요소


<head>에 중첩되는 요소는 다른 요소들과 같이 설명해야 하므로 차차 제시하고 이번에는 <title> 요소만 사용해보자.

     

<title> 요소는 문서의 제목을 정의하는 요소인데 실제로 어떻게 나타나는지 메모장에서 아래와 같이 작성하고 title요소.html

로 저장한 후 실행시켜보자.

     

<!DOCTYPE html>

    

<html lang="ko">

 <head>

  <title>HTML Ankilog</title>

 </head>

 <body></body>

</html>


어떤 일이 벌어지는가?


① 브라우저 상단의 탭 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.



② 즐겨찾기에 등록될 페이지 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.


③ 마지막으로 검색엔진이 검색결과로 제시하는 페이지 제목을 <title> 요소의 내용인 HTML Ankilog로 표시한다.


즉, <head> 요소 내부의 <title> 요소의 내용은 다음과 같이 반영된다.

     

① 브라우저 상단의 탭 제목

② 즐겨찾기에 등록되는 페이지 제목

③ 검색엔진이 검색결과로 제시하는 페이지 제목


Anki 파일


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


Ankilog 파일:  0011 head 요소와 그 내부에 중첩된 title 요소.apkg








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

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

0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0012 제목(heading)의 h요소  (0) 2018.11.12
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09
0008 HTML 문서유형선언  (0) 2018.11.08

0010 속성(attribute)과 속성 작성방법


속성을 일일이 살펴볼 단계는 아니지만 일단 속성이라는 것이 있고 그것을 어떻게 작성하는지는 알아두어야 추후 속성이 나올 때 당황하지 않을 것 같으므로 미리 정리해두자.

    

다음은 앞에서 배운 <html> 요소에서 속성을 사용한 경우다.

     

<html lang="ko">내용</html>


위의 <html> 요소에서 lang은 속성명이고 ko는 한국어를 의미하는 속성값이다. <html> 요소에 lang 속성을 부여하여 이 문서가 한국어로 작성된 HTML 문서라는 것을 검색엔진에게 드러내고 있다.

      

우선, 속성(attribute)이란 HTML 요소(element)에 추가 정보를 부여하는 것으로 W3C 재단에서 표준으로 정의해 놓은 것을 사용한다. 개발자가 임의로 속성을 만들지 않는다.

      

속성을 작성하는 방법은 다음과 같다. 

    

1) 속성들은 반드시 시작태그에 명시한다.

아래와 같이 종료태그에 속성을 명시하는 것은 잘못된 사용례이다.

<html></html lang="ko">

    

2) 속성들은 보통 속성명="속성값" 형태로 다음과 같이 사용된다.

lang="ko"

title="header"

src="test.png"

※ 속성명 다음에 공백없이 등호(=)가 오고 그 다음에 공백없이 속성값이 오는 것에 주의해야 한다.

※ 속성명은 대소문자와 상관없지만 소문자(lowercase)로 쓰는 것을 권장한다.

※ 속성값은 큰 따옴표로 묶도록 하자. (큰 따옴표가 없어도 되지만 오류가 발생하는 경우가 많아 사용하는 것을 권장한다.)

    

3) 하나의 요소가 여러 개의 속성을 가질 수 있다. 속성과 속성 사이는 공백으로 구분한다. 

여러 개의 속성은 원하는 순서로 임의로 배치할 수 있다.

<태그명 속성명1="속성값1" 속성명2="속성값2" 속성명3="속성값3">내용(content)</태그명>


속성이 기입된 다음 사례들을 살펴보자.

    

<html> </html lang="ko">

→ 속성은 시작태그에 작성

    

<html lang=ko>내용</html>

→ 속성값은 큰 따옴표로 묶는 것을 권장함("ko")

    

<html LANG="ko">내용</html>

→ 속성명은 소문자(lowercase)를 권장함(lang)

    

<html lang ="ko">내용</html>

→ 속성명과 등호(=) 사이에 공백이 없어야 함

    

<태그명>내용</태그명 속성명="속성값"> 

→ 속성은 시작태그에 작성

    

<html lang= "ko">내용</html>

→ 등호(=)와 속성값 사이에 공백이 없어야 함

    

<태그명 속성명1="속성값1"속성명2="속성값2">내용</태그명>

→ 속성들 간은 공백으로 구분되어야 함

    

<html lang = "ko">내용</html>

→ lang과 등호(=) 사이의 공백과 등호(=)와 속성값 사이의 공백이 없어야 함


Anki 파일


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


Ankilog 파일:  0010 속성(attribute)과 속성 작성방법.apkg






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

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

0012 제목(heading)의 h요소  (0) 2018.11.12
0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09
0008 HTML 문서유형선언  (0) 2018.11.08
0007_웹페이지의 기본 구조 및 태그  (0) 2017.12.28

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








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

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

0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0008 HTML 문서유형선언  (0) 2018.11.08
0007_웹페이지의 기본 구조 및 태그  (0) 2017.12.28
0006_태그의 구성방식 살펴보기  (0) 2017.12.26

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로 공부하기 > HTML공부' 카테고리의 다른 글

0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09
0007_웹페이지의 기본 구조 및 태그  (0) 2017.12.28
0006_태그의 구성방식 살펴보기  (0) 2017.12.26
0005_웹페이지의 구조와 태그  (0) 2017.12.22

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


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


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


그리스 문자 암기용 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개의 카드를 만든다.


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


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

드라마가 결국 언어적 구조물이라는 것을 깨닫게 되니 많은 것들이 설명되기 시작한다. 앞서 이 모든 이야기가 출발했던 의문점을 제시한 바 있다. 미국 드라마를 자막 없이 보다가 생긴 의문점에서 출발함이라는 포스팅에서 처음으로 제시했던 질문들이다. 이 포스팅에서는 거의 외우다시피 할 만큼 자주 봤던 미국 드라마를 자막 없이 봤는데 전부 외우고 있던 드라마의 스토리는 전혀 생각나지 않고 거의 들린다고 여겼던 영어는 전혀 들리지 않으면서 드라마는 완전히 낯설었던 경험을 말하면서 발생한 의문들을 다음과 같이 질문했었다. 


거의 외우다시피 해서 익숙했던 드라마 에피소드가 왜 이리 낯설게 느껴찌는가?


그리고 잘 들리던 영어가 왜 갑자기 안 들리게 되는 것인가?


마지막으로 영어가 안 들리는데 어째서 각각의 장면과 등장인물에 대한 공감은 더 강해지고, 반대로 익숙하던 스토리는 갑자기 조각나서 서로 연결되지 않는가?



이 모든 것의 대답은 처음부터 명백하고 단순했다. 바로 언어의 부재가 바로 그 답이다. 하지만 위의 질문들은 언어의 부재를 통하여 언어가 어떤 역할을 했는지를 알고 싶었던 것이기 때문에 이 대답은 좀 더 심화될 필요가 있다. 


자막과 함께 드라마를 봤을 때, 인식구조는 자막에서 영상과 소리로 넘어간다. 즉, 자막을 먼저 확인하고 그 확인된 자막의 내용을 영상이나 소리와 일치하는지 확인한다. 자막이 말소리와 동기화(sync)가 맞지 않을 때, 드라마를 보기가 얼마나 불편한지 느껴봤다면 이를 실감할 수 있을 것이다. 자막이 말소리와 동기화가 되면 그 때부터는 자막의 내용이 하나의 언어적 구조물로써 작동하면서 이야기가 성립되고 드라마의 말소리와 영상은 그 이야기에 실제감과 몰입감을 부여한다. 반면, 언어를 직접 들으면서 보는 드라마는 영상을 보는 와중에 소리를 듣기 때문에 영상과 소리가 동시에 존재한다. 이 경우 소리가 언어적 구조를 형성하고 이 언어적 구조는 영상과 동시에 인지된다. 자막이 있는지 없는지에 따른 차이는 결국 정보량의 차이로 이어진다. 자막과 함께 보는 경우는 자막을 먼저 확인하기 때문에 주요 영상의 누락이 축적되고 영상을 길고 세세하게 살펴볼 시간이 부족하다. 또, 말소리에서 직접 전달될 수 있는 억양과 발음에 따른 미묘한 감정 표현, 그 캐릭터의 출신지역이나 성장환경 등에 대한 직접적인 느낌 등이 모두 사라지고 그저 자막으로만 나타나게 된다. 이는 조금 과장되게 말하면, 자막으로 드라마를 보는 것은 시나리오에 영상과 배우의 목소리를 첨부하면서 글을 읽는 것과 같고 자막 없이 보는 것은 입체적인 공감을 통하여 충실하게 이야기에 몰입하는 것이 된다.


잘 들린다고 생각했던 영어들은 주로 짤막한 대사들인데 이들이 잘 들린다고 생각했던 이유는 자막 읽기에 숙련되었고 그 자막을 거의 통째로 외우다시피 했기 때문이다. 자막이 머릿속에 해당 언어의 뜻을 이미 전개시켜 놓았고 그 다음 대사를 듣게 되거나 혹은 대사를 듣는 동시에 자막을 확인하기 때문에 그것을 사후적으로 안다고 생각한 것이다. 이는 대사의 길이로도 확인해볼 수 있었는데, 단어의 개수가 한 두 단어일 때는 자막과 배우의 대사를 일치시킬 수 있기 때문에 이를 영어가 들린다고 생각하지만 대사의 길이가 늘어나면 영어는 무시하고 자막만 보게 된다. 그리고 그렇게 자막을 보는 동안은 영상도 보지 못하게 된다. 여하튼, 자막을 통해 영어를 들을 수 있다는 인식의 오류가 생긴 것이기 때문에 자막이 사라진 순간 잘 들린다고 착각했던 영어 안 들리게 되는 것이다. 


자막이 없어져서 영어가 들리지는 않게 되었지만 오히려 직접 드라마의 영상을 눈으로 보고 대사를 듣게 된다. 자막이 있었을 때는 자막이 들어야할 것과 보아야할 것을 가이드 해주었지만 동시에 보고 듣는 것에 할애할 시간을 빼앗고 해석의 방향을 미리 제시하기 때문에 주마간산 하는 식으로 드라마를 보게끔 했다. 자막이 없기 때문에 오히려 날 것으로 영상과 소리를 직접 해석하게 되는 것이다. 당연히 풍부한 비언어적 표현들이 자연스럽게 인식되고 그로 인하여 공감이 이루어진다. 하지만 이러한 공감은 언어로 인식되지 못했기 때문에 종합적인 인지를 구성하지 못하고 단지, 각 장면에서 제공하는 다양한 정서적 요소나 캐릭터에 대한 미묘한 공감과 애정으로만 남게 된다. 대사와 같은 언어의 형태로 전달되고 공감되지 못한 그러한 인지들은 매우 제한적인 역할을 하기 때문에 이들은 기억하기도 쉽지 않고 기억을 환기하기도 쉽지 않으며 접한 정보를 가공하여 새로운 정보를 만들기도 쉽지 않다. 따라서 자막 없이 모르는 언어의 드라마를 시청한 느낌은 현저하게 느낀 장면과 정서 몇 가지로 축약되고 하나의 이야기로 성립하지 않는다. 


게다가 드라마가 현실과는 달리 언어적 구조물이기 때문에 언어적으로 인식되는 정황을 통하여 이야기의 영상과 소리가 시공간을 도약하면서 정신없이 변화하기 때문에 언어가 없을 경우 시청자를 고통스럽게 만든다. 언어가 영상과 소리의 널뛰기를 매개해서 드라마를 성립시켜 주는 것인데 그러한 언어를 알아듣지 못하고 자막도 사용하지 않으면 드라마가 하나의 연속체가 아니라 전혀 상관없는 것들의 일관성 없는 묶음 같은 것이 되기 때문에 하나의 이야기로 성립되는 것은 더 어려워진다. 이에 대해서는 고통의 원인에 대해서 포스팅한 것을 참조하기 바란다.


결국, 일련의 실어증 체험으로 자막 없이 미국드라마를 본 것에 대한 의문점은 모두 풀었다. 실어증을 체험하는 것에는 실패했고, 드라마를 자연관찰하듯이 보는 것도 실패했다. 하지만 이런 체험을 통해서 그 동안 이론적으로 듣기만 했던 다양한 것들을 실제 체험으로 확인할 수 있는 좋은 계기가 되었고 자막을 통해서 어떻게 드라마를 보고 있는지도 명확하게 알게 되었다. 다음에는 이 경험을 바탕으로 체감하게 된 '언어'에 대해서 이야기해볼 생각이다. 

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

'정리되지 못한 이야기들....' 카테고리의 다른 글

언어가 구사되는 법 02-대응하는 의미 찾기 과정  (0) 2018.10.11
언어가 구사되는 법 01-자막과 영상  (0) 2018.10.09
실어증 체험 도전기-05-자막과 함께 드라마 보기  (0) 2018.09.29
실어증 체험 도전기-04-고통의 원인  (0) 2018.09.25
실어증 체험 도전기-03-딱따구리  (0) 2018.09.21

+ Recent posts

티스토리툴바