06. HTML 태그(Tag) 종류 및 성격

qpress 2020년 2월 20일 34

이 글에서는 HTML 태그를 직접 사용해 보면서 태그의 종류와 성격에 대해 알아 보겠습니다. HTML 개념에 대한 사전 이해가 필요하니 처음 보시는 분들은 앞 글들을 참고해 주시기 바랍니다.

See the Pen HTML Tag Sample by Andy Jung (@Samchogo) on CodePen.

Display 속성

위 예제에서 가장 기본적이면서 자주 사용되는 HTML 태그 몇개를 사용했습니다. HTML 태그에는 중요한 속성 하나가 있습니다.
바로 ‘영역’과 ‘배치’에 관련된 ‘Display’ 속성 입니다.
HTML을 제대로 이해하거나 작업을 하려면 이 속성은 반드시 이해해야 하는 속성입니다.

display:block 속성은 별도로 넓이를 지정하지 않아도 소속된 공간에서 100% 넓이를 차지 합니다.
display:inline 속성은 일반적인 Text 배열 처럼 취급되어 라인에 배열됩니다.

Display 속성은 정보의 배치, 화면의 레이아웃 등에 아주 많이 사용되어 집니다. 위의 예제 코드를 보면 크게 block 속성을 가진 요소와 inline 속성을 가진 요소로 나눌 수 있습니다.

Block : div, h1~h6, p
Inline : a, span, button

Display 속성은 아래와 같이 CSS를 사용하여 그 속성을 변경 할 수 있습니다.

<div style="display:inline">..</div>

수많은 HTML 태그가 존재하고 각각의 성격과 용도도 다양하지만 크게 Display 속성으로 구분하여 이해하는 것이 가장 쉬운 이해 방법입니다.
display:block 속성을 가진 태그는 아래와 같습니다.(나머지 태그는 모두 inline 속성을 가집니다.)

<address> <article> <aside> <blockquote> <canvas> 
<dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> 
<footer> <form> <h1>-<h6> <header> <hr> <li> <main> 
<nav> <noscript> <ol> <p> <pre> <section> <table> 
<tfoot> <ul><video>

Display 속성에 대한 자세한 w3cschool의 자세한 설명도 참고 하기 바랍니다.
https://www.w3schools.com/html/html_blocks.asp

태그의 Default Styles

각 태그는 작성자가 별도로 Style을 지정하지 않아도 기본적으로 가진 Style들이 있습니다. 제목을 표시할 때 사용하는 h1-h6의 경우는 각 숫자에 따라 다른 글자 크기를 나타내게 되어 있고, 위 아래 여백이 있습니다. 문단에 사용하는 p 태그는 문단 구분을 위해 아래에 여백이 있습니다.

아무런 스타일이 적용되어 있지 않은 완전히 공백의 성격을 가진 태그가 ‘div’ 태그입니다. 아무런 스타일이 없기 때문에 작성자가 편하게 원하는 스타일을 적용할 수 있습니다. 특히, 여백과 간격이 없어야 편리한 레이아웃 또는 그리드 구성에 이용하기 편하기 때문에, HTML 문서에서 가장 많이 보이는 태그이기도 합니다.

링크 태그(a)

Hyper Text 라는 HTML의 성격상 가장 중요한 태그가 바로 ‘a’ 태그입니다. 클릭하면 다른 페이지로 넘어가는 링크에 사용되는 태그 이기 때문입니다.

구글 등의 검색 엔진은 특정 사이트가 다른 사이트에 많이 링크되어 있을 때 가치있는 사이트로 판단하고 상위에 노출 시킵니다. 그래서 인터넷 마케팅 관련 업종에 종사하는 분들도 이 a 태그 정도는 필수적으로 알고 있어야 합니다.

<a href="연결할 URL" target="_blank">...</a>

코드를 보면 쉽게 이해가 될 수 있습니다. target 속성은 클릭시 새로운 탭 또는 창을 띄울 것인가를 결정하는데, target을 설정하지 않으면 기본적으로 현재 화면이 전환되고, ‘_blank’로 설정하면 새창이 뜨면서 URL을 불러옵니다.