[HTML] 태그 선택자 모음

 HTML 태그 모음 

---

 글자 크기 태그 

 

<h1></h1>

첫 번째로 큰 제목 글자 태그

 

<h2></h2>

두 번째로 큰 제목 글자 태그

 

<h2></h3>

세 번째로 큰 제목 글자 태그

 

<h4></h4>

네 번째로 큰 제목 글자 태그

 

<h5></h5>

다섯 번째로 큰 제목 글자 태그

 

<h6></h6>

여섯 번째로 큰 제목 글자 태그

---

 본문 글자 단락 태그 

 

<p> </p> 

 

paragraph(단락) 태그의 줄임말. p태그를 사용하면 하나의 단락을 만들 수 있다.

---

 개행 태그 & 수평 줄 태그 

 

<br/>

- 개행 태그

 

<hr/>

- 수평 줄 태그

---

 웹 페이지 이동 앵커 태그 

 

<a></a>

- 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그

---

 

 빈 링크 

 

<a></a> 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 기능을 제거해도 웹 표준을 따르려면  a 태그에 href 속성을 반드시 입력해줘야 한다.

 

웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때에는 href 속성에 #을 입력한다.

---

 id 속성 

 

<a></a> 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이 때는 원하는 장소에 id 속성을 부여해야 한다. 이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 #아이디 형태의 문자열을 입력한다.

 

id 속성을 중복(동일한 id 사용)해서 사용하는 것은 웹 표준에 어긋나는 행위이다.

---

 글자 형태 태그 

 

<b></b>

굵은 글자 태그

 

<i></i>

기울어진 글자 태그

 

<small></small>

작은 글자 태그

 



아래에 달라붙는 글자 태그

 



위에 달라붙는 글자 태그

 

<ins></ins>

밑줄 글자 태그

 

<del></del>

가운데 줄이 그어진 글자 태그

---

 루비 문자 

 

일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미한다. 일본에서 자주 사용하지만 한국어도 한자어가 많으므로 사용할 수 있는 태그이다.

 

<ruby></ruby>

루비 문자 선언 태그

 

<rt></rt>

위에 위치하는 작은 문자 태그

 

<rp></rp>

ruby 태그를 지원할 경우 출력되지 않도록 하는 태그

---

 목록 태그 

 

일반적으로 페이지를 이동할 때 사용되는 메뉴를 네비게이션 메뉴라고 부른다.

 

<ol></ol>

ordered list

순서가 있는 목록 태그

 

<ul></ul>

unordered list

순서가 없는 목록 태그

 

<li></li>

목록 요소

---

 정의 목록 태그 

 

특정 용어와 그 정의를 표현할 때 사용하는 태그

 

<dl></dl>

definition list

정의 목록 태그

 

<dt></dt>

definition term

정의 용어 태그

 

<dd></dd>

definition description

정의 설명 태그

---

 테이블 태그 

 

<tr></tr>

table row

표 내부 행 태그

 

<th></th>

table header

행 내부 제목 셀 태그

 

<td></td>

table data

행 내부 일반 셀 태그

 

 테이블 태그 속성 

 

border

표 테두리 두께 지정

---

 img 이미지 태그 

 

<src> 이미지 경로 지정

<alt> 이미지 없을 때 나오는 글자 지정

<width> 이미지 너비 지정

<height> 이미지 높이 지정

---

 audio 오디오 태그 

 

<src> 음악 파일 경로 지정

<preload> 음악 재생 전 모두 불러올지 지정

<autoplay> 음악 자동 재생할지 지정

<loop> 음악 반복재생 지정

<controls> 음악 재생 도구 출력 지정

---

 video 비디오 태그 

 

<src> 비디오 파일 경로 

<poster> 비디오 준비 중일 때의 이미지 파일 경로 지정

<preload> 비디오 재생 전 모두 불러올지 지정

<autoplay> 비디오 자동 재생 지정

<loop> 비디오 반복재생 지정

<controls> 비디오 재생 도구 출력 지정

<width> 비디오 너비 지정

<height> 비디오 높이 지정

 

(video 태그도 audio 태그처럼 웹 브라우저마다 지원하는 형식이 다르므로 source 태그를 사용한다.)

---

 form 입력 양식 태그 

 

사용자에게 입력받는 공간.

 

<form> 입력 양식 태그

