개인공부
HTML 태그/요소/속성
breadbro
2025. 3. 4. 21:57
! + Tab = Emmet 명령어, HTML의 기본 틀
<h1> ~ <h6> = 제목 크기 수준
<p></p> = 문단 줄바꿈 (기본 스타일일 때)
<br> = 줄바꿈 (닫는 태그 필요 없음, <br/>, <br /> 혼용)
<hr> = 가로줄 (닫는 태그 필요 없음)
= 공백(스페이스)
Ctrl + /, <!-- ~ --> = 주석
<b></b>, <strong></strong> = 긁자를 굵게
<i></i>, <em></em> = 글자를 기울임
<sup></sup> = 위 첨자 (지수, 서수)
<sub></sub> = 아래 첨자 (각주, 변수, 화학식)
<u></u> = 철자 오류 표시(물결)
<s></s> = 취소선
| < | < |
| > | > |
| <blockquote> | 비교적 긴 인용문에 사용 | cite 속성으로 출처 표시 |
| <cite> | 저작물의 출처 표기 | 제목을 반드시 포함 |
| <q> | 비교적 짧은 인용문에 사용 | cite 속성으로 출처 표시 |
| <mark> | 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳 표시 |
| <abbr> | 준말/머릿글자 표시 | title 속성으로 원래 형태 표시 |
| <ul> | 순서가 없는 목록 | |
| <ol> | 순서가 있는 목록 | type, start 속성 사용 가능 |
| <li> | 목록 아이템 | ul, ol 태그의 1촌 자식으로 이 태그만 가능 |
<dl>
<dt>용어</dt>
<dd>정의</dd>
...
</dl>
| rc | 원본파일 경로 | 절대경로 또는 상대경로 |
| alt | 대체 텍스트 | 스크린 리더, 원본파일 무효시 |
| title | 툴팁 | alt의 대체제나 반복이 되어서는 안됨 |
| width | 너비 | 픽셀 단위의 정수 |
| height | 높이 | 픽셀 단위의 정수 |
| <table> | 테이블 | |
| <caption> | 표 설명 또는 제목 | 선택사항 |
| <tr> | 테이블의 행 | |
| <td> | 테이블의 데이터 셀 |
| thead> | 테이블의 헤더 부분 | <tbody> 앞에 와야 함 |
| <tbody> | 테이블의 본문 | 본 내용을 담음 |
| <tfoot> | 테이블의 푸터 부분 | <tbody> 뒤에 와야 함 |
| <th> | 열 또는 행의 헤더 | scope 속성으로 row, col 중 선택 |
| colspan | 열 병합 |
| rowspan | 행 병합 |
| <colgroup> | 표에 열을 묶어서 속성 부여 | <caption>보다 뒤, 그 외 요소보다 앞에 와야 함 |
| <col> | 열의 묶음 | span 속성으로 열 수 지정 |
| <table> | 테이블 | |
| <caption> | 표 설명 또는 제목 | 선택사항 |
| <tr> | 테이블의 행 | |
| <td> | 테이블의 데이터 셀 |
| head> | 테이블의 헤더 부분 | <tbody> 앞에 와야 함 |
| <tbody> | 테이블의 본문 | 본 내용을 담음 |
| <tfoot> | 테이블의 푸터 부분 | <tbody> 뒤에 와야 함 |
| <th> | 열 또는 행의 헤더 | scope 속성으로 row, col 중 선택 |
| lspan | 열 병합 |
| rowspan | 행 병합 |
| <colgroup> | 표에 열을 묶어서 속성 부여 | <caption>보다 뒤, 그 외 요소보다 앞에 와야 함 |
| <col> | 열의 묶음 | span 속성으로 열 수 지정 |
| _self | 현재 창 | 기본 |
| _blank | 새 창 | 텍스트나 내부 이미지의 alt 등으로 명시 필요 |
| _parent | 부모 프레임 | <iframe> 사용시 |
| _top | 최상위 프레임 | <iframe> 사용시 |
<a href="(연결할 주소)" target="(링크를 열 곳 옵션)">
href 값 앞부분
- mailto: - 이메일 링크
- tel: - 전화번호 연결
| <form> | 정보를 제출하기 위한 태그들을 포함 | autocomplete 속성: 자동완성 여부 (기본: on) |
| <input> | 입력을 받는 요소 | type 속성을 통해 다양화 |
| <label> | 인풋 요소마다의 라벨 | for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장 |
| <button> | 버튼 | type 속성에 submit(제출), reset(초기화), button(기본 동작 없음) |
| <fieldset> | 폼 태그 내 입력요소와 라벨들을 그룹화 | disabled 속성: 포함된 입력요소 비활성화 |
| <legend> | 필드셋 요소의 제목 또는 설명 |
| placeholder | 빈 칸에 보이는 안내문 | |
| maxlength | 최대 길이 | |
| minlength | 최소 길이 | 위반시 submit이 거부됨 |
| min | 최소값 | date 등 타입마다 형식 다름 |
| max | 최대값 | date 등 타입마다 형식 다름 |
| step | 간격 |
| checked | 체크박스 & 라디오 | 체크됨 여부 |
| name | 라디오 (다른 타입들에서도 사용) | 옵션들의 그룹으로 사용됨 |
| value | 라디오 (다른 타입들에서도 사용) | 각 옵션마다 실제로 넘겨질 값 |
| accept | 받아들일 수 있는 파일 형식 | 👉 작성 가이드 |
| multiple | 여러 파일 업로드 가능 여부 |
<textarea> 전용 속성들
| cols | 글자수 단위의 너비 | 기본값 20 |
| rows | 표시되는 줄 수 |
| multiple | <select> | 다중 선택 가능. 드랍다운 대신 상자로 표시 |
| selected | <option> | 선택됨 ( checkbox, radio의 checked처럼 ) |
| value | <option> | 실제로 전송될 값 |
| list | <input> | 연결할 <datalist>의 ID |
<progress> 태그 속성들
| max | 최대값 | 기본: 1 |
| value | 진행 수치 | 자바스크립트로 변경 |
<meter> 태그 속성들
| min, max | 최소값과 최대값 | |
| low, high | 전체 범위를 3등분하는 두 수치 | |
| optimum | 이상적인 값 | 3개의 구간 중 한 곳에 위치 |
| value | 실제 값 |