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 2.0 유저 매뉴얼을 번역한 문서입니다.


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


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


 


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




Cards and Templates

 

 

 

 Newlines(줄바꾸기)

 

 

템플릿에 사용되는 언어에는 새로운 행을 작성하는 특수 명령이 필요하다.

 

예를 들어, 템플릿에 다음과 같이 쓴 경우 :

 

one

two

 

미리보기에서는 실제로 다음과 같이 나타난다.

 

one two

 

 

 행을 추가하려면 다음과 같이 행 끝에 <br> 코드를 추가해야 한다.

 

one<br>

two

 

br 코드는 "(line) br(eak)"를 의미한다.

 

 

필드도 마찬가지이다.

 

각 행에 하나씩 두 개의 필드를 표시하려면 다음과 같이 작성하면 된다.  

 

{{Field 1}}<br>

{{Field 2}}

 

 

 

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



+ Recent posts