[길벗 학습단] 3장 실무에서 자주 사용하는 HTML 필수 태그 (1)

3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다.

  1. 텍스트 작성하기
  2. 그룹 짓기
  3. 목록 만들기
  4. 링크와 이미지 넣기
  5. 텍스트 강조하기
  6. 폼 만들기
  7. 표 만들기
  8. 멀티미디어 설정하기
  9. 웹 페이지 구조를 설계하는 시맨틱 태그
  10. 태그 종류에 상관없이 사용하는 글로벌 속성
  11. 정리

1. 텍스트 작성하기

1. hn 태그

제목을 쓸 때 사용하는 태그이다. h1부터 h6까지 존재. 검색엔진에 잘 걸릴 수 있게 h1부터 적절하게 사용하자.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

2. p, br 태그

p는 문단 태그이다. 이 안에 텍스트를 넣는다.

br는 문단에서 줄을 바꿀 때 사용한다.

<p>
이렇게 쓰면 된다.<br>
줄바꿈이 된다.
</p>

3. blockquote, q 태그

blockquote은 문단 단위의 텍스트 인용할 때 사용한다.
cite 속성을 사용하면 출처 경고를 쓸 수 있다.
그리고 block 태그 아래에 p 태그를 써야 한다.

q 태그는 텍스트 단위의 짧은 인용문을 작성할 때 사용. 마찬가지로 cite 속성 사용 가능.

<blockquote cite="출처">

<p>
이것은 인용구 예시입니다.
</p>

</blockquote>

<q cite="출처"> 짧은 인용문</q>

4. ins, del 태그

ins는 아랫줄, del은 취소줄이다.

5. sub, sup 태그

sub은 아래 첨자, sup은 위 첨자이다.

2. 그룹 짓기

관련있는 요소끼리 그룹으로 묶으면 레이아웃 구성이 쉬워짐.

1. div 태그, span 태그

div는 block 요소, span은 inline 요소
class 속성을 추가하면 CSS를 사용할 때 식별자로 사용 가능 (5장)
span은 텍스트 중간에 넣는다.

<div class="box1">
<h1>제목</h1>
<p>
콘텐츠입니다. 이것은 <span>span 태그</span>확인 용입니다.
</p>
</div>

3. 목록 만들기

1. ul, ol, dl, li

ul은 순서 없는 목록, ol은 순서 있는 목록이다. 목록 내용은 li 태그로 구성
dl은 정의형 목록이다. 목록 내용은 dt, dd 태그로 구성

<ul> <!-- 순서 없는 목록 -->
<li>귤</li>
<li>과자</li>
</ul>

<ol> <!-- 순서 있는 목록 -->
<li>1번</li>
<li>2번</li>
</ol>

<dl>  <!-- 정의형 목록 -->
<dt>용어 제목</dt>
<dd>용어 설명</dd>
</dl>

4. 링크와 이미지 넣기

1. a 태그

a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용. 그 외에 target, title 같은 속성이 있다.
href : 대상 경로 (URL, 내부 문서의 id 속성 값)
target : 대상이 연결되는 방식. 생략 가능.
title : 링크를 설명할 수 있는 텍스트 작성.

<a href="http://naver.com" target="_blank" title="네이버">네이버로 가기</a>

2. img 태그

HTML 내에서 그림과 같은 이미지 삽입시 사용. src, alt 속성
src : 이미지의 경로
./ 현재 폴더 (생략 가능하나 브라우저마다 다르니까 생략하지 않는 것이 좋다.)
../ 상위 폴더
alt : 이미지에 대한 설명(텍스트)

<img src="./images/01.jpg" alt="그림 설명">

5. 텍스트 강조하기

  • strong : 글자 굵게
  • em : 글자 기울어지게

답글 남기기

이메일 주소는 공개되지 않습니다.