끄적끄적 개발 블로그입니다.

3 분 소요

02. 텍스트를 덩어리로 묶어주는 태그

<hn> 태그 - 제목 표시하기

제목 텍스트는 일반 텍스트보다 굵고 진하기 표시됩니다. <hn>태그는 제목을 뜻하는 heading의 줄임말인 h와 제목 크기를 나타내는 숫자를 사용해서 <h1>~<h6>까지 나타냅니다.

<h1>이 가장 크고 <h6>이 가장 작은 크기의 제목입니다.

<p> 태그 - 단락 만들기

텍스트를 표시할 때 가장 많이 사용하는 태그입니다. paragraph(단락)의 줄임말입니다.

브라우저의 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

<br/> 태그 - 줄 바꾸기

텍스트 단락에서 줄바꿈해도 웹상에서는 줄바꿈 되지 않는데, <br/>태그를 사용해 줘야합니다.

<hr> 태그 - 분위기 전환을 위한 수평 줄 넣기

<hr>은horizontal의 줄임말로 , 수평 줄을 삽입 할때 사용합니다. 보통 여러 개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀔 때 부위기 전환용으로 사용합니다.

닫는 태그는 없습니다.

<blockquote> 태그 - 인용문 넣기

다른 블로그나 사이트의 글을 인용할 경우, <blockqoute>태그를 이용해 표시합니다.

<blockquote> 인용 내용</blockquote>

이때 인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별됩니다.

<h1>제주 이색 여행지</h1>
<h2>
    야외 텐트를 닮은 건축물 "테쉬폰"
</h2>
<P>
    제주에서는 점차 다른 지방으로...
</P>
<p>
    국내 근현대 건축사의...
</p>
<blockquote>
    성이시돌목장은 제주특별자치도...테쉬폰도 유명하다.
</blockquote>

<pre> 태그 -입력하는 그대로 화면에 표시하기

HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다.

하지만 <pre>태그를 사용할 경우 , 소스에 표시한 공백이 브라우저에 그대로 표시됩니다.

<code>나 <samp>,<kbd> 같은 태그를 사용해 프로그램 소스를 표시할 대도 소스의 형태를 그대로 브라우저 창에 보여주어야 하기 때문에 <pre> 태그는 preformat의 줄임말입니다.

<pre> 텍스트 </pre>

텍스트를 한 줄로 표시하는 태그

<strong>태그, <b>태그 - 굵게 표시하기

텍스트 중에서 굵게 표시하려고 할 때 <strong>태그나 <b>태그를 사용합니다.

눈으로 봤을때는 차이가 느껴지지 않는데, 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다.

  • 강조된 것인지.
  • 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지

<strong> 굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

경고나 주의 사항처럼 주요한 내용이어서 강조해야할 때는 <strong> 태그를 사용하고 문서의 키워드처럼 단순히 굵게 표시할 때는 <b> 태그를 사용합니다. 보이는 것이 아니라 의미 중점입니다.

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

텍스트를 이탤릭체로 표시할 때는 <em> 태그나 <i> 태그를 사용합니다.

<i>이탤릭체로 표시할 텍스트</i> <em> 이탤릭체로 강조할 텍스트</em>

<p> 태그 - 인용 내용 표시하기

<p>태그는 인용한 내용을 표ㅣ하기 위한 것으로 quote의 줄임말입니다. <blockquote>태그는 블록 레벨 태그이기 때문에 인용 냐용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여써집니다.

<p>태그는 인라인 레벨 태그이기 때문에 줄바꿈이 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시하는 점입니다.

<mark> 태그 - 형광펜 효과 내기

<mark> 태그는 선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어 놓은 듯한 효과를 냅니다.

<mark>텍스트</mark>

<span>태그 - 줄바꿈 없이 영역 묶기

<span> 태그는 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 텍스트 단락 안에서일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

<span>내용 </span>

목록을 만드는 태그

<ul> 태그, <li> 태그 - 순서 없는 목록 만들기

순서가 필요하지 않은 목록(unordered list)을 만들 때는 <ul> 태그를 사용하고 <ul>태그 안에 <li>태그 (list item)를 사용해 각 항목을 표시합니다. 순서 없는 목록의 경우, 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다.

<ul>
    <li>내용</li>
    <li>내용</li>
    ...
</ul>

<ol> 태그, <li> 태그 - 순서 목록 만들기

항목을 나열하되 순서가 필요한 목록(order list)을 만들 때는 <ul> 대신 <ol> 태그를 사용하고 <li> 태그를 사용해 각 항목을 표시합니다. <ol> 태그에는 <ul> 태그와 달리 여러 속성이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다.

<ol> 태그 속성으로 순서 목록의 숫자와 순서 바꾸기

  1. type 속성 - <ol> 태그는 순서 목록이기 때문에 각 항목 앞에 1, 2, 같은 숫자가 기본으로 붙습니다.
  2. start 속성 - 순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있습니다.
  3. reversed 속성 - 항목을 역순으로 표시합니다.
<ol type="A" start="B">
    <li>내용</li>
    <li>내용</li>
    <li>내용</li>
    <li>내용</li>
</ol>
  1. 내용
  2. 내용
  3. 내용
  4. 내용

<li> 태그 생략과 목록 중첩

순서 없는 목록이나 순서 목록의 각 항목을 정의할 때 <li> 태그를사용하는데 여러 항목이 나열될 때 </li> 태그를 생략해도 <li> 태그가 다음에 오는 <li>를 만나면 자동으로 </li>태그가 있는것 처럼 인식합니다.

<dl>, <dt>, <dd> 태그 - 설명 목록 만들기

<dl>태그는 사전 구성 처럼 ‘제목과 ‘설명’이 한 쌍인 설명 목록(description list)을 만듭니다.

<dl> 태그는 목록을 만들고 <dt>태그는 제목을, <dd>태그는 설명을 표시합니다.

하나의 <dt>태그 에 여러 개의 <dd>태그 값을 가질 수도 있고 여러 개의 <dt>태그를 가질 수도 있습니다.

<dl>
    <dt>제목</dt>
    <dd>내용</dd>
    <dd>내용</dd>
    <dt>제목2</dt>
    <dd>내용2</dd>
    <dd>내용2</dd>
</dl>

업데이트:

댓글남기기

참고