HTML 강좌, 3장, HTML 문서를 이루는 기본 요소, href, src, alt 속성 의미

이번 포스팅은 HTML 강좌 3장이며, 본격적으로 시작하기에 앞서 HTML 문서를 이루는 기본적인 요소(heading, paragraph, link, image)들을 예제를 통해 알아보는 시간을 갖도록 하겠습니다.

HTML 기본 예제

HTML에 대해 전혀 모르는 초보님들 가운데 이번 강좌에 사용되는 예제들에서 아직 배우지 않은 태그들이 나오더라도 당황하지 마세요.

그러한 것들은 이후 강좌들에서 차차 배우게 될 것들이니 지금은 그냥 넘어가셔도 됩니다.

이번 강좌의 목적은 HTML 문서를 이루는 기본적인 요소들을 살펴보는 것이라는 것을 잊지 마세요.

<!DOCTYPE html>
<html>
<body>

<h1>여기는 머리말(heading) 내용입니다.</h1>
<p>여기는 단락(paragrahp) 내용입니다.</p>

</body>
</html>

모든 HTML 문서들은 위 예제처럼 <!DOCTYPE html>이라는 document type 선언으로 시작해야 합니다.

HTML 문서 자체는 <html>로 시작해서 </html>로 끝나며, 문서에서 우리가 볼 수 있는 부분은 <body>와 </body> 사이의 내용입니다.

HTML 머리말(heading)은 <h1> 태그에서 <h6> 태그까지 6가지가 있습니다.

가장 중요한 머리말은 <h1> 태그를 사용하며, <h6> 태그는 가장 덜 중요한 머리말에 사용합니다.

브라우저에 표시되는 글자 모양을 보면 굵고 가장 크게 표현되는 것은 <h1>이며, <h6>으로 내려갈수록 점점 작게 표현되는 것을 볼 수 있습니다.

참고로, 글자 크기는 완벽히 똑같지는 않지만 <h1>부터 <h6>까지 순서대로 32px, 24px, 19px, 16px, 13px, 11px 정도 크기와 거의 비슷합니다.

HTML 단락(paragraph)은 <p> tag로 정의됩니다.

HTML 링크(link)는 <a> tag로 정의되며, 흔히 다른 웹 페이지나 위치로 연결하고자 할 때 사용됩니다.

<a href=”https://googlinfo.com”>이것이 링크입니다.</a>

위 예제에서 <a> 태그 안에 href(Hypertext REFerence)라는 속성(attribute)이 추가되어 있는 것을 볼 수 있는데요.

이 속성이라는 것은 HTML element들에 대한 부가적인 정보를 제공하는데 사용됩니다.

무슨 말이냐면, href attribute는 <a> 태그로 정의된 링크의 목적지가 https://googlinfo.com이라는 것을 알려준다는 것이죠.

HTML 이미지(image)는 <img> 태그로 정의되며, 웹 페이지에 그림을 표시하고자 할 때 사용됩니다.

위 예제를 보면 <img> tag 안에 src, alt, width, height 같은 여러 가지 속성들이 사용된 것을 볼 수 있을 거에요.

여기서 src는 source file을 의미내고, alt는 alternative text를 의미합니다.

브라우저가 이미지 로딩 실패 등 여러 가지 이유로 웹 페이지에 그림을 표시하지 못하게 되었을 경우 대체 텍스트로 사용된 문구가 웹 페이지에 표시되게 됩니다.

즉, 위 예제의 경우는 웹 페이지에 test.jpg라는 이미지를 표시하지 못할 경우 test라는 대체 텍스트를 대신 표시하게 된다는 말입니다.

참고로 <img> 태그는 start tag만 존재할 뿐 </img> 같은 end tag는 사용하지 않습니다.

이번 HTML 3장 강좌는 여기까지 하도록 할께요. 그럼 좋은 하루 되시고 다음 4강 강좌에서 다시 뵙도록 하겠습니다.