본문 바로가기
웹 프론트엔드(Web FrontEnd)

[HTML] 태그란? (사용 방법, 태그 종류, 실습)

by 안한량 2022. 7. 17.
728x90

태그란?

문서의 속성를 포함하고 있는 객체이다.

<태그이름>
         내용
</태그이름>

기본 형태는 이렇게 되어있다.

안의 내용이 왼쪽부터 시작하지 않고 붕 떠있는 것을 볼 수 있는데
이것을 '들여 쓰기'라고 한다.


들여 쓰기(Tab)을 사용하여 입력해놓으면
태그 안의 내용인 것을 확인하기 편리하다.

 


태그의 특징

1. 태그 안에 태그가 빈번하게 있다.

 

<div>제목
	<div>
    		내용
        </div>
</div>

그러므로 열린 태그 <div> 내용~ 후에는 </div> 반드시 닫는 태그를 사용하여 구분한다.

똑같은 태그 안의 태그일 경우는 들여 쓰기로 구분하는 것이 가독성에 좋은데

안되어있어도 컴퓨터가 읽어 들일 때는 큰 문제가 없지만 직접 프로그래밍하는 우리는 힘들 것이다.

 

2. 한 번만 필요한 태그가 있다. (줄 바꿈, 선 긋기 등)

<태그 이름/> 형태로 꺾인 괄호 내부에 닿는다는 '/'를 사용하여 의미를 부여해주는 것이 가독성이 좋다.

 

 


 

간단하게 태그를 통해 html 문서를 만들어보자.

 

VS code를 다운로드하여 작업을 하면 언어에 맞게 자동완성과 오류 검출이 되어 편리하다.

문서 유형을 html로 저장하고

맨 처음 html:5 입력 후 tab을 누르면 기본적인 charset 등이 설정되어 편리하게 사용 가능하다.

 

이후 모든 태그의 내용이 들어가는 부모 태그 <body> 내부에서 태그를 작성하면 된다.


자주 사용되는 기초 태그들

 

h1~h6 = 가장 큰 제목부터 숫자가 높아질수록 작은 제목

p 간단한 글자

br 개행(줄 바꿈)

strong, b 글씨 굵게

 

h1, h2, h3, p, strong, br 사용

바로 크롬에 html 파일 drag&drop으로 확인 가능하다.

 

여기 오른쪽 코드를 자세히 보면 이상한 점이 하나 있다.

바로 개행 태그인 <br/>이 사용되지 않았는데 개행이 되고, 어떤 태그는 개행을 해줘야만 개행이 된다.

 

이유는 태그는 블록과 인라인이라는 두 가지 요소로 구분된다.

 

다음 글에서는 블록과 인라인 속성에 대해 설명하겠다.

 

728x90