<action> 입력 데이터의 전달 위치 지정

<method> 입력 데이터의 전달 방식  선택

 

 input  태그 

 

<button> 버튼 생성

<checkbox> 체크박스 생성

<file> 파일 입력 양식 생성

<hidden> 노출되지 않도록 해줌

<image> 이미지 형태 생성

<password> 비밀번호 입력 양식 생성

<radio> 라디오 버튼 생성

<reset> 초기화 버튼 생성

<submit> 제출 버튼 생성

<text> 글자 입력 양식 생성

 

 label 태그 

 

<label> 태그는 어떤 input 태그를 설명하고 있는지 표시해줘야 한다.

 

 HTML5에서 추가된 input 태그 

 

<color> 색상 선택 양식

<date> 일 선택 양식

<datetime> 날짜 선택 양식

<datetime-local> 지역 날짜 선택 양식

<email> 이메일 입력 양식

<month> 월 선택 양식

<number> 숫자 생성 양식

<range> 범위 선택 양식

<search> 검색어 입력 양식

<tel> 전화번호 입력 양식

<time> 시간 선택 양식

<url> url 주소 입력 양식

<week> 주 선택 양식

---

 textarea 태그 

 

<textarea> 태그 안에 미리 글자를 입력하고 싶다면 위처럼 <textarea> 태그 안에 글자를 입력해준다.

<cols> 태그 너비 지정

<rows> 태그 높이 지정

---

 select 태그 

 

<select> 선택 양식 생성

<optgroup> 옵션 그룹화

<option> 옵션 생성

<multiple> 여러 개의 목록을 선택하고 싶을 때는 select 태그의 multiple 속성을 사용

---

 fieldset & legend 태그 

 

입력 양식을 설명할때는 fieldset 태그와 legend 태그를 사용한다. legend 태그는 fieldset 태그 안에만 사용할 수 있다.(다른 곳에도 사용 가능하지만 아무런 효과가 없음)

---

 div & span 태그 

 

<div> block 형식으로 공간 분할(차곡차곡 쌓아 올려지는 형식)

<span> inline 형식으로 공간 분할(한 줄 안에 차례차례 위치하는 형식)

---

 시멘틱 구조 태그 

 

<header> 헤더 의미

<nav> 네비게이션 의미

<aside> 사이드에 위치하는 공간 의미

<section> 여러 중심 내용을 감싸는 공간 의미

<aricle> 글자가 많이 들어가는 부분 의미
<footer> 푸터 의미

---

 선택자 형태 

 

:active

사용자가 마우스로 클릭한 태그 선택

 

:hover

사용자가 마우스 커서를 올린 태그 선택

 

:checked

체크 상태의 input 태그 선택

 

:focus

초점이 맞춰진 input 선택

 

:enabled

사용 가능한 input 태그 선택

 

:disabled

사용 불가능한 input 태그 선택

 

:first-child

형제 관계에서 첫 번째로 등장하는 태그 선택

:last-child

형제 관계에서 마지막으로 등장하는 태그 선택

:nth-child(수열)

형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택

:nth-last-child(수열)

형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택

---

 문자열 속성 선택자 

 

(1) [속성이름~="속성값"] 선택자

- 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택

 

(2) [속성이름|="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택

 

(3) [속성이름^="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

 

(4) [속성이름$="속성값"] 선택자

- 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

 

(5) [속성이름*="속성값"] 선택자

- 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택

---

 동위 선택자 

 

- 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자

- <li> 태그를 기준으로 할 때 모든 <li> 태그는 동일한 위치에 있는 동위 상태임

- 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택

- 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택

---

 문자 가상 선택자 

 

- 태그 내 특정한 조건의 문자를 선택하는 선택자(Pseudo-Element Selector)

- :: 기호를 사용하는 것이 표준이지만 : 기호를 사용해도 정상 작동

 

::first-letter

첫 번째 글자 선택

 

::first-line

첫 번째 줄 선택

 

::after

태그 뒤 위치하는 공간 선택

 

::before

태그 앞 위치하는 공간 선택

 

::selection

사용자가 드래그한 글자 선택

---

 링크 선택자 

 

:link

href 속성을 가지고 있는 a 태그 선택

 

:visited

방문했던 링크를 가지고 있는 a 태그 선택

---

 부정 선택자 

 

:not

선택자를 반대로 적용