HTML - Tag

태그 정리

<h1> ~ <h6> :

• 문서 내부의 컨텐츠 제목을 정의
• 순서에 맞게 작성
• css로 임의의 크기 지정 가능
• h1은 한 문서에 한 번만 지정하는 것을 권장

<p> :

• 블록요소
• 다른 블록 요소 포함 불가
• 서론, 본론, 결론처럼 단락을 나눌 때 사용

<div> :

• 블록요소
• 게임, 영화, 뉴스, 만화처럼 영역을 나눌 때 사용
• 홈페이지를 구상할 때 나뉘는 영역은 주로 div를 사용한다.
• div 요소 안에 p 요소나 다른 블록 요소를 포함할 수 있다.

<address> :

• 블록요소(다른 요소 포함 불가)
• 연락처 정보를 나타내는 요소

<blockquote> :

• 인용문(Quotation)

• 다른 사이트에서 인용한 일부를 지정

• 보통 blockquote 요소를 사용한 곳은 들여쓰기가 된다.

• 블록 요소인 p요소 사용

• cite 속성은 blockquote와 함께 사용할 수 있다.

• cite 속성은 인용문의 출처를 표시한다.(화면에서 특별히 표시되는 부분은 없지만, 검색 엔진이 이 주소 정보를 사용할 수 있다.)

<cite> :

• cite 태그는 cite 속성과 달리 책, 영화, 그림 같은 작품의 제목을 지정할 때 사용된다.
• 이탤릭체로 표시된다.

<q> :

• 짧은 인용문(Quotation) 지정
• 텍스트나 인라인 요소 포함

<br/> : 줄바꿈

<hr> : 구분선

<b> : 텍스트 진하게

<strong> : 텍스트 진하게

<i> : 텍스트 기울임

<em> : 텍스트 기울임

<b> 와 <strong> , <i> 와 <em> 차이 :

시멘틱(semantic)과 연관지어 생각해 볼 부분인 것 같다. 간단히 시멘틱이라는건 어떤 의미를 갖는 정도로 받아들이시면 좋을 것이다.

우리가 작성하고 또 이미 작성되어 있는 웹페이지의 내용들은 검색을 통해 잘 보여지기 위함도 중요한 요소라고 생각하는데, 검색을 할 때 나오는 결과는 구글과 같은 검색엔진들이 ‘robot’이란 것을 이용해서 정보를 수집했기 때문입니다.

이 robot 이 정보를 수집할 때는 html 코드를 해석하게 되는데, html 요소 중에 코드를 작성한 사람이 사용한 적절한 시맨틱요소 가 있다면 검색엔진도 효과적으로 정보를 수집하고, 개발자도 좀 더 명확한 의도를 전달할 수 있을 것이다.

따라서 이 시맨틱, 즉 의미를 가지는 태그가 em 과 strong 태그이다. i 와 b 태그는 가지지 않고 있다.

이런 시멘틱 요소를 잘 활용한 시맨틱 웹을 작성하는게 중요시되면서 i, b 태그는 잘 사용하지 않게 되니 이 부분을 이해하시면 좋을 것 같다.

<small> : 작은 텍스트 표시, 코멘트 등

<sub> : 아래 첨자

<sup> : 윗 첨자

<ins> : 내용 추가(밑줄을 그으며 해당 내용이 추가되었다는 것을 뜻한다.)

<del> : 내용 삭제(내용에 중간 선을 그으며 해당 내용이 삭제되었다는 것을 뜻한다.)

---

이미지, 링크

<ima alt="" src=""> :

• alt : 이미지를 설명하는 내용 지정(이미지를 표시할 수 없을 때 출력할 내용)

• width : 이미지의 가로 크기 지정

  (width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율에 맞게 정해진다.)

• height : 이지의 세로 크기 지정

  (height 속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해진다.)

• src : 이미지 경로 지정

• loading : 이미지 로딩 방식

• usemap :

  • usemap 속성은 클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시한다.
  • usemap 속성은 <map>요소의 name 속성과 결합하여, <img> 요소와 <map> 요소 사이의 관계를 생성한다.
  • 만약 해당 <img> 요소가 <a>요소나 <button> 요소의 자손요소이면 usemap 속성은 사용할 수 없다.)

