<!DOCTYPE> 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 <!DOCTYPE>을 복잡하게 써야 하지만, 그냥 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다 :)
<!DOCTYPE html><title> 태그
페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이곳에 들어갑니다.
<title>HTML 기초 지식 및 태그</title>이렇게 설정한다면 현재 탭에 보이는 이름처럼 설정되는 게 title 태그입니다.
<h1>~<h6> 태그
한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그중 가장 중요한 머리말은 <h1>(heading 1), 그다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.
<h1>머리말 1</h1>
<h2>머리말 2</h2>
<h3>머리말 3</h3>
<h4>머리말 4</h4>
<h5>머리말 5</h5>
<h6>머리말 6</h6>이때, 각 머리말의 크기는 나중에 마음대로 설정할 수 있지만, 따로 설정해주지 않으면 <h1>부터 순서대로 작아집니다.
<p> 태그
보통 문단은 <p>(paragraph) 태그 안에 넣습니다. <p> 태그의 위, 아래에는 기본적으로 여백이 조금씩 있습니다.
물론 직접 설정할 수도 있습니다.
<p>p 태그의 사용 예시 입니다.</p>
<p>가운데 p 태그를 보면 보이겠지만 위 아래로 여백이 있는 것을 볼 수 있습니다.</p>
<p>p태그의 여백은 css의 margin style을 통해 없애거나 늘려줄 수 있습니다.</p>
<b> 태그와 <i> 태그
텍스트를 사용하다 강조하고 싶은 부분에 텍스트 굵기를 변화시켜 주고 싶다면 <b> 태그를 통해 텍스트를 굵게 만들어 줄 수 있습니다.
텍스트를 사용하던 중 텍스트에 날림 표시를 해주고 싶은 경우에는 <i> 태그를 사용해서 날림 효과를 넣어줄 수 있습니다.
Phrase Tags
<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어줍니다. 둘 다 '시각적인 특징'만 갖고 있는 태그인데요. HTML에서는 시각적인 특징뿐만 아니라 의미도 담고 있는 phrase tag가 있습니다.
<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적입니다.
지금 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽을 수 있겠죠?
Hello <strong>World</strong>!
<em> 태그
Hello <em>World</em>!
<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적입니다. em은 'emphasized'의 줄임말입니다.
'Study > HTML | CSS' 카테고리의 다른 글
| [웹 프로그래밍 HTML5, CSS] 스타일시트 사용해보기 / stylesheet (0) | 2021.12.08 |
|---|