JUST GO
[HTML] 태그정리 본문
태그 (link)
- 중요도 : ●●●●●
- 종류 : 자동으로 닫는 태그
- 가능한 부모 : <head>
- 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와 역할은 같음)
태그(option)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- option태그는 <select>태그의 구성 요소이다. 표시 텍스트는 태그 안에, 해당 선택지 값은 value 속성을 이용한다.
- 속성
- disabled : 해당 option을 선택하지 못하도록 한다. 속성값은 부여하지 않는다.
- selected : 해당 option이 선택된 상태로 초기화한다. 속성값은 부여하지 않는다.
- value : 해당 option을 선택했을 경우 실제 서버로 전송할 값.
태그(optgroup)
- 중요도 : ●●○○○
- 종류 : 닫는 태그 필요
- 유사한 <option>을 묶어내는 역할을 하나, 이는 시각적 요소에 국한되어 있고 실제 역할은 없다고 할 수 있다.
- 속성
- label : 표시할 텍스트를 지정한다.
태그(h)
- 중요도 : ●●●●○
- 종류 : 닫는 태그 필요
- 문서나 구획의 제목을 담기위해 사용한다.
- h1 부터 h6 까지의 태그를 사용하며 <h1>이 가장 상위 제목, <h6>가 가장 하위 제목이다.
- 시멘틱 : 있음
태그(div)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 없음
태그(span)
- 중요도 : ●●●●●
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 한 줄을 다 차지하지 않는다.
- 시멘틱 : 없음
태그(main)
- 중요도 : ●●●○○
- 종류 : 닫는 태그 필요
- 문서의 주된 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(nav)
- 중요도 : ●●●○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- nav(Navigator) 태그는 서로 연관있는 링크를 모아놓을 때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(header)
- 중요도 : ●●●○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 상단 정보(로그인 폼, 검색창, 로고, 메뉴 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(footer)
- 중요도 : ●●●○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 하단 정보(저작권, 사업자정보, 연락처 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(section)
- 중요도 : ●○○○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리하면 의미가 없어지는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(article)
- 중요도 : ●○○○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리해도 의미가 있는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(aside)
- 중요도 : ●○○○○
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 부수적인 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음
태그(input)
- 중요도 : ●●●●●
- input태그는 사용자에게 값을 받는 용도로 사용된다.
- 입력 받은 값은 주로 서버로 전송한다.
- 속성
- autofocus : 페이지가 로드되었을 때 해당 속성을 가진 input이 포커스를 가지게한다.
- checked : type이 checkbox이거나 radio인 경우 선택(체크)된 상태로 지정한다. 속성 값은 부여하지 않는다.
- disabled : 해당 input요소를 사용하지 못하게한다. 속성 값은 부여하지 않는다.
- max : type이 number인 경우 그 값의 최대값을 지정한다.
- min : type이 number인 경우 그 값의 최소값을 지정한다.
- maxlength : 값의 최대 길이
- minlength : 값의 최소 길이
- mutiple : type이 file된 경우 파일을 두 개 이상 선택할 수 있게 한다. 속성값은 부여하지 않는다.
- name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.
- pattern : (안 중요) 정규식(Regular Expression)을 통해 값을 필터한다.
- placeholder : 값이 비어 있을때 표시할 힌트 메세지.
- readonly : 해당 input의 값을 변경하지 못하게 한다.
- required : 빈 값을 허용하지 않음. 속성 값은 부여하지 않는다.
- value : 버튼(button, reset, submit)이 아닐때, 초기 값을 지정한다. 버튼의 경우 표시할 버튼 텍스트를 지정한다.
- type : input태그의 종류를 지정한다. 가능한 값은 아래와 같다.
- "button" : 그냥 버튼. 아무일도 안 함.
- "checkbox" : 체크박스 필드. 여/부 값을 받기 위해 사용한다.
- "email" : 이메일 필드. 입력 받는 값이 이메일이라면 반드시 해당 타입 값 사용.
- "file" : 파일 필드. 주로 파일을 업로드할 때 사용한다. (프로필 사진 선택, 첨부파일 추가 등)
- "number" : 숫자를 입력받기 위한 필드.
- "password" : 비밀번호 필드. 입력 문자가 보이지 않음.
- "radio" : name 속성 값이 같은 radio 중에 하나만 선택하게 하기 위해 존재.
- "reset" : 초기화 버튼. 해당 클리어 버튼이 포함되어 있는 <form> 태그 내부의 모든 input의 값을
초기화 한다.
- "submit" : 제출 버튼. 해당 제출 버튼이 포함되어 있는 <form> 태그 내부의 모든 값을 서버로 전송한다.
(로그인, 회원가입, 글 작성 버튼 등)
- "tel" : 연락처 필드. 입력 받는 값이 연락처라면 반드시 해당 타입 값 사용.
- "text" : 일반 텍스트. type 속성 생략시 기본값.
경로
- 경로(path) : 어떠한 디렉토리(Directory) 혹은 파일(File)등의 리소스(Resource)에 접근하기 위해
사용하는 위치를 나타내는 값이다.
- 구분자(Separator) : 윈도우의 파일 시스템에서 만 역슬래쉬(\)를 쓰고 나머지 리눅스, 맥, HTTP 프로토콜 등에서는 슬래쉬(\)를 사용한다.
- 구분자로 구분된 구분자의 왼쪽에 있는 대상은 디렉토리이다.
- 경로의 끝이 구분자로 끝나지 않을 경우 마지막 대상은 파일이다.
- 웹 경로(주소, URL)는 다음과 같은 형식으로 이루어진다. (중괄호 생략)
{프로토콜}://{도메인}/{경로}
- 절대 경로(Absolute Path) : 아래의 형식으로 경로를 작성하면 그것은 절대경로다. 절대 경로를 명시할 경우 올라갈 수 있는 최상위 디렉토리까지 올라간 뒤 탐색을 시작한다.
1. 프로토콜(Protocol)과 도메인(Domain)을 직접 명시하는 경우
2. 구분자(/, \)로 시작하는 경우
- 상대 경로(Relative Path) : 절대 경로가 아닌 경우. 주로 파일 이름을 바로 적으면서 시작한다.
상대 경로를 명시할 경우 현재의 파일이 실행되고 있는 위치를 기준으로 탐색을 시작한다.
- 현재 위치는 마침표(.) 특수기호로 표시한다.
- 상위 위치는 마침표 두개(..)로 표시한다.
'HTML > 학습내용' 카테고리의 다른 글
| [HTML] 공통속성(Attribute) (0) | 2022.10.03 |
|---|---|
| [HTML] 기본개념 (0) | 2022.10.03 |
| [HTML] Tag정리(2) (0) | 2022.10.03 |
| [HTML] Tag 정리 (0) | 2022.09.13 |