HTML 태그 기본 분류 - 블록요소 인라인요소

티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니다. 따라서 백업할 공간이 필요합니다. 제 티스토리를 지식 백업 저장소로 다시 한 번 본격적으로 활용하기로 마음을 먹었습니다. 사소한 것 부터 하나 하나를 모두 다 기록할 것입니다. 이번 카테고리는 HTML에 대해서입니다. 웹문서에 대한 기본 강좌를 시작해 보겠습니다.

 

티스토리와 함께 배우는 HTML

소제목을 이렇게 정해봤습니다. 아무래도 제 블로그에는 티스토리와 관련된 내용이 많이 있습니다. 더불어 스킨 수정에 대한 내용도 좀 있습니다. 하지만 HTML에 대한 지극히 기본적인 내용에 대해서는 언급한적이 없더군요. 그러므로 차근 차근 HTML 태그에 대한 기본 개념을 한번 안내해 드리려고 합니다.

 

요소에 대하여

HTML은 Hyper Text Markup Language의 약자로 직역하면 하이퍼 텍스트 마크업 언어라고 해석할 수 있겠습니다. 일반적인 문서와 HTML문서와의 큰 차이점은 바로 링크의 유무입니다. 오프라인 책에서는 링크가 없습니다. 하지만 온라인 문서에는 파란색 글씨에 밑줄이 그어진 형태의 텍스트를 쉽게 만나볼 수 있는데 그것이 바로 링크라는것을 다들 아실겁니다. 이 링크가 큰 차이점이라고 보시면 됩니다.

 

링크는 <a>태그를 사용합니다. a는 Anchor(앵커)의 약자이며 단독으로 사용되지는 않고 href라는 속성을 함께 사용합니다. 이러한 HTML 태그를 한글로 요소라고 부르기도 합니다. 즉 태그=요소라고 생각하시면 됩니다.

 

블록 요소

여러분들, 레고 아시나요? 네. 그 레고 맞습니다.

 

출처 : 구글 이미지 검색

레고하면 보통 이런 이미지죠? 레고를 블록이라고도 부르는데 딱 보시면 블록이라는 느낌이 어떤건지 아시겠나요? 블록이라함은 일단 사각 형태의 크기를 가지고 있는것이 기본 특징이라고 할 수 있습니다. 바로 이런 특징을 가진 태그(요소)를 블록요소라고 정의합니다. 블록요소의 성격을 갖는 태그들은 일반적으로 다음과 같습니다.

 

<p>, <div>, <ul>, <ol>, <li>, <h1~6>, <header>, <nav>, <footer>, <section>, <article>, <aside>, <table>, <figure>, <figcaption> 등등...

 

이 밖에도 블록 요소는 더 있을 수 있습니다. 다시 한 번 말씀드리지만 블록요소는 크기값을 기본적으로 가지고 있다는게 특징입니다. 아래에 <p>태그를 사용한 예시를 보면서 추가 설명을 하겠습니다.

 

안녕하세요. 친절한효자손입니다.

 

지금 보시면 백그라운드를 빨간색으로 채워넣은 모습입니다. 블록요소이기 때문에 친효스킨의 본문 가로 크기만큼 100% 꽉 채워졌습니다. 또한 세로는 「안녕하세요. 친절한효자손입니다」라고 작성한 글씨 만큼의 높이가 사용되었습니다. 이것이 블록 요소의 특징입니다. 따라서 블록 요소가 연속적으로 사용되면 무조건 세로로 쌓입니다. 마치 테트리스 블록이 차곡차곡 쌓이는 것처럼요. 가로로 배치가 되지 않는다는 부분입니다. 가로로 배치하기 위해서는 CSS에서 태그의 요소를 변경해야만 합니다.

 

위의 이미지는 지금 이 글을 작성중인 상황에서 크롬 개발자툴을 사용해 태그 상태를 확인한 것입니다. 보시면 <p>태그들이 꾸준히 쌓여있음을 확인할 수 있습니다. <p>태그 안에 사용자가 작성하는 텍스트가 들어가 있는 형태입니다. 블록요소의 기본값인 가로 100% 크기 때문에 text-align: center;같은 중앙정렬 CSS가 먹히지 않습니다.

 

인라인 요소

위에서 블록요소에 대해 설명을 드렸으니 이제는 약간 경쟁 구도에 있는 인라인요소라는것을 알아야 할 필요가 있습니다. 경쟁하는 요소이다보니 속성도 살짝 반대입니다. 완전 100%는 아니구요. 블록요소는 크기가 있다고 말씀드렸습니다. 또한 세로로 쌓이는 형태라고도 언급했지요. 인라인은 반대입니다. 크기가 없습니다. 또한 가로로 배치가 됩니다. 인라인요소의 성격을 갖는 태그들은 다음과 같습니다.

 

<a>, <span>, <b>, <em> 등등...

 

블록요소에서 설명을 위해 사용했던 문구를 인라인요소를 사용해 한번 더 작성해 보겠습니다.

 

안녕하세요. 친절한효자손입니다.

 

위의 문장은 <p>태그 대신 <span>태그를 사용한 상태입니다. 보시면 가로 100%가 아닌, 사용된 텍스트까지만 빨간색 백그라운드가 적용되었음을 확인할 수 있습니다. HTML에서 인라인요소를 가장 흔하게 사용하는 방식 중 하나가 텍스트 꾸러미 중 특정 단어만 굵게 표현한다던지, 백그라운드 색상을 넣는다던지 하는 부분입니다. 친효스킨에서도 인라인요소는 적극 사용중인데 대표적으로 본문의 형광펜 표시 애드온입니다. 여기에 사용된 태그는 바로 <b>태그인데 Bold의 약자입니다. 즉 텍스트를 두껍게 처리하는 것입니다. 친효스킨에서는 이것을 두꺼운 글자 표현 대신 백그라운드 색이 적용되도록 설정해둔 상태인 것이구요. 인라인 요소는 text-align: center;와 같은 CSS 코드로 쉽게 중앙정렬이 가능합니다.

 

인라인-블록 요소

마지막으로 블록요소와 인라인요소가 적절히 섞인 상태의 태그입니다. 사실 가장 다루기 쉬운 태그라고 보시면 됩니다. 인라인 블록 요소는 크기가 있습니다. 동시에 가로로 쌓입니다. 때문에 CSS 제어가 매우 쉽습니다. 인라인 블록 요소의 성격을 가진 태그는 다음과 같습니다.

 

<img>, <input>, <button> 등등...

 

<img>태그는 티스토리에서도 정말 많이 사용하는 요소입니다. 특히 사이드바에 배너를 수동 설치 시 배너 이미지로 사용하는 1순위 태그입니다. 기본적으로 이미지는 크기를 갖고 있습니다. 큰 이미지도 있으며 작은 이미지도 있습니다. 본문보다 작은 사이즈의 이미지 경우라면 가로로 배치가 가능합니다. 만약 본문의 가로 사이즈는 1000px인데 이미지 가로 사이즈가 300px이라면 3개까지는 가로로 배치가 되고 4개째부터는 아랫줄로 내려갑니다. 다음 시간에는 이런 요소들의 속성을 바꿔주는 CSS에 대해서도 한번 다뤄보도록 하겠습니다. 끝.