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>

 

 

<ul>, <li> - 순서 없는 목록

각 항목 앞에 불릿이 붙여짐

css 의 list-style-type 속성으로 불릿 수정

 

<ol>, <li> - 순서 목록

각 항목 앞에 숫자가 붙여짐

<ol> 태그의 속성

- tpye 속성 : 불릿 앞의 숫자 조정

- start 속성 : 중간 번호부터 수정

- reserved 속성 : 역순으로 표시 

 

<dl>, <dt>, <dd> - 설명 목록

제목과 그에 대한 설명으로 이루어진 목록이다.

<dl> 과 <dt>, <dd> 태그 사용

하나의 <dt>에 여러 개의 <dd>값을 가질 수 있다.

 

 

표 만들기

 

<table>, <tr>, <td> - 표를 만드는 태그

<tr> 은 행을 만드는 태그이며, <td> 는 열을 만드는 태그이다. <th> 는 제목을 만드는 태그이다.

<table>
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 2열</td>
    </tr>
</table>

 

 

<colspan> 행 합치기

<table border="1">
    <colgroup>
        <col style="width:70px;">
        <col style="width:100px;">
        <col style="width:70px;">
        <col style="width:100px;">
    </colgroup>
    <tr>
        <th>이름</th>
        <td></td>
        <th>연락처</th>
        <td></td>
    </tr>
    <tr>
        <th>주소</th>
        <td colspan="3"></td>
    </tr>
</table>

 

 

<rowspan> 열 합치기

<table border="1">
    <colgroup>
        <col style="width:70px;">
    </colgroup>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
    <tr>
        <td rowspan="2">2행 1열</td>
        <td>2행 2열</td>
        <td rowspan="2">2행 3열</td>
        <td>2행 4열</td>
    </tr>
    <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
    </tr>
</table>

 

 

<caption> 표 제목을 만드는 태그

제목이 위쪽 중앙에 표시됨

<table border="1">
    <caption>
        <strong>국내에서 자주 사용하는 모던 브라우저</strong>
    </caption>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
</table>

 

 

<figure>, <figcaption> - 표 제목을 만드는 태그

표뿐만 아니라 제목을 붙이려고 하는 어떤 대상에서도 사용할 수 있다. 이미지, 동영상 등 모두 가능하다.

<figcaption> 위치에 따라 표의 위나 아래에 제목이 표시된다.

<figure>
    <figcaption>
        <b>표 테스트 입니다.</b>
    </figcaption>
    <table border="1">
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>
    </table>
</figure>

 

 

<thead>, <tbody>, <tfoot> 표 구조 정의하기

머리말, 본문, 꼬리로 표 구조를 정의할 때 사용하는 태그이다.

<table border="1">
    <thead>
        <tr>
            <th>머리말 행</th>
            <td>구분 1</td>
            <td>구분 2</td>
            <td>구분 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>꼬리 0</td>
            <td>꼬리 1</td>
            <td>꼬리 2</td>
            <td>꼬리 3</td>
        </tr>
    </tfoot>
</table>

 

 

<col> , <colgroup> - 열끼리 묶어 스타일 지정하기

<tr>, <td> 태그 전에 사용해야 한다.

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다. 닫는 태그가 없다.

<colgroup> 태그로 여러 열을 묶을 수도 있다. 

<col> 태그에 span 속성을 사용해 여러 열을 묶을 수 있다.

<col> 태그의 개수와 표의 열의 개수가 같아야 한다.

<table border="1">
    <colgroup>
        <col style="width: 50px;">
        <col span="2" style="background-color: aqua; width: 50px;">
    </colgroup>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

 

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