[필기정리]Day34 - HTML 태그
- 크롬 내 개발자도구 : F12 누르기
- 주석 : <!-- ~ --> ~에 입력 시 주석처리 된다.
# p - 본문 태그
| 태그 | 설명 |
| p(paragraph) | 본문 글자, 단락 |
| br | 줄바꿈, 개행 |
| hr | 수평 줄 |
ex) 결과화면
# a - 앵커 태그(Anchor tag)
서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그
- 빈 링크 : 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.
(하이퍼링크 사용하지 않을 때!)
ex)
<a href ="#"> 필기정리 </a>//Tip : a 태그를 이용해 현재 페이지 내부의 원하는 장소로 이동할 수 있는데,
이를 위해 원하는 장소에 id 속성을 부여해야 한다.
단, 동일 페이지 내에서 아이디는 중복될 수 없다.
# 글자 형태 (요새는 스타일시트로 처리해 많이 사용하진 않는다.)
| 태그 | 설명 |
| b | 굵은 글자 (단순 굵게 표현) |
| strong | 굵은 글자 (b와 모양은 동일하나 중요하다고 인식까지 함) |
| small | 작은 글자 |
| sub | 아래첨자 글자 |
| sup | 윗첨자 글자 |
| ins | 밑줄 친 글자 |
| del | 가운데 줄 그어진 글자 |
| i | 기울어진 글자 |
| em | 강조표현 스크린 리더 내 강조 인식함 ex) 사운드 지원 e북 리더기 |
| mark | 하이라이트 표시 ex) 형광펜 |
# 인용문 형태
| 태그 | 설명 |
| blockquote | 인용문 |
| q | 짧은 인용문 |
| abbr | 약어 |
| adress | 주소 |
| cite | 창작물 제목 정의 |
| bdo | 텍스트 역방향 |
# 루비문자 : 일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미함
한국어도 한자가 많기 때문에 사용할 수 있는 태그
| 태그 | 설명 |
| ruby | 루비문자 선언 |
| rt | 위에 위치하는 작은 문자 |
| rp | ruby 태그를 지원할 경우 출력되지 않는 |
ex)
<rp>( )</rp> // ( ) 사이는 태그 지원 시 출력 안됨
- 웹 브라우저는 유연하게 태크를 해석하여 지원하지 않는 태그도 정상 출력한다.
하지만 인터넷 익스플로러 8버전 이하는 태그 이름을 임의로 지정할 경우 스타일을 적용할 수 없어 주의해야 함
# 목록 태그
네비게이션 메뉴 - 페이지를 이동할 때 사용되는 메뉴
| 태그 | 설명 |
| ul(unordered list) | 순서 없는 목록 |
| ol(ordered list) | 순서 있는 목록 |
| li(list item) | 목록 요소 |
# 정의 목록 : 특정 용어와 그 정의를 표현할 때 사용
| 태그 | 설명 |
| dl(definition list) | 정의 목록 |
| dt(definition term) | 정의 용어 |
| dd(definition description) | 정의 설명 |
# 테이블 태그 : 표를 만들 때 사용
| 태그 | 설명 |
| tr(table row) | 표 내부의 행 |
| th(table header) | 행 내부의 제목 셀 |
| td(table data) | 행 내부의 일반 셀 |
| border | 표의 테두리 두께를 지정 (속성) HTML에서 사용은 가능하나 대개 CSS 속성으로 준다. |
| colspan | 행 합치기 |
| rowspan | 열 합치기 |
ex)
<th colspan ="4"> 테이블 </th>
<th rowspan ="5"> 테이블 </th>
// Tip : 실제 코드와 다르게 <tbody> </tbody>가 임의로 추가 삽입되는 경우가 있다.
# 이미지 태그
| 속성 | 설명 |
| src | 이미지의 경로 지정 (상대경로 사용하는 것이 더 좋다.) |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지의 너비 지정 |
| height | 이미지의 높이 지정 |
width와 height도 스타일시트를 사용해 입력하는 것이 일반적임
// Tip : 이미지 완성 전 레이아웃을 미리 잡는 경우 임시이미지를 넣는 경우
placehold.it에서 사이즈별 이미지 미리 넣기
# 오디오 태그
| 속성 | 설명 |
| src | 음악 파일의 경로 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 음악을 자동 재생할지 지정 2018년부터 크롬에서 autoplay를 지원하지 않음 (차단 해제 시 사용 가능) |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
// Tip : XHTML과의 차이점
보다 엄격한 규칙을 가진 HTML로 대중화되지 못해 거의 사용 안한다.
ex)
<audio src="Kalimba.mp3" controls="controls"></audio>- source 태그 : 웹브라우저 간 지원하는 음악파일 형식이 다른 문제를 해결하기 위해 사용
ex)
<body>
<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4">
<source src="Wildlife.webm" type="video/webm">
</video>
</body>// Tip : source 태그의 type 속성을 입력하지 않아도 되지만
type 속성을 입력하지 않으면 웹 브라우저가 음악 파일을 내려받은 뒤에
재생 가능한 파일인지 확인하므로 트래픽이 낭비된다.
따라서 type 속성을 지정해주는 것이 좋다.
# 비디오 태그
- 비디오 파일 종류
MP4(H.264 + ACC)
webM(VP8 + Vorbis)
| 속성 | 설명 |
| src | 비디오 파일의 경로 지정 |
| poster | 비디오 준비 중일 때의 이미지 파일 경로 지정 |
| preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
| autoplay | 비디오를 자동 재생할지 지정 (오디오와 동일) |
| loop | 비디오를 반복할지 지정 |
| controls | 비디오 재생 도구를 출력할지 지정 |
| width | 비디오의 너비를 지정 |
| height | 비디오의 높이를 지정 |
// Tip : video 태그도 audio 태그처럼 웹 브라우저마다 지원하는 비디오 형식이 다르므로
source 태그를 사용해야 한다.
// Tip : video.js 플러그인
웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로
웹 페이지를 디자인할 때 발생할 수 문제를 해결하기 위해 video.js 플러그인을 사용한다.
ex)
<div id="" class="video-js vjs-default-skin vjs-paused" width="640" height="360" style="width: 640px; height: 360px;">
- 비디오 내 자막 내용
ex)
<track kind="subtitles" src="track.srt" srclang="ko" label="Korean">- track kind : 텍스트 트랙의 종류, subtitles(자막)이 기본값이다.
- src : 자막의 주소 상대경로
- srclang : 텍스트 트랙의 언어
- label : 텍스트 트랙의 제목
# form : 입력 양식 태그
| 속성 | 설명 | |
| action |
입력 데이터 전달 위치 지정 | |
| method (입력 데이터 전달 방식 선택) |
get | 주소에 데이터를 입력해 크기 한정 보안문제에 취약 |
| post | 별도 데이터 전송방식으로 데이터 용량 제한 없음 보안이 필요한 경우 사용 |
|
# input 태그
<input type = "해당 입력 방식">의 형태를 취한다.
| 속성값 | 설명 |
| text | 글자 입력 양식 생성 |
| button | 버튼 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 입력 양식 생성 |
| hidden | 보이지 않는 입력 방식 생성 |
| image | 이미지 형태 생성 |
| password | 비밀번호 입력 양식 생성 |
| radio | 라디오 버튼 생성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
# label 태그
label 클릭 시 input 태그로 포커스가 이동한다.
따라서 어떠한 input 태그를 설명하고 있는지 표시해줘야 한다.
input 태그에 id 속성을 입력하고,
label 태그에 for 속성을 입력한다.
ex)
<body>
<form>
<label>이름</label>
<input type="text">
</form>
</body>
# HTML5에서 추가된 input 태그
| 속성값 | 설명 |
| month | 월 선택 양식 생성 |
| week | 주 선택 양식 생성 |
| date | 일 선택 양식 생성 |
| datetime | 날짜 선택 양식 생성 |
| datetime-local | 지역 날짜 선택 양식 생성 |
| time | 시간 선택 양식 생성 |
| number | 숫자 생성 양식 생성 |
| range | 범위 선택 양식 생성 |
| search | 검색어 입력 양식 생성 |
| url URL | 주소 입력 양식 생성 |
| 이메일 입력 양식 생성 | |
| tel | 전화 번호 입력 양식 생성 |
| color | 색상 선택 양식 생성 |
# textarea : 여러 줄의 긴 문장을 작성할 수 있는 태그
게시판 내용 적는 태그
- cols : 태그의 너비 지정
- rows : 태그의 높이 지정(enter 줄 수 기준)
ex)
<textarea cols="200" rows="30"> 텍스트 </textarea>// Tip : 내용 여러줄 입력하고 싶을 땐 가독성은 떨어지나 아래 예시처럼 입력해야 한다.
(출력 화면에는 정상적으로 보인다)
ex)
<textarea>Hello Textarea
Hello Textarea</textarea>
# select 태그
| 태그 및 속성 | 설명 |
| select | 하나만 선택 가능 |
| multiple | ctrl키를 누른 상태로 클릭 시 여러 개 선택 가능 |
| option | 옵션 생성 |
| optgroup(옵션그룹) | 선택 옵션의 그룹 나눌 때 사용 |
# fieldset 태그와 legend 태그 : 입력 양식 설명
legend 태그는 fieldset 태그 안에만 사용할 수 있다.
물론 다른 곳에도 쓸 수는 있지만 아무 효과가 없다.
ex)
<fieldset>
<legend>입력 양식</legend>
<table>
<tbody><tr>
<td><label for="name">이름</label></td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email"></td>
</tr>
</tbody></table>
<input type="submit">
</fieldset>
# div, span 태그 : 공간분할태그
CSS를 사용하여 우리가 원하는 레이아웃을 구성할 수 있도록 공간 분할 해주는 것
| 태그 | 설명 |
| div | block 형식으로 공간 분할 (전체 공간 다 차지하는 방식) |
| span | inline 형식으로 공간 분할 (정해진 그 공간 만큼만 차지하는 방식) |
- block 형식의 태그와 inline 형식의 태그 비교 정리
| block 형식 태그 | inline 형식 태그 |
| div | span |
| h1 ~h6 | a |
| p | input |
| 목록 | 글자 형식 |
| 테이블 | |
| form |
// 이미지 태그와 멀티미디어 태그는 inline-block 형식을 가지는 태그이다.
# semantic 구조 태그
시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그이다.
태그가 의미를 가짐으로써 검색 엔진이나 그 외의 기계적인 동작들이
웹 페이지를 쉽게 이해할 수 있게 되고 검색이 용이해지는 장점이 있다.
| 태그 | 설명 |
| header | 머리글을 지정 제목 태그(hn) 및 nav 태그를 포함 (제목, 로고, 작성자, 작성일과 같은 메타 정보) |
| nav | 동일 사이트 내 다른 사이트의 문서로 연결(네비게이션)하는 링크의 모음으로 구성 메뉴에 자주 사용 (사이트 전체 흐름) |
| aside | 본문 이외의 내용을 표시하는 사이드바 영역 (광고, 링크 등으로 구성) |
| section | 주제별 콘텐츠 영역 제목으로 시작하는 컨텐츠 그룹핑 위해 사용 (형식) |
| article | 콘텐츠의 실제 내용을 포함하는 영역 (내용) |
| footer | 주로 하단에 위치 (회사 정보, 소유자의 소셜미디어 정보, 약관 등 관련성이 적은 부가정보) |
// Tip : 시멘틱 웹 설명 추천 링크 https://blueshw.github.io/2020/05/09/know-html-semantic-elements/
[HTML 바로 알기] Semantic Web을 위한 Semantic Elements
은 웹에서 를 담당한다. 웹페이지의 뼈대를 만들고 레이아웃을 구성한다. 웹사이트마다 구성은 다르지만, 대체로 헤더(Header), 내비게이션(nav), 콘텐츠(main), 그리고 푸터(footer)의 조합으로 만들어
blueshw.github.io
// Tip : 내용 안에 ' ' 나 " "를 넣어주고 싶을 때는
해당 내용의 바깥을 반대로 " "나 ' '를 넣어준다.
ex)
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
// HTML 내용 설명 및 예시 문제 : https://www.w3schools.com/html/default.asp
HTML Tutorial
HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. This tutorial follows the latest HTML5 standard. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try
www.w3schools.com