▣ 실행 결과
이번부터 다루는 내용은 <body> 태그 내에서 자주 사용되는 필수적이고 기본적인 태그들과 그 속성에 관한 것입니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다. 아직 CSS 부분이 없어 세련되지는 않지만 다음의 내용들을 차근차근 살펴보고 나서 직접 실습해보길 바랍니다.
<!-- Headings -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>□ 주석 태그(Comments)
<!-- --> 태그는 소스 코드(Source code) 중간에 주석을 작성하여 넣고자 할 때 사용하며, 브라우저에서는 보이지 않습니다. 이후에 코드를 업데이트하거나 수정해야 할 경우 유용한 도움이 될 수 있도록 코드에 대하여 설명하는 것은 코드의 양이 많아질수록 반드시 필요한 작업입니다.
□ 주제 태그(Headings)
<h1>에서 <h6>에 이르는 태그를 의미하며, 이 때 숫자는 단순히 글자의 크기를 구분하는 용도가 아니라, 태그 내의 텍스트 내용(Contents)이 가지는 중요도를 의미합니다. <h1> 태그는 가장 중요한 내용을 포함하고, 숫자가 커질수록 중요도가 낮아집니다. 그렇다고 무조건 <h1> 태그를 남발하는 것은 구조적으로 좋지 않은 HTML 문서가 되는 것이므로 반드시 <h1> 태그를 사용한 후에 <h2>, 그리고 다음은 <h3> 태그를 단계적으로 사용하는 것이 중요합니다.
<!-- Paragraphs : Strong(Bold Type), Emphasis(Italic Type), Delete, Line Break-->
<p>Lorem ipsum <strong>dolor sit amet</strong> consectetur adipisicing elit.
Necessitatibus, ipsum.</p>
<p>Lorem ipsum <em>dolor sit amet</em> consectetur adipisicing elit. Molestiae
dolor reiciendis <del>tenetur amet nulla</del> maiores quos optio animi
recusandae, dolorum aspernatur delectus tempore.<br> Rerum voluptatum error
veritatis quo delectus aut?</p>□ 단락 태그(Paragraphs)
<p> 태그는 주로 주제 태그 다음에 위치하여 본문의 문단을 작성하는 용도로 사용되며, <p> 태그와 <p> 태그 사이에는 자동으로 한 개의 빈 줄이 생성됩니다.
□ 강조 태그1(Strong tag)
<strong> 태그는 단락 내용 중 특히 중요한 부분을 굵은 글자(Bold type)로 바꾸어 줍니다.
※ 굵은 글자로 바꾸어 주는 효과를 위해 과거에는 <b> 태그를 사용하기도 했지만, 최근에는 거의 사용하지 않습니다. 그 이유는 소위 말하는 의미론적 태그(Semantic tag)가 아니기 때문입니다. 단편적인 설명을 덧 붙이자면, 웹 페이지나 문서를 로봇(Robot) 또는 가상 머신(Virtual machine)이 분석할 때 <b> 태그보다 <strong> 태그를 의미 있는 데이터로 수집합니다. 의미론적 태그에 대해서는 향후에 더 설명하겠습니다.
□ 강조 태그2(Emphasis tag)
<em> 태그는 단락 내용 중 강조하고 싶은 부분을 이탤릭체(Italic type)로 바꾸어 줍니다.
※ 비의미론적 태그인 <i> 태그를 사용하기도 하지만 <b> 태그와 마찬가지로 권장하지 않습니다.
□ 삭제 표시 태그(Delete tag)
<del> 태그는 텍스트 위에 삭제 표시 줄을 생성합니다.
□ 줄 바꿈 태그(Line break)
단락 태그 내에서 엔터키를 눌러도 브라우저에서는 줄 바꿈이 이루어지지 않습니다. 이때 <br> 태그를 이용하여 줄 바꿈을 할 수 있습니다. 그리고 <br> 태그는 끝 태그(</br>)가 없습니다.
※ HTML5에서는 별도의 끝 태그(닫는 태그)가 없을 경우, 시작 태그(여는 태그)만 사용하거나 스스로 닫는 태그(Self closing tag)의 형태로 사용합니다. 하지만 XML의 경우에는 반드시 스스로 닫는 태그의 형태나 끝 태그를 사용해야 합니다.
<!-- HTML5 -->
<br>
<br />
<!-- XML -->
<br />
<br></br>
<!-- Horizontal Rule -->
<hr>□ 수평선 태그(Horizontal rule)
<hr> 태그는 문서 가운데 한 개의 줄을 생성합니다. <hr> 태그도 끝 태그(</hr>)가 없습니다.
<!-- External Link -->
<a href="http://google.com">Click for Google</a><br>
<a href="http://google.com" target="_blank" rel="noopener noreferrer">Click for Google in new tab</a>
<!-- Internal Link -->
<p>
<a href="../TIL0/index.html">Heading and Paragraph</a><br>
<a href="../TIL0/index.html" target="_blank" rel="noopener noreferrer">Heading and Paragraph in new tab</a>
</p>□ 앵커 태그(Anchor tag)
<a> 태그는 HTML 문서의 가장 중요한 하이퍼링크(Hyperlink) 기능을 구현할 수 있게 해 주며, href 속성을 통해 웹 페이지와 웹 페이지를 연결해 주는 역할을 합니다. href 속성의 값으로 URL주소를 설정하면 다른 외부 웹 사이트와 연결되며, 파일 경로를 설정하면 내부 페이지로 연결됩니다. 이외에 target, rel 속성의 값을 설정하여 브라우저의 새로운 탭에서 링크를 열 수 있습니다.
<!-- Local Image -->
<img src="images/sample.jpg" alt="my-image" width="200"><br>
<!-- Remote Image -->
<img src="https://source.unsplash.com/1600x900/?nature,water" alt="my-image2" width="300">□ 이미지 태그(Images)
<img> 태그는 외부 웹 사이트나 내부 경로에 존재하는 특정 이미지를 웹 페이지와 연결해 주는 역할을 합니다. 즉, 링크된 이미지가 웹 페이지에 직접 삽입, 저장되는 것이 아니라 <a> 태그의 링크를 클릭하면 다른 웹 페이지로 이동하듯이 <img> 태그로 연결된 이미지는 웹브라우저를 통해 마치 현재 웹페이지에 있는 것처럼 보입니다.
src 속성의 값은 외부 또는 내부의 이미지 경로로 설정되며, alt 속성의 값은 이미지가 보이지 않을 때 대신 나타나는 텍스트입니다. 뿐만 아니라 width나 height 속성으로 보이는 이미지의 크기를 조절할 수도 있는데, 제공되는 이미지의 크기를 특정하지 않으면 경우에 따라 이미지가 로딩되는 동안에 깜빡거림이 발생할 수도 있습니다.
코딩 실습은 결과물이 완전히 일치하지 않더라도 처음부터 끝까지 소스코드를 보지않고 최대한 비슷하게 만들기 위해 노력하는 과정을 통해 손으로 익히는 것이 중요합니다.
'HTML & CSS > HTML5' 카테고리의 다른 글
| [HTML] TIL6 : 엔티티의 종류 / 의미론적 태그의 역할 (0) | 2021.04.06 |
|---|---|
| [HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용 (0) | 2021.04.06 |
| [HTML] TIL4 : 기본 태그의 종류와 속성(3/3) - 입력 양식(폼) (0) | 2021.04.05 |
| [HTML] TIL3 : 기본 태그의 종류와 속성(2/3) - 리스트, 테이블 (0) | 2021.04.05 |
| [HTML] TIL1 : 웹 페이지의 기본 구조 해부 - html, 헤드, 바디 (0) | 2021.04.04 |
댓글