[HTML] 태그(tag)

태그(tag)의 개념

'태그'란 웹사이트에 존재하는 여러가지 요소들에 대해 각 요소가 무엇을 의미하는 지를 지정하거나,어떤 기능의 수행을 지시하는 역할을 한다.

태그(tag) 사용법

태그는 < >를 통해 사용하는데 일반적으로 '여는 태그'와 '닫는 태그'로 구성이 된다. 아래의 예시를 보자

<span>내용</span> //앞의 것이 여는 태그, 뒤에 것이 닫는 태그고 닫는 태그에는 /가 사용된다.

태그(tag)의 속성

태그에 따라 설정 가능한 '속성(attribute)'이라는 것이 있는데 태그의 동작을 설정 및 제어 하는 역할을 한다.예를 들면 img태그는 그림을 넣어주는 태그인데 아래와 같이 사용된다.아래에서 보면 img태그 안에 src와 alt라는 것이 있는데 이것이 img태그의 속성이다.src에는 가져온 이미지의 원본 파일을 어디서 가져왔는지를 표시해주는 것이고,alt는 만약 파일이 깨지거나 뭔가 오류가 있어서 이미지가 제대로 표현되지 않은 경우 대신 나타낼 텍스트를 입력해 주는 것이다.

<img src="./logo.png" alt="로고"> 

# 보충설명
./ -> 이 기호가 의미 하는 것은 만약에 어떤 파일이 내가 작성하고 있는 html파일이 저장되는 폴더와 같은 폴더에 저장되어 있다면 src에 ./를 입력을 해주면 해당 파일을 고를 수 있는 작은 창이 열리게 만드는 기호이다.

태그(tag)의 종류

h태그

h태그는 제목을 나타내는 태그다. h1부터h6까지 존재 하는데 h1이 글씨가 가장 크고 h6이 가장 글씨가 작다.아래의 예시를 vscode에 입력해 보자.

<h1>제목</h1> 
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>

p태그

p태그는 paragraph의 약자로 문단을 나누어 주는 태그다.아래의 코드를 입력해 보면 문단이 나누어져 있는 것을 확인 할 수 있다.

<p>  //중간에 쓰인 br태그는 아래의 설명을 참고하자.
  동해물과 백두산이 마르고 닳도록<br>하느님이 보우하사 우리나라 만세
</p>
<p>
  남산위에 저소나무 마르고 닳도록<br>바람 서리 불변함은 우리 기상일세
</p>

br태그

위의 예시에서 쓰인 br태그는 우리가 흔히 다음 문장으로 넘어갈때 입력하는 엔터와 같은 역할을 하는데 br태그를 사용하는 이유는 vscode로 텍스트를 입력할때 vscode상에서 엔터를 쳐서 다음 문장으로 넘어간다고 해도 실제 웹에서는 그냥 일자로 문장이 계속 이어진다.따라서 웹상에서 엔터를 치는 효과를 보고 싶다면 br태그를 이용하여야 한다. 여러번 줄바꿈을 하고 싶다면 br태그를 여러번 사용해주면 된다.아래의 예시를 보고 어떻게 표현되는지 확인해 보자.

가나다<br>라마바사<br><br>아자차카<br><br><br>타파하

hr태그

hr태그는 웹상에 가로줄을 그어주는 태그다.hr태그의 경우 닫는 태그는 필요가 없다.

<hr>

b 태그와 strong 태그.

b태그와 strong태그 모두 글자를 굵게 만들어 주는 역할을 하는 태그다. 차이점은 b태그의 경우 그냥 물리적으로 굵게만 표시를 해주는 것인데 반해, strong태그는 물리적으로도 굵게 표시 해 주지만 중요한 부분이여서 굵게 표시했음을 나타내는 의미 또한 담고 있다.어차피 웹상에 굵게 표시해주는 건 똑같은데 굳이 strong태그를 사용하는 이유는 누군가 웹사이트의 코드를 확인했을때 strong태그를 확인 할 수 있다면 그 부분이 중요한 부분임을 쉽게 알 수 있기에 사용하는 것이다.

<b>굵은 글씨</b>
<br>
<strong>중요한 내용을 굵게 처리함</strong>

i 태그와 em 태그

i태그와 em태그는 둘다 글자를 기울이는 역할을 하는 태그다.차이점은 i태그는 단순히 기울여만 주는 역할을 하고,em태그는 글자를 기울이는 역할도 하면서 동시에 중요한 내용임을 강조하는 역할도 하게된다.

<i>기울임</i>
<br>
<em>강조할걸 기울임</em>

sup태그와 sub태그
sup태그는 위첨자 태그,sub는 아래첨자 태그다.

위첨자란 예를 들어 2의3승이면 2위에 작게 올라가는 지수 3을 말하고 표현하고 싶은 위첨자를 태그 사이에 입력해 주면 된다.

아래첨자는 예를 들어 H2O라는 산소 기호에서 작게 들어가는 2를 말하고 표현하고 싶은 아래첨자를 태그 사이에 입력해 주면 된다.

//위첨자는 밑<sup>지수</sup>
2<sup>3</sup>
<br>
H<sub>2</sub>O

u태그

u태그는 밑줄을 그어주는 태그다.태그 사이에 밑줄을 긋고 싶은 내용을 넣어주면 된다. u태그는 css와 함께쓰여 철자 오류등을 나타날때 자주 사용된다.

<u>밑줄을</u>그어 봅시다.

s태그

s태그는 취소선을 그어 주는 태그다.

<s>취소선을</s>그어 봅시다.