[기본 개념] 1 | (1.1) 텍스트, 목록
1> 텍스트 입력하기
2> 목록 만들기
3 표 만들기
4 이미지 삽입하기
5 오디오와 비디오 삽입하기
6 하이퍼링크 삽입하기
1. 텍스트 입력하기
제목을 나타내는 <hn> 태그
기본형
</hn>제목</hn>
다른 텍스트보다 크고 진하게 표시한다. n 의 자리에는 1 ~ 6의 숫자가 들어가며 <h1> 이 가장 큰 제목이고 <h2>, <h3>, . . . ,<h6> 의 순서로 크기가 작아지며 닫는 태그인 </hn> 을 사용해야 한다.
텍스트 단락을 만드는 <p> 태그, 줄을 바꾸는 <br> 태그
기본형
<p>내용</p>
<br>
<p> 와 </p> 태그 사이에 텍스트를 입력하면 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
이때, 편집기에서 줄을 바꿔도 웹 브라우저에서는 한 줄로 표시되며 텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시되지 못할 경우 줄이 바뀐다.
텍스트 단락에서 원하는 위치에서 줄을 바꾸고 싶을 때 <br> 를 사용하면 된다. <br> 태그는 닫는 태그가 필요 없다.
인용할 때 쓰는 <blockquote> 태그
기본형
<blockquote>인용문</blockquote>
브라우저가 인용문을 인식할 수 있게 하기 위해 <blockquote> 와 </blockquote> 태그로 인용문을 감싸야한다.
이때, 웹 브라우저는 <blockquote> 태그 안의 인용문을 다른 텍스트보다 들여 쓴다.
텍스트를 굵게 표시하려면 <strong>, <b> 태그
기본형
<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>
<strong> 태그와 <b> 태그는 차이가 느껴지지 않지만 화면 낭독기의 기능 때문에 사용하는 경우가 다르다. 경고나 주의사항처럼 중요한 내용을 강조할 때는 <strong> 태그를, 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용하면 된다.
기울인 텍스트를 입력해주는 <em>, <i> 태그
기본형
<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 강조할 텍스트</i>
문장에서 흐름상 특정 부분을 강조할 때 <em> 태그를, 마음속의 생각이나 용어와 관용구에 <i> 태그를 사용한다.
이 밖에 다양한 텍스트 관련 태그
종류 | 설명 | 예시 |
<abbr> | 줄임말을 표시하고 title속성을 함께 사용 | <abbr title="Internet of Things">IoT</abbr> |
<cite> | 웹 문서나 포스터에서 참고내용을 표시 | <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite>중 </p> |
<code> | 컴퓨터 인식을 위한 소스 코드 | <code>function savetheLocal( )</code> |
<small> | 부가 정보처럼 작게 표시 | <p>가격: 13,000<small>(부가세 별도)</small> |
<sub> | 아래 첨자 | <p>물의 화학식은 H<sub>2</sub>O입니다</p> |
<sup> | 위 첨자 | <p>E = mc<sup>2</sup></p> |
<s> | 취소선 표시 | <p><s>34,000원</s>19,000원</p> |
<u> | 밑줄을 표시 | <u>텍스트에 단순히 밑줄 긋기</u> |
<ins> | 공동 작업 문서에서 새로운 내용을 삽입 | <ins>새로운 내용을 삽입합니다.</ins> |
<del> | 공동 작업 문서에서 기존 내용을 삭제 | <del>기존 내용을 삭제합니다</del> |
2. 목록 만들기
순서가 있는 목록을 만드는 <ol>, <li> 태그
기본형
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>
순서 목록은 어떤 과정을 순서대로 설명할 때 <ol> 과 <li> 태그를 사용해 만든다. 목록을 표시할 내용 앞뒤에 각각 <ol> 과 </ol> 태그를 두고, 그 사이에 <li> 와 </li> 태그를 삽입한다.
<ol> 태그는 기본적으로 숫자 1, 2, 3, . . .으로 번호를 붙이는데 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다. 또한 기본적으로 '1'부터 시작하지만 start 속성을 사용하여 시작 번호를 바꿀 수도 있다.
(ex. c번째로 표시 )
<ol type="a" start="3">
종류 | 설명 |
type="1" | 숫자(기본값) |
type="a" | 영문 소문자 |
type="A" | 영문 대문자 |
type="i" | 로마 숫자 소문자 |
type="I" | 로마 숫자 대문자 |
순서 없는 목록을 만드는 <ul>, <li> 태그
기본형
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
순서 없는 목록은 항목의 순서가 중요하지 않을 때 사용한다. <ul> 과 </ul> 태그를 목록 앞뒤에 붙인 후 <li> 와 </li> 태그를 삽입한다.
순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여 구분하는데 이런 작은 그림을 불릿이라고 한다.
설명 목록을 만드는 <dl>, <dt>, <dd> 태그
기본형
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl>
설명 목록은 이름과 값의 형태로 된 목록을 말한다.
이름 부분을 지정하는 <dt> 태그와, 값 부분을 지정하는 <dd> 태그로 구성된다. <dl> 와 </dl> 태그 사이에 한 쌍의 <dt> 태그와 <dd> 태그를 넣는다. 이 때 <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수 있다.
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠프로그래밍 언어 > HTML' 카테고리의 다른 글
[기본 개념] 2 | (2.2) input 태그의 type 속성 (0) | 2022.02.14 |
---|---|
[기본 개념] 2 | (2.1) 폼 삽입 (0) | 2022.02.14 |
[정리] 1 | 텍스트, 목록, 표, 멀티미디어 정리 (0) | 2022.02.11 |
[기본 개념] 1 | (1.3) 멀티미디어, 하이퍼링크 (0) | 2022.02.11 |
[기본 개념] 1 | (1.2) 표, 이미지 (0) | 2022.02.11 |