Study Record

HTML 기본 구조와 텍스트 관련 태그 본문

웹/HTML + CSS

HTML 기본 구조와 텍스트 관련 태그

초코초코초코 2025. 1. 26. 22:27
728x90

 

 

기본 구조

각 태그에는 이름과 속성이 있다.

 

 

<!doctype>

문서 유형을 지정하는 태그이다. 웹 브라우저는 처음으로 이 태그를 보고 HTML5에 맞춰 문서를 해석하면 되겠구나 이해할 수 있다.

<!DOCTYPE html>

 

 

<html>

문서 유형을 <!doctype> 태그로 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그이다. <html> 태그는 웹 문서가 시작된다는 뜻이고 </html> 태그는 웹 문서가 끝났다는 뜻이다. lang 속성으로 사용할 언어를 지정할 수 있다. 언어를 지정하지 않는 경우 언어를 제한해서 검색할 때 검색되지 않는다. 또한 화면 낭독기에서 웹 문서를 소리내어 읽어줄 때 언어가 명시되면 그 언어에 맞추어 발음하는 억양, 목소리 등을 다르게 해서 들려줄 수 있다.

<!DOCTYPE html>
<html lang="en">

* 두 자리 국가별 언어 코드는 ISO 639-1 표준에 정해져 있다.

 

 

 주석 달기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>
<body>
    <!-- 주석 설명글입니다. -->
</body>
</html>

 

 

 브라우저에게 정보를 주는 <head> 태그

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아두어야 할 정보들은 모두 <head> 와 </head> 사이에 입력한다.

 

 

<title> 태그

문서 제목을 지정한다. 웹 브라우저의 제목 표시줄에 표시된다.

<!DOCTYPE html>
<html lang="en">
<head>
	...
    <title>테스트 페이지 입니다.</title>
</head>

 

 

<meta> 태그

문자 인코딩 및 문서 키워드, 요약 정보 등을 표시한다. 한글은 화면에 표시하는 방법이 영문과 달라서 문자 인코딩 방법을 utf-8로 지정해야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>

 

 

 문서의 몸통 <body> 태그

<body>, </body> 태그 사이에는 실제 브라우저에 표시될 내용을 입력한다.

 

 

<hn> 태그 - 제목 표시

기본형은 "<hn> 제목 </hn>" 이다.

각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그이다. 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다. <p> 태그는 일반 텍스트에 사용하고 <hn> 태그는 제목 텍스트를 사용해야 웹 표준에 맞다.

크기 : h1 > h2 > h3 > h4 > h5 > h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>
<body>
    <h1>어린 왕자(Le Petit Prince)</h1>
    <h2>어린 왕자(Le Petit Prince)</h2>
    <h3>어린 왕자(Le Petit Prince)</h3>
    <h4>어린 왕자(Le Petit Prince)</h4>
    <h5>어린 왕자(Le Petit Prince)</h5>
    <h6>어린 왕자(Le Petit Prince)</h6>
</body>
</html>

 

 

<p> 태그 - 택스트 단락

기본형은 "<p> 텍스트 </p>" 이다.

입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>
<body>
    <p>내 생활은 매일 똑같아</p>
</body>
</html>

 

 

<br> 태그 - 줄 바꾸기

줄바꿈을 위한 태그로 줄을 바꿀 위치에 <br> 태그를 사용한다. 닫는 태그가 없다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>
<body>
    <p>내 생활은 매일 똑같아</p>
    <p>
        그러나 결코 좌절하지 않는 것은 <br>
        어떤 것이든 도전하기 위함이다.
    </p>
    <br>
    <p>사랑은 매일 그렇게</p>
</body>
</html>

 

 

<blockquote> 태그 - 인용문 넣기

기본형은 "<blockquote> 인용 내용 </blockquote>"이다.

블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여써진다.

<blockquote>
    성이시돌목장은 제주특별자치도 테쉬폰도 유명하다. 돌하르방
</blockquote>

 

 

<hr> 태그 - 분위기 전환

기본형은 <hr> 으로 닫는 태그가 없다.

주제가 바뀔 때 분위기 전환. 수평 줄 생김

 

 

<pre> 태그 - 입력한 그대로 표시

기본형은 "<pre> 텍스트 </pre>"이다.

소스에 표시한 공백이 그대로 표시된다. 형태를 유지하려할 때 유용하다. 단, (웹 접근성) 웹 문서를 소리로 읽어 주는 기계나 점자로 표시해 주는 기계는 <pre> 태그가 적용된 부분을 만나면 건너뛰어 버린다.

