HTML5 태그 정리

HTML5의 기본 용어 정리

1. 태그: HTML페이지에서 객체를 만들 때 사용하는 것
   

   ex) <h1>, <br> ...

2. 요소: 태그를 사용해 만들어진 객체
3. 속성: 태그에 추가 정보를 부여할 때 사용하는 것

   ex) <h1 title='header'>, <img src="image.png"> ...

4. 주석: 프로그램의 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드
   -> 주석의 활용은 프로그래밍 실력 평가의 척도가 된다. (적절하게 사용하자)

   HTML페이지에서의 주석 --> <!-- 주석 -->

Head 내부의 태그 (웹 페이지에서 눈으로 보이지는 않다.)

1. meta: 웹 페이지에 추가 정보를 전달
2. title: 웹 페이지의 제목
3. script: 웹 페이지에 스크립트를 추가
4. link: 웹 페이지에 다른 파일 추가
5. style: 웹 페이지에 스타일시트 추가
6. base: 웹 페이지의 기본 경로 지정

글자 태그 (웹 페이지에서 가장 많은 비중을 차지하는 태그)

1. 제목

   h1 ~ h6 : 숫자가 작은 태그가 가장 큰 제목 글자 태그

2. 본문

   p : 본문 글자 태그 (하나의 단락 생성)
   br: 줄바꿈 태그 (개행)
   hr: 수평 줄 태그 (가로로 줄이 그어짐)

3. 앵커

   a: 앵커 태그 (다른 웹 페이지로 이동할 수 있게 해줌)

   속성

   href: 경로를 지정해서 a 태그를 클릭하면 해당 웹 페이지로 이동시킴
          이동시킬 페이지가 없으면, '#'으로 default값 지정 가능
          href 속성에 '#id명'을 입력하면, 해당 태그로 이동한다.

4. 글자 형태

   b: 굵은 글자 태그
   i: 기울어진 글자 태그
   small: 작은 글자 태그
   sub: 아래에 달라 붙는 글자 태그
   sup: 위에 달라 붙는 글자 태그
   ins: 밑줄 글자 태그
   del: 가운데 줄이 그어진 글자 태그

목록 태그

1. 기본 목록

   ul: 순서가 없는 목록 태그
   ol: 순서가 있는 목록 태그
   li: 목록 요소

2. 정의 목록: 특정 용어와 그 정의를 표현할 때 사용하는 태그

   dl: 정의 목록 태그
   dt: 정의 용어 태그
   dd: 정의 설명 태그

테이블 태그

1. 기본 태그: <table> 로 감싼다.

   tr: 표 내부의 행 태그
   th: 행 내부의 제목 셀 태그
   td: 행 내부의 일반 셀 태그

   속성

   border: 표의 테두리 두께를 지정
   rowspan: 셀의 높이 지정
   colspan: 셀의 너비 지정

이미지 태그

1. 기본 태그: <img />

   속성

   src: 이미지의 경로 지정
   alt: 이미지가 없을 때 나오는 글자 지정
   width: 이미지의 너비 지정
   height: 이미지의 높이 지정

입력 양식 태그

1. 개요 태그: <form> 로 감싼다.

   속성

   action: 입력 데이터의 전달 위치 지정
   method: 입력 데이터의 전달 방식 선택

2. 기본 태그: <input />

   type 속성

   button: 버튼 생성
   checkbox: 체크박스 생성
   file: 파일 입력 양식 생성
   hidden: 보이지 않음
   image: 이미지 형태 생성
   password: 비밀번호 입력 양식 생성
   radio: 라디오 버튼 생성
   reset: 초기화 버튼 생성
   submit: 제출 버튼 생성
   text: 글자 입력 양식 생성
   color: 색상 선택 양식 생성
   date: 일 선택 양식 생성
   datetime: 날짜 선택 양식 생성
   .....등 (굉장히 많으므로, 외우지 말고 자주 사용해보기)

3. label 태그: <label> -> input 태그를 설명하는 데 사용

   규칙

   label 태그의 for 속성과, input 태그의 id 속성이 같아야 한다.

4. textarea 태그: <textarea> -> 여러 줄의 글자를 입력할 때 사용

   속성

   cols: 태그의 너비를 지정
   rows: 태그의 높이를 지정

5. select 태그: <select> -> 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소

   select: 선택 양식 생성 (multiple 속성으로 여러 옵션 선택 가능)
   optgroup: 옵션을 그룹화 (label 속성으로 그룹 이름 설정 가능)
   option: 옵션 생성

6. fieldset, legend 태그: 입력 양식 설명 태그

공간 분할 태그: 레이아웃 구성을 위해 사용

1. div, span 태그

   div: block 형식으로 공간 분할 (웹 페이지 너비만큼 공간 차지, 줄 바꿈)
   span: inline 형식으로 공간 분할 (한 줄에 차례차례 위치, 줄 바꿈X)

2. HTML5 시멘틱 구조 태그: 특정 공간이 어떤 공간인지 의미 부여

   header: 헤더
   nav: 네비게이션
   aside: 사이드에 위치하는 공간
   section: 여러 중심 내용을 감싸는 공간
   article: 글자가 많이 들어가는 부분
   footer: 푸터
   --> div 태그와 같은 기능을 수행한다.