태그란?
문서의 속성과 정보를 포함하고 있는 객체이다.
<태그이름>
내용
</태그이름>기본 형태는 이렇게 되어있다.
안의 내용이 왼쪽부터 시작하지 않고 붕 떠있는 것을 볼 수 있는데
이것을 '들여 쓰기'라고 한다.
들여 쓰기(Tab)을 사용하여 입력해놓으면
태그 안의 내용인 것을 확인하기 편리하다.
태그의 특징
1. 태그 안에 태그가 빈번하게 있다.
<div>제목
<div>
내용
</div>
</div>그러므로 열린 태그 <div> 내용~ 후에는 </div> 반드시 닫는 태그를 사용하여 구분한다.
똑같은 태그 안의 태그일 경우는 들여 쓰기로 구분하는 것이 가독성에 좋은데
안되어있어도 컴퓨터가 읽어 들일 때는 큰 문제가 없지만 직접 프로그래밍하는 우리는 힘들 것이다.
2. 한 번만 필요한 태그가 있다. (줄 바꿈, 선 긋기 등)
<태그 이름/> 형태로 꺾인 괄호 내부에 닿는다는 '/'를 사용하여 의미를 부여해주는 것이 가독성이 좋다.
간단하게 태그를 통해 html 문서를 만들어보자.
VS code를 다운로드하여 작업을 하면 언어에 맞게 자동완성과 오류 검출이 되어 편리하다.
문서 유형을 html로 저장하고
맨 처음 html:5 입력 후 tab을 누르면 기본적인 charset 등이 설정되어 편리하게 사용 가능하다.
이후 모든 태그의 내용이 들어가는 부모 태그 <body> 내부에서 태그를 작성하면 된다.
자주 사용되는 기초 태그들
h1~h6 = 가장 큰 제목부터 숫자가 높아질수록 작은 제목
p 간단한 글자
br 개행(줄 바꿈)
strong, b 글씨 굵게
바로 크롬에 html 파일 drag&drop으로 확인 가능하다.
여기 오른쪽 코드를 자세히 보면 이상한 점이 하나 있다.
바로 개행 태그인 <br/>이 사용되지 않았는데 개행이 되고, 어떤 태그는 개행을 해줘야만 개행이 된다.
이유는 태그는 블록과 인라인이라는 두 가지 요소로 구분된다.
다음 글에서는 블록과 인라인 속성에 대해 설명하겠다.
'웹 프론트엔드(Web FrontEnd)' 카테고리의 다른 글
| [HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) (0) | 2022.07.17 |
|---|---|
| [HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) (0) | 2022.07.17 |
| [HTML] 블록과 인라인의 개념 (특징, 주의할 점) (0) | 2022.07.17 |
| 이해하기 쉬운 CSS 설명 (Cascading Style Sheet 기초 지식) (0) | 2022.07.17 |
| HTML이란? (웹, 인터넷, URL, DNS 배경 지식) (0) | 2022.07.16 |
