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





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






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








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






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







007_웹페이지의 기본 구조 및 태그

 

HTML로 만드는 웹페이지의 가장 기본적인 구조는 아래와 같이 헤드(head)와 본문(body)이라는 구조로 이루어진.


<html>

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

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

</html>

 

우선 <html></html> 사이에 있는 것은 HTML로 작성된 것이라는 점을 웹브라우저에게 알려준다.


그 다음으로는 나타나는 <head> </head><body> </body>의 두 태그는 HTML 문서가 헤드(head)본문(body)이라는 구조로 만들어진 것을 알려준다.


<head></head> 사이에 있는 내용들은 웹페이지 관련된 다양한 정보를, <body></body> 사이에 있는 것들은 웹페이지의 내용을 의미한다.

 



Anki 학습파일 : 0007_웹페이지의 기본 구조 및 태그.apkg







0006_태그의 구성방식 살펴보기

 

태그는 보통 아래와 같은 방식으로 작성된다.


 

<태그명>시작태그, </태그명>종료태그라고 부르며 둘이 앞뒤로 내용(contents)을 둘러싸고 있고 이를 통틀어 요소(element)라 부른다.

 

요소(element) = 시작태그 + 내용(contents) + 종료태그


종료태그는 시작태그에 /(슬래쉬)를 첨가한 것

 


Anki 학습파일 : 0006_태그의 구성방식 살펴보기.apkg









0005_웹페이지의 구조와 태그


웹페이지의 구조라는 것은 제목, 머리말, 문단 등을 말한다.


0005_웹페이지의 구조와 태그

 

라고 이 블로그 페이지의 제목이 단순히 내부에 아무렇게나 적혀있는 글이 아니라 이 페이지의 전체 내용을 함의하는 제목이다


본문의 내용과 제목은 그 가치와 목적이 조금 다르므로 이러한 제목은 단순히 쓰여진 글이 아니라 제목이라고 웹브라우저에게 제시해주어야 한다.

 

그럼 그것을 어떻게 제시할까?

 

꺽쇠괄호(bracket)로 둘러쌓인 태그(tag)를 제목의 앞뒤로 달아서 해당 내용이 제목임을 명시한다.


<제목> 0005_웹페이지의 구조와 태그 </제목>


 

, HTML은 태그(tag)를 이용하여 웹페이지의 구조를 웹브라우저에게 제시한다.

 


Anki 학습 파일 : 0005_웹페이지의 구조와 태그.apkg







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


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


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


 



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



 Exporting(내보내기)

 

 

내보내기(export)를 사용하면 컬렉션의 일부를 텍스트 파일 또는 패키지로 묶은 Anki 카드뭉치 파일로 내보내 별도로 저장할 수 있다.

 

내보내기(export)를 하려면 메인 메뉴에서 파일 내보내기를 클릭하면 된다.

 

 

 

 

 

 

Exporting Text(텍스트 내보내기)

 

 

내보내기(export)를 클릭하면 내보내기 대화상자가 다음과 같이 나타난다.

 

 

 

 

"텍스트 파일로 정리한 노트(*.txt)"를 선택하면, Anki는 노트의 내용을 텍스트 파일에 작성한다.

 

아래는 기본 카드뭉치의 노트들을 "텍스트 파일로 정리한 노트(*.txt)"로 내보내기한 결과이다.

 

 

각 필드는 으로 구분되어 표시된다.

 

내보내기로 만든 결과 파일을 편집하되 첫 번째 필드만 수정하지 않으면 나중에 해당 파일을 Anki로 다시 가져올 수 있으며 Anki는 동일한 노트 유형으로 다시 가져올 경우 편집된 내용을 기반으로 노트를 업데이트 한다.

 

 

첫 번째 필드를 수정해야하는 경우가 발생하면 노트 유형의 형식을 변경할 필요가 있다.

 

즉, 첫 번째 필드에 실제 텍스트를 넣는 대신에 ID 넘버를 넣어 실제 내용의 수정과 상관없이 해당 노트의 고유한 ID를 통해서 업데이트가 될 수 있도록 변경할 필요가 있다. ("노트 ID 추가" 플러그인을 설치하면 쉽게 할 수 있다.)

 

내보내기 한 텍스트 파일은 추후 서식을 유지한 채로 텍스트를 다시 가져올 수 있도록HTML 서식이 모두 포함 된 상태로 내보내진다.

 

 

 

Exporting Packaged Decks(카드뭉치 묶음 내보내기)

 

 

카드뭉치 묶음은 카드, 노트, 노트 유형과 사운드나 이미지 등이 모두 .apkg 파일로 묶인 것이다.

 

카드뭉치 묶음을 생성하여 다른 사람들과 묶음을 교환할 수 있고 혹은 컬렉션의 일부를 백업할 용도로 사용할 수 있다.

 

카드뭉치 묶음은 압축되어 있으므로 프로필 폴더에 있는 파일의 전체 용량의 합계보다 당연히 작다.

 

카드뭉치 묶음에는 두 종류가 있다.

 

 

Collection Package(컬렉션 묶음)

 

모든 카드뭉치를 해당 학습 일정을 포함하여 내보낸 카드뭉치 패키지를 컬렉션 패키지라고 한다.

 

Anki는 전체 컬렉션을 "collection.apkg"라는 파일로 복사 한 다음 바탕 화면에 저장한다.

 

컬렉션 패키지를 이용하여 컬렉션을 백업하거나 다른 장치에 복사할 수 있다.

 

 

이 파일을 나중에 가져오기(import) 하면 Anki는 컬렉션에있는 모든 현재 카드를 삭제하고 컬렉션을 collection.apkg 파일로 바꾼다.

 

컬렉션 묶음으로 내보내기는 컬렉션을 여러 장치에 이리저리 옮길 때 유용하다.

 

 

<주 의>

 

collection.apkg를 가져올 때 컬렉션의 기존 미디어는 삭제되지 않고 남는다.

 

이렇게 남은 사용하지 않는 미디어를 삭제하려면 메인 메뉴에서 도구 미디어 검사를 이용하면 된다.

 

 

<주 의>

 

Anki자동 백업도 컬렉션 묶음이다.

 

컬렉션 묶음 파일을 더블 클릭하는 간단한 행위로 백업으로 복원 할 수 있다.

 

 

 

 

Deck Package(카드뭉치 묶음)

 

카드뭉치 묶음은 단일 카드뭉치 및 해당 카드뭉치의 하위 카드뭉치가 들어 있다.

 

파일 이름은 .apkg로 끝나지만 파일 이름은 collection.apkg가 아니다.

 

카드뭉치 묶음을 가져오기(import) 할 때, Anki컬렉션을 덮어 쓰지 않고 컬렉션에 해당 내용을 추가한다.

 

 

카드뭉치 묶음의 일부 노트가 기존에 이미 가져오기(import) 된 경우 Anki가장 최근에 수정된 버전으로 유지한다.

 

따라서 최근에 수정 업데이트한 카드뭉치를 다운로드하여 가져오면 업데이트 된 버전에서 수행된 편집 내용이 컬렉션에 그대로 반영된다.

 

하지만 컬렉션에서 최근 수정 작업한 후에 변경되지 않은 카드뭉치를 다시 가져오기(import) 할 경우 컬렉션에서 최근에 수정된 내용은 변경되지 않는다.

 

 

내보내기 할 때 학습 일정을 포함하지 않도록 하면 Anki는 카드뭉치가 다른 사람과 공유되고 있다고 가정하고 별표 표시 태그거머리 태그를 제거한 깨끗한 복사본을 내보낸다.

 

 

 


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



+ Recent posts