출처 : HTML Study | Advanced Web Ranking
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
웹페이지에서 많이 사용되는 태그 사용 평균을 내는 사이트인데, 평균량 뿐만 아니라 여러 가지 정보들이 있어 참고하기가 매우 좋다.
TAG 정리
<html>
웹 페이지의 시작과 끝이다. 웹 페이지는 <html> 로 시작해서 </html>로 끝이 난다.
<head>
웹 페이즈의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용한다.
<title>, <meta> 등이 <head> 태그 안에 들어간다.
<body>
브라우저에 실제 표시되는 내용
<title>
문서 제목
<title> 안에 내용이 웹브러우저의 제목이다.
방문자는 제목 표시줄의 제목을 보고 내용을 유추하기 때문에 중요한 부분
<meta>
문자 인코딩 및 문서 키워드, 요약 정보
<meta charset="utf-8"> : 웹페이지의 문자 인코딩 방식자주
<div>
의미가 크게 없지만, 자주 쓰이는 태그
영역 나누기, 줄바꿈에 쓰인다. 컨텐츠를 어떤 목적에 따라 나눠야 할 때 자주 쓰인다
<span>
의미가 크게 없지만, 자주 쓰이는 태그
영역 나누기, 줄바꿈에 쓰인다. 컨텐츠를 어떤 목적에 따라 나눠야 할 때 자주 쓰인다
<div> <span> 차이점
<div> : block level element (줄 바꿈 O)
<span> : inline level element (줄 바꿈 X)
display 속성 써서 <div>를 inline으로 바꾸거나, <span>을 block으로 바꾸는 것도 가능
<a>
웹 페이지나, 외부 사이트 연결(anchor)
<a href="연결 할 링크 주소"></a>
<html>
<body>
<a href="http://www.naver.com>naver</a>
<a href="http://www.daum.net target="_blank">daum</a>
</body>
</html>
<a> 태그 속성 값
target
| __blank | 새로운 탭 또는 창 |
| _self | 현재 탭 또는 창 |
| _parent | 현재 화면을 불러낸 부모 탭 또는 창, 없으면 현재 탭 또는 창 |
| _top | 최상위 탭 또는 창, 없으면 현재 탭 또는 창 |
title
커서를 올렸을 때 나오는 설명
<a href="연결 할 페이지 경로" title="링크 설명">
id
같은 페이지 안에서 이동할 때 사용
<a id="anchorname">내용</a> - 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만든다
<a href="anchorname">내용></a> - 이름을 붙여놓은 anchor들을 다시 <a>의 href 속성으로 연결
<script>
실행 가능한 코드를 웹 페이지에 참조하기 위해 사용한다(Javascript 코드 사용)
<link>
외부 파일을 연결 할 때 사용한다.
<link href="CSS파일 경로" rel="style sheet" type="text/css">
rel="stylesheet" --> 연결한 파일
type="text/css" --> stylesheet 코드가 텍스트 파일로 된 css 유형 의미
<img>
이미지 삽입
<img src="이미지경로">
웹 페이지에 이미지를 넣을 때 사용 inline 태그 (줄 바꿈 X)
<img> 태그 속성 값
| width | 너비 |
| height | 높이 |
| alt | 이미지 설명 대체 텍스트 |
| title | 툴팁 |
| usemap | 하나의 이미지에 여러개의 링크를 만듬 |
<p>
내용 앞 뒤로 빈 줄이 생기면서 단락이 생긴다
<li>
<ul>과 <ol> 안에서 각 항목을 나열할 때 사용
<ul>
<li> 내용 </li>
</ul>
<ul>
unordered list, 순서가 없는 list순서가 없는 list
<ol>
olordered list, 순서가 있는 list<ul>과 달리 앞에 기호가 아닌 숫자, 영문 순서가 들어간다.<ul>과 달리 사용할 수 있는 속성들이 몇 가지 있다.
<style>
스타일 정보를 정의할 때 사용되는 태그
<head>태그 사이에 정의한다.
<br>
<br>태그가 삽입된 위치에 줄이 바뀐다.
<input>
form 요소. 사용자가 정보를 입력을 하는 부분을 만든다.
type에 따라 형식이 바뀐다.
<input type="유형" 속성="속성값">
<input> 속성
| readonly | 읽기 전용 필드로 만들기 |
| placeholder | 힌트 표시(필드 클릭시 내용 사라짐) |
| autofocus | 페이지를 불러오면 특정 부분이 마우스 커서가 표시 된다 |
| autocomplete | 자동완성 설정 |
| max / min | <input> 필드의 최대값과 최소값 지정 |
| maxLength | 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정 |
| step | 숫자의 간격 설정 <input>이 date, datetime, datetime-local, month, week, time, number, range 겨웅만 사용가능 |
| required | 필수 입력 필드 지정 |
<input>의 type속성
| hidden | 서버로 보내는 값을 보내는 필드 |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 |
| search | 검색상자 |
| tel | 전화번호 입력 필드 |
| url | URL 주소 입력 필드 |
| 메일 주소 입력 필드 | |
| password | 비밀번호 입력 필드 |
| number | 숫자를 조절할 수 있는 화살표 |
| range | 숫자를 조절하는 슬라이드 |
| color | 색상표 |
| checkbox | 체크박스(2개 이상 선택 가능) |
| radio | 라디오 버튼 |
| datetime | 국제 표준시(UTC)로 설정된 날짜, 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| datetime-local | 사용자가 있는 지역을 기준으로 한 날짜, 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| date | 사용자 지역을 기준으로 한 날짜(연, 월, 일) |
| month | 사용자 지역을 기준으로 한 날짜(연, 월) |
| week | 사용자 지역을 기준으로 한 날짜(연, 주) |
| time | 사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초) |
| button | 버튼 |
| file | 파일을 첨부 하는 버튼 |
| submit | 서버전송 버튼 |
| image | submit 버튼 대신 사용 할 이미지 |
| reset | 리셋 버튼 |
<form>
form의 요소가 여러 개일 경우 <ul>을 이용 해 묶어주는 경우도 있다,
<fieldset>을 사용해 form 요소들을 보기 쉽게 그룹으로 묶어 줄 수도 있다.
<legend>는 <fieldset>으로 나누어진 구역에 제목을 붙일 때 사용한다.
form태그 속성
| action | 폼을 전송할 서버 쪽 스트립트 파일 지정 |
| name | 폼을 식별하기 위한 이름을 지정 |
| accept-charset | 폼 전송에 사용할 문자 인코딩을 지정 |
| target | action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
| method | 폼을 서버에 전송할 http 메소드를 정한다(GET, POST) |
<nav>
같은 사이트 안의 페이지나 혹은 다른 사이트의 페이지로 연결하는 링크
위치에 영향을 받지 않기 때문에 <header> <footer> <aside>에 포함하거나 따로 사용할 수 있다.
<footer>
웹 페이지 밑 부분.
제작 정보, 저작권 정보
<header>
제목 지정
<button>
form 요소 중 하나
페이지에 버튼을 넣고 form을 전송 또는 reset 할 때 사용할 수 있다.
<button> 속성
| submit | form 제출 <button type="submit">전송</button> |
| reset | form 리셋 <button type="reset">다시쓰기</button> |
| button | 버튼의 형태를 만든다. |