<pre>
    공백이 그대로 적용된다. 들여쓰기까지 전부 적용됨.
비교하기 위한 테스트 텍스트이다.
</pre>

 

 

<strong> , <b> - 굵게 표시

<strong > 는 중요한 내용이라서 강조해야 할 때 사용한다. <b> 태그는 단순히 굵게 표시할 때 사용한다. 화면 낭독기가 <strong> 태그를 사용한 부분에는 강조되었다고 알려준다.

<strong>나의 삶은 매일 똑같다</strong>
<b>어떤 것이든 도전하기 위함이다.</b>

 

 

<em> , <i> - 이탤릭체로 표시하기

<em> 은 흐름상 특정 부분을 강조하고 싶을 때 사용한다. <i> 태그는 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 표시한다. 즉, 단순히 이탤릭체로 표시할 때 사용한다.

<i>사랑은 매일 그렇게</i>
<em>나의 삶은 매일 똑같다</em>

 

 

<q> 태그 - 인용 내용 표시

인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 한 줄에 인용 내용을 표시한다.

인용 내용 앞뒤에 따옴표("")가 추가된다.

<p>
    소고기 장조림을 만드는 방법에 대한 레시피는 <a href="https://www.10000recipe.com/recipe/6869801?srsltid=AfmBOoorRXO9cEYPsY6rxGX0pflieSRDxmckTfK5hG9PAmf5dRjUmKMF">다음 사이트</a>에서 찾아볼 수 있다.
    <q cite="https://www.10000recipe.com/recipe/6869801?srsltid=AfmBOoorRXO9cEYPsY6rxGX0pflieSRDxmckTfK5hG9PAmf5dRjUmKMF">https://www.10000recipe.com/recipe/6869801?srsltid=AfmBOoorRXO9cEYPsY6rxGX0pflieSRDxmckTfK5hG9PAmf5dRjUmKMF</q>
</p>

 

 

<mark> - 형광펜 효과

<mark> 태그로 묶은 부분의 배경색이 노랑으로 표시됨. 기본적으로 노란색 배경이 표시되지만 css 를 같이 사용하면 다른 색으로 사용 가능하다

mark 태그는 <mark>중요한 내용</mark>에 형광펜 효과를 줄 수 있다.

 

 

<span>, <div> - 영역 묶기

<span> 줄 안에서 (인라인) 묶기를 할 수 있다. 줄바꿈 없이 사용할 수 있다. span 태그 자체로는 아무 의미 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용한다.

<div> 줄 바꿈을 포함하여 블록을 단락으로 묶을 때 사용할 수 있다. 

 

 

<ruby>, <rt> 태그 - 동아시아 글자 표기하기

동아시아 국가들의 글자들에 주서을 함께 표기학 위한 용도로 사용하며 주석으로 표시할 내용을 ruby태그 안에 rt 태그로 발음 기로호 감싸준다.

<ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>

 

 

<sub>, <sup> 태그 - 아래 첨자와 위 첨자 표기하기

수학, 화학 등 아래 첨자와 위 첨자를 표기할 때 사용하는 태그이다.

몰의 화학식은 <b>H<sub>2</sub>0</b>이다.
<p>E=mc<sup>2</sup></p>

 

 

<s>, <u> 태그 - 취소선과 밑줄을 표기

<s> 태그는 취소선을 나타내고 <u> 태그는 단순히 밑줄을 긋는다.

<p><s>14,000</s>원이 아니라 <u>10,000</u>입니다.</p>

 

 

<abbr> 태그 - 약자 표시

약자를 표시하는 태그로 title 속성을 함께 사용할 수 있다.

<abbr title="HyperText Markup Language">HTML</abbr>

 

 

<code> 태그 - 소스 코드 표기

컴퓨터 인식을 위한 소스 코드로 표기된다.

<pre>
    <code>
function savetheLocal(){
    return 0;
}
    </code>
</pre>

 

 

<small> 태그 - 작게 표기하기

부가 정보처럼 작게 표시해도 되는 텍스트이다.

<p>가격 : 14,000원 <small>부가세 별도</small></p>

 

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

웹 호스팅 서비스  (0) 2025.02.04
HTML 특수기호와 특수문자 입력하기  (0) 2025.02.04
HTML5의 문서구조  (0) 2025.01.31
HTML 이미지와 하이퍼링크와 앵커  (0) 2025.01.27
HTML5과의 첫 만남  (1) 2025.01.26
'웹/HTML + CSS' Related Articles more