태그 (link)
- 중요도 : ●●●●●
- 종류 : 자동으로 닫는 태그
- 가능한 부모 :
- HTML 파일 외부의 리소스를 해당 HTML 파일에서 사용하기 위해 사용한다. 주로 CSS 파일을 불러올때(Import) 사용한다.
- 속성
- href : 불러올 외부 리소스의 경로.
- rel : 불러올 외부 리소스의 종류이다. 그 값을 "stylesheet"으로 지정하면 해당 리소스가 CSS 파일임을 의미한다.
태그(ol)
- 중요도 : ●●●●○
- 종류 : 닫는 태그 필요
- ol태그 혹은 정렬된 리스트(Ordered List)는 순서와 관계있는 목록을 표시하기 위해 사용한다.
그 원소로 li태그를 가진다. - 시멘틱 : 있음
태그(ul)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- ol태그 혹은 정렬된 리스트(Ordered List)는 순서와 관계있는 목록을 표시하기 위해 사용한다. 그 원소로 li태그를 가진다.
- ul태그 혹은 정렬되지 않은 리스트(unoredered List)는 순서와 관계없는 목록을 표시하기 위해 사용한다. 그 원소로 li태그를 가진다.
- 주로 메뉴를 구성할때 사용하기 때문에 중요함.
- 시멘틱 : 있음
태그(li)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- li태그 혹은 리스트 아이템(List item)태그는 ol 및 ul 리스트의 각 항목을 구성하기 위해 사용한다.
- 시멘틱 : 있음
태그(table)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- table태그 혹은 표(Table)태그는 표를 그릴 때 사용한다.
- 사이트 레이아웃을 위해 표를 사용하지 않아야한다. 순수 데이터를 담는 용도로만 사용.
- 시멘틱 : 있음
태그(caption)
- table태그의 자식으로, 해당하는 표의 제목을 담는다.
- 생략 가능.
- 여러개 사용 불가.
- 없어도 문제되진 않음.
태그(thead)
- table 태그의 자식으로, 열의 기준이되는 설명이나 이름 등을 담기 위해 사용한다.
- 생략가능
태그(tbody)
- table태그의 자식으로, 테이블의 실제 데이터를 담기 위해 사용한다. 열/행의 설명이나 제목이 들어가서는 안된다.
- 생략불가.
태그(tfoot)
- table태그의 자식으로, 주로 tbody안에 있는 실제 데이터의 통계(합, 평균 등)를 내기위해 사용한다.
- 생략 가능.
태그(tr)
- thead 혹은 tbody 혹은 tfoot의 자식으로, tr태그(테이블 행, Table Row) 하나는 행 하나를 의미한다.
- tr태그는 실제 데이터를 직접 담아서는 안된다.
태그(th)
- tr의 자식으로, th태그(Table Heading)는 해당 열 혹은 행을 대표할 수 있는 이름이나 정보를 직접 담기 위해 사용한다.
- th태그 하나는 열 하나를 의미한다.
- th태그의 내용은 실제(통계 가능한) 데이터를 담지 않는다.
- 속성
- rowspan : 해당 셀(칸, Cell)이 세로 방향(행 방향)으로 차지 해야 하는(통합 해야하는) 칸의 개수. 생략시 1.
- colspan : 해당 셀이 가로 방향(열 방향)으로 차지해야 하는 칸의 개수. 생략시 1.
태그(td)
- tr의 자식으로 td태그(Table Data)는 실제 데이터를 직접 담기 위해 사용한다.
- td태그 하나는 열 하나를 의미한다.
- 속성은 th와 동일하게 사용한다.
태그(form)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- form태그(양식 태그)는 서로 관련있는 input, select 등의 사용자 입력 값을 받는 태그 들을 묶어내는 역할을 한다. (로그인 폼, 회원가입 폼 등...)
태그(label)
- 중요도 : ●●●●○
- 종류 : 닫는 태그 필요
- label태그는 input태그를 감싸서 해당 input의 간략한 정보나 종류를 전달하기 위해 사용한다.
태그(select)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- select태그는 드롭다운(Drop Down) 방식의, 주어진 선택지 중 하나만
선택할 수 있게끔하는 태그이다. (input의 radio와 역할은 같음)
rootgo 매일, 꾸준히 성장하는 사람🌱