HTML

• Hyper Text markup language
• 프론트엔드의 기초가 되는 HTML은 화면상 기본 구성요소를 만드는데에 사용된다.

태그(TAG)

• HTML에서의 태그는 화면에 나타나는 여러 요소들을 쉽게 이해할 수 있도록 화면 구성을 나누어주는 역할으로써 존재한다.
• 시작 태그와 종료태그로 단위를 끊어서 구성하고자하는 범위를 확실히 하는데에 쓰인다.

<태그이름> // 시작태그 (start tag)
</태그이름> // 종료태그 (end tag)

1. 블록 태그

• 마크업 시 다음에 오는 요소가 자동으로 줄바꿈이 발생하는 태그이다.

일반적으로 많이 사용되는 태그의 종류는 다음과 같다.

<h1~h6></h1~h6> : 제목태그. h1에서부터 h6으로 갈 수록 크기가 작아진다.
<p></p> : 문단 구분 시 주로 사용하는 태그.
<div></div> : 문단을 container 단위로 끊어주는 태그. 원하고자 하는 구역에 스타일을 넣어주고자 할 때 자주 사용된다.

Ex) 작성해보자.

<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<p>안녕하세요</p>
<img src="주소" alt="대체문자"></img>

Result

안녕하세요

안녕하세요

안녕하세요

종료태그 없이 단순히 태그 하나로 사용하는 종류도 존재한다. 이를 빈 태그(empty tag)라고 한다.

<!-- 내용 --> : 주석
<br> : 줄 띄움
<hr> : 수평선

2. 인라인 태그

• 마크업 시 다음에 오는 요소의 줄바꿈이 없다.

<button></button> : 버튼 삽입
<a href></a> : 하이퍼링크 삽입
<strong></strong> : 글씨 굵게
<b></b> : 글씨 굵게
<mark></mark> : 형광펜효과
<em></em> : 이탤릭체
<i></i> : 이탤릭체
<q></q> : 인용문
<sub></sub>, <sup></sup> : 제곱이나 화학식 표현 시 주로 사용
<span></span> : container 단위로 끊어준다. 스타일 넣을 때 사용됨

Ex) 작성해보자.

> <q>너 자신을 알라</q> 어디에선가 많이 들어본 이 말은 
<strong>소크라테스</strong>가 한 <mark>명언</mark>입니다.

Result

너 자신을 알라 어디에선가 많이 들어본 이 말은 소크라테스가 한 명언입니다.

실습

• VSC 작성
  
• 결과