[HTML] TAGS

 

텍스트

 

<hn> : 제목 표시

- 일반 텍스트보다 크고 진하게 표시

- <h1> ~ <h6>까지 사용

  -> <h1>이 가장 크게 표시되고 <h6>이 가장 작게 표시

 

<p> : 단락 만들기

- 텍스트를 표시할 때 가장 많이 사용

#단락 : 앞뒤에 줄바꿈이 있는 텍스트 덩어리

 

<br> : 줄 바꾸기

- 닫는 태그 (</br>)가 없음

 

<hr> : 분위기 전환을 위한 수평 줄 넣기

- 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용

- 닫는 태그 없음

- 기본으로 가로선이 삽입되지만, CSS를 이용해 가로선을 없앨 수 있음

 

<blackquote> : 인용문 넣기

 

<pre> : 입력하는 그대로 화면에 표시

 

<strong>, <b> : 글씨를 굵게

- 중요도를 높이고 싶으면 <strong> 중복 사용 가능

- <strong>은 강조 할 때 사용

- <b>는 단순히 굵게 표시

 

<em>, <i> : 이탤릭체(비스듬이)로 표시

- <i>는 단순히 이탤릭체로 표시할 때 사용

-<em>은 흐름상 특정 부분을 강조하고 싶을 때 사용

 

<q> : 인용 내용 표시

- 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 따옴표를 붙여 표시

 

<mark> : 형광펜 효과

 

<span> : 줄바꿈 없이 영역 묶기

- 일부 텍스트만 묶어서 스타일을 적용하려고 할 때 사용

 

<ruby> : 동아시아 글자 표시

 

<abbr> : 약자 표시

 

<cite> : 웹 문서나 포스트에서 참고 내용 표시

 

<code> : 컴퓨터 인식을 위한 소스 코드

 

<kbd> : 키보드 입력이나 음성 명령 같은 사용자 입력 내용

 

<small> : 부가 정보처럼 작게 표시해도 되는 텍스트

 

<sub> : 아래 첨자

 

<sup> : 위 첨자

 

<s> : 취소선

 

<u> : 링크 표시 용도가 아니라 단순히 밑줄을 그을 때 

 

 

---

 

 

목록

 

<ul> + <li> : 순서 없는 목록

- <ul> 태그 안에 <li> 태그를 사용해 각 항목 표시

- 각 항목 앖에 작은 원이나 사각형 같은 불릿(bullet)이 붙음

 

<ol> + <li> : 순서 목록

- 여러 속성들이 함께 사용되어 목록의 숫자 표시 방법이나 시작하는 숫자 등을 바꿀 수 있음

- type 속성 : <ol type=" ">

속성 값	설명
1	숫자(기본값)
a / A	영문 소문자 / 대문자
i / I	로마숫자 소문자 / 대문자

- start 속성 : 기본 1부터 시작, 중간번호부터 시작 가능

- reversed 속성 : 항목을 역순으로 표시

 

<dl> + <dt> + <dd> : 설명 목록

- <dl> : 목록

- <dt> : 제목

- <dd> : 설명 표시

 

 

---

 

 

표

 

<table> + <tr> + <td> + <th> : 기본적인 표

<table>
  <tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
  </tr>
</table>

- <th> : 표에 제목 셀 만들기

- colspan : 셀을 가로로 합침 (행을 합침)

- rowspan : 셀을 세로로 합침 (열을 합침)

 

<caption>, <figcaption> : 표에 제목 붙히기

- <caption> : <table> 태그 바로 다음에 사용

                  다른 태그를 사용해 제목을 여러줄로 표시하거나 텍스트를 꾸밀 수 있음

- <figcaption> : 설명 글을 붙이고 싶은 대상을 <figure>로 감싼 후 <figcaption>을 이용해 제목이나 설명 글을 입력

 

<thead> + <tbody> + <tfoot> : 표 구조 정의

- table의 head, body, foot 부분들을 정의

 

<col>. <colgroup> : 여러 열 묶어 스타일 지정

- 표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정

- <col> : 한 열에 있는 모든 셀에 같은 스타일 적용

            닫는 태그 없음

- <colgroup>안에 묶는 열의 개수만큼 <col> 태그를 넣어서 사용

- <caption>뒤에 사용하거나 <tr>,<td> 전에 사용

 

 

---

 

 

이미지

 

<img> : 이미지 삽입

<img src="이미지 경로" alt="설명" width="넓이" height="높이"></img>

- src : 이미지 파일 경로 지정

- alt : 이미지를 설명해 주는 대체 텍스트

- width(넓이) height(높이) 속성으로 이미지 크기 조정

 

 

---

 

 

링크

<a> : 링크

 

속성	설명
href	링크한 문서나 사이트의 주소 입력
target	링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정
download	링크한 내용을 다운로드
rel	현재 문서와 링크한 문서의 관계를 알려줌
hreflang	링크한 문서의 언어를 지정
type	링크한 문서의 파일 유형을 알려줌

 

- target 속성

속성 값	설명
_blank	링크 내용이 새 창이나 새 탭에서 열림
_self	target속성의 기본값으로 링크가 있는 화면에서 열림
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시

 

<map>. <area> : 이미지 맵 지정

- 이미지 맵 : 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열림

- usermap 속성으로 이미지 맵을 지정

- <area> : 이미지 맵으로 사용할 이미지에 영역 표시