먼저 VS Code에서 html파일을 생성한다.
! + tab을 누르면 자동으로 웹페이지 코드가 완성되는데
lnag(언어)를 en에서 ko로 수정하고 시작을 하겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
기본적인 가장 처음의 HTML 문장이다.
문장을 보면 < > 괄호 안에 head, meta, body 등의 용어들이 쓰여있을 것이다.
이것이 오늘 배울 태그이다.
HTML 태그란?
요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위이다.
HTML 문서는 다양한 요소(태그)로 구성되어 있으며,
각 요소는 웹 페이지의 내용, 구조, 형식을 정의한다.
| 태그 | 설명 |
| <!-- --> | 주석(comment)을 정의한다. |
| <!DOCTYPE> | 해당 문서의 타입을 정의한다. |
| <html> | 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의한다. |
| <meta> | 해당 문서에 대한 정보인 메타데이터(metadata) |
| <title> | 문서의 제목을 정의한다. |
| <body> | 문서의 콘텐츠 영역을 정의한다. 대부분의 코드를 boby안에 입력한다. |
1. 제목 태그 <h1> ~ <h6>
: 문서의 제목을 정의하는데 사용된다.
웹 페이지의 제목은 문서의 주요 내용을 요약하고 사용자에게 제공하는 중요한 정보로서,
브라우저 탭에 표시되거나 검색 엔진에서 검색 결과의 제목으로 사용될 수 있다.
태그는 <h1> ~ <h6>이 있으며, 숫자가 높을 수록 낮은 단계를 구성한다. (ex. h1의 경우 대제목)
h1 + tab를 입력하면 자동으로 태그가 완성된다.
주의할 점은 소제목이 대제목의 글자 크기보다 크게 설정되어야 한다고 소제목을 h1(대제목)으로 쓰지 않는 것이다.
HTML은 요소들을 배치하는 역할만을 담당하기 때문에 외적인 요소(글자크기)에 영향을 미치지 않는다.즉, 글자크기는 CSS의 영역이기 때문에 제목 구별을 명확히 하자!
2. 문단 태그 : <p>
문단을 구성하는 태그이며, 각각 줄 바꿈이 된다.
이는 텍스트나 다른 콘텐츠를 하나의 단락으로 묶어주는 역할을 한다.
<p> 태그를 사용하면 웹 페이지의 텍스트를 쉽게 구분하고 조직할 수 있어,
사용자로부터 구조화된 단락을 제공하며 콘텐츠를 읽고 이해하는 데 도움을 준다.
(1) 줄 바꿈 태그 : <br>
닫는 태그 </>가 필요 없으며, 문단 안에서 줄 바꿈을 할 때 사용한다.
주의할 점은 <br> 태그는 단순히 줄 바꿈만을 위해 사용된다는 점이다.
따라서 문단을 구분하려면 <p>태그를 사용해야 한다.
(2) 공백 :
공백(스페이스)을 의미하며, 대부분 사용하지 않음.
HTML에서 일반적으로 여러 공백이 연속해서 나타날 경우 브라우저는 이를 하나의 공백으로 처리한다.
따라서 여러 개의 공백을 사용하여 간격을 조정하려 할 때,
브라우저는 여러 공백을 하나로 처리하여 텍스트를 표시한다.
이 때문에 원하는 형태의 텍스트를 표시하는 데 어려움을 줄 수 있다.
는 주로 텍스트의 형식을 보다 명확하게 표현하고 정렬을 원하는 경우 사용된다.
예를 들어, 텍스트에서 단어 사이에 간격을 만들거나,
특정 텍스트를 오른쪽으로 정렬할 때 유용하게 사용된다.
(3) 주석 : <!-- -->
단축키 : Ctrl + /
코드 외의 내용을 입력하고 싶을 때 주석처리 한다. (개발자에게만 보이는 텍스트)
이는 개발자나 다른 개발자들에게 코드를 이해하고 유지보수하기 쉽도록 도와준다.
하지만 너무 많은 주석을 사용하거나, 주석에 코드를 너무 자세하게 설명하는 것은 코드의 가독성을 저해할 수 있으므로 적절한 사용이 필요하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS 01-01-03</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
<p>
페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용합니다.<br>
숫자가 높을수록 낮은 단계의 제목이 되죠.
</p>
<p>
본문은 문단별로 p 태그로 감쌉니다. p 태그끼리는 자동으로 줄바꿈이 되죠.<br>
문단에 관계없이 이처럼<br><br><br>
원하는 횟수로 줄바꿈을 하기 위해서는 br 태그를 쓰면 됩니다.<br>
br 태그는 열고 닫을 필요가 없는 몇 안 되는 태그 중 하나인데 남용하지 않는 것이 좋습니다.
</p>
<hr>
<p>
위와 같이 hr 태그를 사용하면 가로줄을 표시할 수도 있습니다.<br><br>
이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.
</p>
<p>
마지막으로, 여기서는 보이지 않지만 페이지 원본 보기에서 주석을 확인할 수 있습니다.
</p>
<!-- 이 부분은 웹페이지에서는 보이지 않았을거에요. -->
<!-- 이처럼, 코드에서만 볼 수 있는 텍스트를
'주석'이라고 합니다. 위의 주석처럼 한 줄로도,
이 주석처럼 여러 줄로도 작성할 수 있어요. -->
</body>
</html>
'Study with Yedol > HTML' 카테고리의 다른 글
| HTML 테이블(표) 만들기 (0) | 2023.12.17 |
|---|---|
| HTML 이미지 태그 <img>와 속성 (0) | 2023.12.17 |
| HTML 목록 태그와 정의 태그 (0) | 2023.12.13 |
| HTML 강조, 인용, 밑줄 태그 (0) | 2023.12.13 |
| HTML, CSS, JavaScript 차이 (0) | 2023.12.12 |
