HTML 태그에 대해 알아보자! - 구조,속성,활용법

안녕하세요! Wooji입니다.

오늘은 HTML 태그에 대해 알아봅시다.

HTML은 웹문서에 마크업 하는 언어입니다. 마크업이란 어디가 이미지고 어디가 텍스트인지 표시해 주는 것을 의미하는데 이때 약속된 표기법을 태그라고 하는 것이죠.

그럼 태그의 특징과 활용에 대해 알아봅시다!

<와 >를 이용해 구분

태그는 꺾쇠 괄호 <와 >를 사용해 구분됩니다. 예를 들어서, "사진을 표시해주고 싶다"면 image의 약자인 <img>로 표기해 주는 것이죠. 이렇게 <img>로 구분해 주면 컴퓨터에서 해당 부분이 사진이구나 하고 인식하는 겁니다.

그래서 <와 > 사이에 있는 문자는 태그로 인식한다는 점을 기억해야 합니다.

<tag>
<img> <!--괄호와 괄호 사이에 태그 내용을 넣으면 됩니다-->

 

태그 안의 문자는 모두 소문자로 작성

태그 안의 문자는 소문자로 작성하라는 것은 사실 권장 사항입니다. HTML태그가 대소문자를 구분하지는 않습니다.

그러나 소문자로 작성하라는 이유가 있겠죠!

검색해보니 HTML 문서의 가독성과 일관성을 높이기 위함이라고 하네요.

<p> 태그는 소문자로 작성합시다.</p>
<P> <u>대문자와 소문자를 혼용하면
	<Br>가독성이 떨어집니다! </p>

 

여는 태그와 닫는 태그

태그에는 여는 태그와 닫는 태그가 있습니다. 여는 태그는 <tag>의 형식으로, 닫는 태그는 </tag>의 형식으로 작성합니다. 

 

<p> 태그를 열었다면 닫아주어야 합니다! </p>

 

중첩 태그

태그는 서로 중첩되어 사용될 수 있습니다. 

<p>		<!--대신 열었다면-->
   <h1> 태그를 중첩해서 사용할 수 있습니다. </h1>
   <ul>
      <li> 리스트 1 </li>
      <li> 리스트 2 </li>
   </ul>
</p>  	<!--꼭 닫아주어야 한답니다-->

 

 

빈 태그

일부 태그는 닫는 태그가 필요 없는 빈 태그(empty tag)입니다. 이러한 태그는 시작 태그만으로도 기능을 수행할 수 있습니다.

<br> <!--줄바꾸기 태그이면서 빈 태그입니다-->
<hr> <!--수평줄을 넣는 태그이면서 빈 태그입니다-->

 

HTML 태그의 속성

HTML 태그에는 다양한 속성을 추가할 수 있습니다. 속성은 태그의 기능이나 스타일을 추가로 정의할 때 사용됩니다.

예를 들어 아래와 같이 이미지 파일 경로와 크기를 지정할 수 있습니다

<img src="image.jpg" width="300" height="200">
<a href="https://www.example.com" target="_blank">외부 링크</a>

 

태그의 정확한 사용과 속성 활용을 통해 웹 페이지의 기능과 디자인을 구현할 수 있습니다. 태그와 속성을 효과적으로 활용하면 의미 있는 웹 문서를 만들어낼 수 있습니다.

 

주석 태그

코딩을 하다보면 까먹지 않으려 코멘트를 작성할 필요가 있죠. 그럴 때 사용하는 게 주석인데 처음에 HTML 공부하면서 주석 코드가 뭔지 몰라서 헤매었습니다.

주석 코드는 "<!--"와 "-->"입니다. 기억해 두었다가 유용하게 쓰시길 바랍니다. 

<!-- 주석입니다 -->

 

 

오늘은 태그에 대해서 알아보았습니다. 코딩을 해봤던 분이시라면 조금은 당연하게 느끼실 수 있을 것도 같네요.  처음 공부하는 만큼 최대한 자세히 적어보려 합니다. 다음 글에선 Emmet에 대해 알아보겠습니다.