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





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




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








+ Recent posts