[기본 개념] 1 | (1.1) 텍스트, 목록

728x90

[기본 개념] 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+자바스크립트 웹 표준의 정석(고경희)

728x90