<map> :

• html <map> 태그는 이미지 맵을 만들기 위해서 사용된다.

• name 속성을 통해 이름을 지정하고 <img> 태그에 usemap 속성으로 이미지 맵을 지정한다.

• 여기서 <map> 태그의 name의 이름과 usemap 속성의 value는 동일해야한다.

  (이때 usemap 속성의 값에는 #을 앞에 지정해야 한다.)

• 이미지 맵은 하나의 이미지에 여러 개의 링크를 거는 방법으로, 이미지 상의 클릭 위치에 따라 다른 링크가 열리는 것이다.

<area> :

• <area> 태그는 이미지 맵의 영역을 지정하기 위해서 사용되며 <map>~</map> 요소 내부에 포함되어 작성해야한다.

• alt 속성 : 대체 텍스트 지정

• coords 속성 : 링크로 사용할 영역 좌표를 지정

• href 속성 : 이동할 주소 지정

• shape 속성 : 영역의 형태를 지정

  (default:화면전체, rect:사각형, circle:원형, ploy:다각형)

<a> : 링크(link)

• 기본 문법 <a href="xxx">Label</a>

• 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다.

• href 속성의 값에는 웹 페이지, 이미지, 동영상, 파일 등의 주소를 넣는다.

  (웹 페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹 브라우저의 설정에 따라 처리한다.)

• 인라인 요소(인라인 요소와 텍스트를 포함)

• 주요 속성

  • href : 링크의 주소 지정

    • href 속성의 값 앞에 #을 붙이면, 해당 id를 가진 요소로 이동한다.

      <a href="#result">Go to result.</a>

      = id 속성 값으로 result를 갖는 요소로 이동한다.

      만약 현재 문서가 아니라 다른 문서라면 다음과 같이 작성한다.

      <a href="a.html#result">Go to result.</a>

  • title : 링크의 설명 표시

  • target : 링크된 문서를 어떤 창에서 오픈할 것인지 지정

    • _self : 기본 값으로 현재 페이지에서 링크를 처리
    • _blank : 새 창 또는 새 탭에서 링크를 처리
    • _parent, _top : 웹 페이지를 frameset으로 구성했을 때 사용

  • download : download를 추가하면, 웹 브라우저의 설정에 상관없이 링크 대상을 다운로드한다.

    • <a href="image.jpg">Go</a>

      는 image.jpg 파일을 웹 브라우저에서 보여주지만,

    • <a href="images/image.jpg" download>Go</a> 는 image.jpg 파일을 다운로드한다.

---

목록

<ol> :

• ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용한다.

<ul> :

• unordered list의 약자로, 순서가 필요 없는 목록을 만든다.

<li> :

• <ol> 태그와 <ul> 태그에서 공통적으로 사용하는 태크
• 각 항목들을 나열할 때 사용한다.
• 자동으로 들여쓰기가 된다.

<dl> :

• definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.
• <dl> 은 반드시 하나 이상의 <dt> - <dd> 짝을 담고 있어야 한다.
• <dt> , <dd> 는 <dl> 밖에서 독립정으로 사용할 수 없다.
• <dt> : 정의되는 용어의 제목을 넣을 때 사용(들여쓰기가 되지 않는다.)
• <dd> : 용어를 설명하는데 사용(자동 들여쓰기가 된다.)

---

테이블

<tr> : table row의 약자로, 가로줄을 만드는 역할(기본값은 보통 글씨체, 왼쪽정렬)

<th> : table head의 약자로, 표의 제목을 쓰는 역할(기본값은 굵은 글씨체, 중앙정렬)

<td> : table datad의 약자로, 셀을 만드는 역할(기본값은 보통 글씨체, 왼쪽 정렬)

블록요소

artice	aside	audio	address	bolckquote	canvas	dd	div	dl	fieldset	figcaption
figuer	footer	form	h1	h2	h3	h4	h5	h6	header	hgroup
hr	noscipt	ol	output	p	pre	section	table	ufoot	ul	video

인라인요소

a	abbr	acronym	b	bdo	br	button	cite	code	dfn
em	i	img	input	kbd	label	map	object	q	samp
small	script	select	strong	sub	sup	sapn	textarea	tt	var