태그와 속성
- 태그 : HTML 페이지에서 객체를 만들 때 사용하는 것.
단독으로 사용하는 태그는 <br/> 처럼 XHTML5 표기법을 사용한다.
- 속성 : 태그에 추가 정보를 부여할 때 사용하는 것.
<h1 title="header"> HELLO HTML5 </h1> (title : 속성 이름, header : 속성 값)
<img src="image.png"/> (src : 속성 이름, image.png : 속성 값)
HTML5 페이지 구조
<!DOCTYPE html>
<html>
<head>
<title> HELLO HTML5 </title>
</head>
<body>
</body>
</html><!DOCTYPE html> : 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 함.
<html> : HTML페이지의 루트 요소, 모든 HTML 태그는 html 태그 내부에 작성한다.
- lang 속성
| 국가 | 속성값 | 국가 | 속성값 |
| 한국 | ko | 미국 | en |
| 일본 | ja | 러시아 | ru |
| 중국 | zh | 독일 | de |
lang속성은 구글과 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떤 언어로 만들어져 있는지 쉽게 인식하게 만듬.
<head> : body태그에서 필요한 스타일시트와 자바스크립트를 제공하는데 사용
- head 태그 내부에 넣을 수 있는 태그
| 태그 이름 | 설명 |
| meta | 웹 페이지에 추가 정보를 전달 |
| title | 웹 페이지의 제목 |
| script | 웹 페이지에 스크립트를 추가 |
| link | 웹 페이지에 다른 파일을 추가 |
| style | 웹 페이지에 스타일 시트를 추가 |
| base | 웹 페이지의 기본 경로를 지정 |
<title> : 브라우저에 표시하는 제목을 지정하는 태그
<body> : 사용자에게 보이는 실제 부분
글자 태그
- 제목 태그 <h1> ~ <h6>
h1 ~ h6의 h는 heading을 의미하며 각각의 숫자는 크기 및 우선순위를 나타냄
일반적으로 웹 페이지를 만들 때는 h1태그부터 h3태그까지 사용.
- 본문 태그 <p>, <br>, <hr>
p는 paragraph의 줄임말로 하나의 단락을 만들 수 있다.
br 줄 바꿈 태그
hr 수평 줄 태그 : 가로로 그어지는 줄
- 앵커 태그 <a>
| 태그 이름 | 설명 |
| a | 앵커 태그 |
HTML에서 가장 중요한 단어는 H가 의미하는 하이퍼텍스트이다.
하이퍼텍스트는 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미.
HTML 웹 페이지가 이렇게 조직화된 문서를 가질 수 있는 이유는 앵커태그 때문.
<a href="#"> : 빈 링크
<a href="#아이디"> : a태그를 클릭하면 지정한 id속성이 있는 위치로 스크롤바가 자동으로 이동
속성
target = "_self" : 내 창이 바뀜
target = "_blank" : 새 창이 열림
- 글자 태그
| 태그 이름 | 설명 |
| b | 굵은 글자 태그 |
| i | 기울어진 글자 태그 |
| small | 작은 글자 태그 |
| sub | 아래에 달라 붙는 글자 태그 |
| sup | 위에 달라 붙는 글자 태그 |
| ins | 밑줄 글자 태그 |
| del | 가운데 줄이 그어진 글자 태그 |
글자를 기울이거나 굵게 만드는 기능은 모두 스타일시트로 처리하므로 최근에는 잘 사용 안함
목록 태그
| 태그 이름 | 설명 |
| ul | 순서가 없는 목록 태그 |
| ol | 순서가 있는 목록 태그 |
| li | 목록 요소 |
| dl | 정의 목록 태그 |
| dt | 정의 용어 태그 |
| dd | 정의 설명 태그 |
- ol(ordered list) : 정렬된 목록
- ul(unordered list) : 정렬되지 않은 목록
- li(list item) : 목록 요소
- dl(definition list) : 정의 목록
- dt(definition term) : 정의 용어
- dd(definition description) : 정의 설명
테이블 태그
| 태그 이름 | 설명 |
| tr | 표 내부의 행 태그 |
| th | 행 내부의 제목 셀 태그 |
| td | 행 내부의 일반 셀 태그 |
| border | 표의 테두리 두께를 지정 |
| rowspan | 셀의 높이 지정 |
| colspan | 셀의 너비 지정 |
이미지 태그 <img />
| 속성 이름 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지의 너비 지정 |
| height | 이미지의 높이 지정 |
* 현대에는 스타일시트를 사용해 입력하는 것이 일반적이므로 width,height 속성은 잘 사용하지 않음
- placehold.it : 이미지 크기는 아는데 아직 이미지가 없을 때 <img src ="http://placehold.it/s300x200" />
오디오 태그
<audio></audio>
| 속성 이름 | 설명 |
| src | 음악 파일의 경로 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 음악을 자동 재생할지 지정 |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
<source />
- 웹 브라우저마다 지원하는 확장자 형식이 다르다. 이러한 문제를 해결하고자 만들어진 태그가 바로 source태그이다.
- audio또는 video 태그 안에 입력하는 태그
<source src = "Hello.mp3" type="audio/mp3" />
<source src = "Hello.mp3" type="audio/ogg" />MP3 파일과 OGG 파일을 사용하면 모든 브라우저에서 음악을 재생 가능하다.
비디오 태그
| 속성 이름 | 설명 |
| src | 비디오 파일의 경로 지정 |
| poster | 비디오 준비 중일 때의 이미지 파일 경로 지정 |
| preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
| autoplay | 비디오를 자동 재생할지 지정 |
| loop | 비디오를 반복할지 지정 |
| controls | 비디오 재생 도구를 출력할지 지정 |
| width | 비디오의 너비 지정 |
| height | 비디오의 높이 지정 |
<source src = "Hello.mp4" type="audio/mp4" />
<source src = "Hello.webm" type="audio/webm" />- video 태그는 기본적으로 MP4 형식을 사용하면 된다.
poster속성은 동영상이 대기 상태일 때 표시할 이미지를 의미.
<body>
<video poster = "http://placehold.it/640x360"
width = "640" height = "360" controls = "controls">
<source src = "Wildlife.mp4" type="video.mp4" />
</video>
</body>- 익스플로어 8 이하에서는 video태그가 동작하지 않으므로 이러한 문제를 해결하기 위해 video.js플러그인을 사용한다.
입력 양식 태그
form 태그
| 속성 이름 | 설명 |
| action | 입력 데이터의 전달 위치를 지정 |
| method | 입력 데이터의 전달 방식을 선택 |
method 속성 : GET과 POST
GET : 주소에 데이터를 입력해서 보내는 방식, 데이터의 크기가 한정되어 있음
POST : 별도로 택배를 붙여 데이터를 전송하는 방식이라 데이터 용량에 제한이 없음
input 태그
| 속성값 | 설명 |
| button | 버튼을 생성 |
| checkbox | 체크박스를 생성 |
| file | 파일 입력 양식을 생성 |
| hidden | 이미지 형태를 생성 |
| image | 이미지 형태를 생성 |
| password | 비밀번호 입력 양식을 생성 |
| radio | 라디오 버튼을 생성 |
| reset | 초기화 버튼을 생성 |
| submit | 제출 버튼을 생성 |
| text | 글자 입력 양식을 생성 |
HTML5 입력 양식 태그
| 속성값 | 설명 |
| color | 색상 선택 양식을 생성 |
| date | 일 선택 양식을 생성 |
| datetime | 날짜 선택 양식을 생성 |
| dateteime-local | 지역 날짜 선택 양식을 생성 |
| 이메일 입력 양식을 생성 | |
| month | 월 선택 양식을 생성 |
| number | 숫자 생성 양식을 생성 |
| range | 범위 선택 양식을 생성 |
| search | 검색어 입력 양식을 생성 |
| tel | 전화번호 입력 양식을 생성 |
| time | 시간 선택 양식을 생성 |
| url | URL주소 입력 양식을 생성 |
| week | 주 선택 양식을 생성 |
textarea 태그
여려 줄의 글자를 입력할 때 사용
| 속성 이름 | 설명 |
| cols | 태그의 너비를 지정 |
| rows | 태그의 높이를 지정 |
select 태그
여러개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소
| 태그 이름 | 설명 |
| select | 선택 양식을 생성 |
| optgroup | 옵션을 그룹화 |
| option | 옵션을 생성 |
fieldset 태그와 legend 태그
입력 양식을 설명할 때 사용하는 태그
공간 분할 태그
| 태그 이름 | 설명 |
| div | block 형식으로 공간을 분할 |
| span | inline 형식으로 공간을 분할 |
div 태그는 block 형식으로 공간을 분할함.
block 형식이란 차곡차곡 쌓아 올려지는 형식을 말함. 따라서 글자가 웹 페이지의 너비만큼 차지하면서 쌓아 올려짐
반면 span태그는 inline형식으로 공간을 분할함.
inline 형식은 한 줄 안에 차례차례 위치하는 형식을 말함.
| block 형식 태그 | inline 형식 태그 |
| div 태그 | span 태그 |
| h1 태그 ~ h6 태그 | a 태그 |
| p 태그 | input 태그 |
| 목록 태그 | 글자 형식 태그 |
| 테이블 태그 | |
| form 태그 |
HTML5 시멘틱 구조 태그
| 태그 이름 | 설명 |
| header | 헤더를 의미 |
| nav | 내비게이션을 의미 |
| aside | 사이드에 위치하는 공간을 의미 |
| section | 여러 중심 내용을 감싸는 공간을 의미 |
| article | 글자가 많이 들어가는 부분을 의미 |
| footer | 푸터를 의미 |
- 시멘틱 태그는 div 태그와 같은 기능을 수행하는 태그이다. 하지만 태그는 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉽게 이해할 수 있게 하는 데 의미가 있다.
테이블 태그
table, tr, th, td
<td colspan = "2">
<td rowspan = "2">
colspan : 두 개 이상의 열을 하나로 합치기 위해 사용
rowspan : 두 개 이상의 행을 하나로 합치기 위해 사용
<table cellpadding = "3">
<table cellspacint = "2">
cellpadding : table cell 외곽과 cell 컨텐츠 사이 공간을 의미
cellspacing : table cell과 cell 사이의 공간을 의미
'개념공부 > FrontEnd' 카테고리의 다른 글
| Javascript 객체 및 객체의 종류 (0) | 2021.12.13 |
|---|---|
| CSS3 선택자 기본 (0) | 2021.12.13 |
| [Vue.js] Vue.js란 무엇인가? (0) | 2021.11.04 |
| [JavaScript] `(백틱) 을 이용한 Template literals ${} 데이터 추출 (2) | 2021.11.03 |
| [JavaScript] 숫자,문자가 섞인 문자열에서 숫자만 추출하기 (0) | 2021.11.03 |
댓글