1. HTML 헤딩(headings)
헤딩은 검색 엔진이 내용과 웹 페이지를 색인해주는 데 도움이 되므로 매우 중요하다. 또한 문서의 구조를 보여주는 역할을 한다. 헤딩은 텍스트를 크게 만들거나 볼드체로 만드는 데 사용되는 것이 아니다.
<h1> The most important heading </h1>
<h2> The second important heading </h2>
<h3> The third important heading </h3>
<h4> The fourth important heading </h4>
<h5> The fifth important heading </h5>
<h6> The least important heading </h6>
헤딩의 사이즈를 바꾸려면 CSS 속성을 활용하면 된다. 헤딩의 opening tag에 style속성으로 font-size를 추가한다. 콜론과 세미콜론, 따옴표 위치도 헷갈리지 말 것!
<h1 style="font-size:60px;"> Heading 1 </h1>
만약 헤딩 사이사이를 구분짓는 선을 긋고 싶다면? horizontal rules인 <hr>을 문단이 끝나고 새로운 헤딩 전에 넣어주면 된다.
<h1> Heading 1 </h1>
<p> This is heading 1</p>
<hr>
<h2>Heading 2</h2>
그러면 h1과 h2사이에 가로 선이 생기면서 두 문단 사이를 구분해 준다.
2. Head
헤드는 웹 브라우저에 표시되지 않지만 HTML 문서에 대한 정보인 메타 데이터를 포함한다. <html>과 <body>태그 사이에 쓴다. 메타 데이터는 문서 이름, 문자 체계, 스타일, 스크립트 외 다른 메타 정보이다.
<html>
<head>
<title>My first HTML</title>
</head>
<body>
.
.
.
</body>
</html>
3. HTML 문단(paragraphs)
<p>태그로 표시한다. ending tag인 </p>는 처음부터 입력해서 나중에 헷갈리지 않도록. 문단과 문단 사이는 자동적으로 빈 여백줄이 생긴다. 스크립트는 여백이 있거나, 엔터를 치면서 입력하더라도 웹 브라우저에 반영되지 않고 한 줄로 입력된다. <p>안에서 엔터키 친 것 처럼 간격을 주고 싶을 땐 <br>(break lines)을 사용하자.
<p>This is<br>a line<br>break</p>
굳이 <br>을 매번 사용하지 않고 HTML에 작성한 대로 출력하고 싶다면 <pre>(preserve)태그를 사용할 수 있다.
<p>How to preserve spaces and lines</p>
<pre>
You can
write
a poem
</pre>
그러면 그냥 <p>에서는 반영되지 않았던 여백이 <pre>에서는 입력한 대로 반영되어 나타난다.
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 색상, CSS (0) | 2020.03.16 |
|---|---|
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
| HTML 스타일, 텍스트 형식 (0) | 2020.03.15 |
| HTML 편집기, 기초, 속성 (0) | 2020.03.14 |
| HTML을 위한 첫 걸음: 뜻, 요소, 태그, 웹 브라우저 (0) | 2020.03.13 |
댓글