1. HTML5 기본 템플릿 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="description" content="HTML 문서에 대한 설명" />
<meta name="keywords" content="HTML, CSS, JAVASCRIPT" />
<meta name="author" content="Dave Lee" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" href="favicon.png" />
<title>기본 구조</title>
</head>
<body>
</body>
</html>DOCTYPE
- 해당 HTML 파일이 어떤 버전으로 만들어 졌는지 나타내며, 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML문서임을 알려준다.
HTML
- HTML문서라는것을 나타내며 모든 코드를 감싼다.
- lang은 웹페이지 언어를 설정하는 속성(ko, en등)
HEAD
HTML 태그 안에는 페이지의 제목 설명, 외부에서 불러오는 파일링크등 페이지 정보를 적는다.
META
- 문서 전반에 정보를 표시하기 위한 설정
- charset : 문자 인코딩 설정 (utf-8, euc-kr등)
- name : 메타 정보의 이름
- author : 저자 이름
- description : HTML 문서 설명
- keywords : 검색엔진을 위한 키워드
호환성 관련 태그
인터넷 익스플로러(IE)에서 최신 표준 모드로 렌더링되도록 설정
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
반응형 관련 태그
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />- viewport : 현재 화면에 보여지고 있는 영역, 전체 화면을 의미
- width : device-width, 디바이스 너비
- user-scalable : 웹페이지 확대 여부 설정 (기본값은 yes지만 no로 설정하는 경우가 많다.)
- initial-scale : 디바이스 너비와 뷰포트 너비 비율 설정 (0.0 ~ 0.1)
- maximum-scale : 최대 확대 비율 (0.0 ~ 0.1)
- minimum-scale : 최소 확대 비율 (0.0 ~ 0.1)
LINK
- html 문서에 필요한 외부 데이터를 가져오기 위해 사용
- rel : stylesheet, icon 등
- href : 파일 경로 지정
BODY
- 실제 브라우저에 표시되는 내용
2. BODY에 사용되는 주요 태그
div
- 특정 영역(division)이나 구획(section)을 정의할 때 사용
- block형식이라 줄바꿈이 된다.
span
- div 처럼 특정 기능을 가지 않는 태그
- inline형식이라 줄바꿈이 되지 않는다.
h1 ~ h6
- 제목폰트: 1~6 폰트 사이즈 차이가 존재
p
- 문단을 표시하는 태그
b, strong
- b 태그는 글자를 굵게 표시하는 태그로, bold의 약자입니다.
- strong 태그도 같은 기능을 하며 최신 표준은 b 태그 보다는 strong 태그를 권장
- CSS에서 font-weight을 bold으로 설정하는 것과 같은 효과
a
- 하이퍼 링크 설정
<a href="login.html" target="_blank">내용</a> - 속성
- href : 파일 위치, URL 등
- target : 이동 방법 지정
- _self : 현재 브라우저에 띄움 (기본값)
- _blank : 새로운 브라우저로 띄움
ul, ol, li
- ul : 순서가 없는 리스트
- ol : 순서가 있는 리스트
- li : ul, ol 내부의 리스트에 사용하는 태그
<ul> <li>아이폰</li> <li>삼성폰</li> </ul> <ol> <li>아이폰</li> <li>삼성폰</li> </ol>
img
- 이미지 삽입 태그 src 속성을 통해 이미지 경로를 지정한다.
<img src="이미지 경로" alt="이미지 대체 텍스트" width="100px" height="100px"> - 속성
- src : 이미지의 경로
- alt : 이미지 대체 텍스트 (필수로 권장)
- width, height : 가로 세로 크기
table
- 표를 구현하는 태그
<table>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>푸터 1</td>
<td>푸터 2</td>
</tr>
</tfoot>
</table>- thead : 제목을 구성
- tr : 각 행들을 표시
- th : 제목으로 구성된 각 열
- tbody : 표의 내용을 나타내는 각 행들을 표시
- td : 표의 내용을 나타내는 각 열
- colspan : td 태그에서 사용, 열 확장
- rowspan : td 태그에서 사용, 행을 확장
- tfoot : 표의 마지막 행을 표시
form
- 사용자 입력을 받는 태그로 주로 input태그 등과 사용함
- 로그인 창이나, 회원가입등
- 속성
- action : 데이터가 전송되는 URL
- method : 폼 전송 방식, HTTP Method (GET, POST, PUT, DELETE 등)
- target : 이동 방법 지정
- _self : 현재 브라우저에 띄움 (기본값)
- _blank : 새로운 브라우저로 띄움
input
- 사용자 데이터를 입력 받는 태그
- text이외에 다양한 속성을 가지고 있다. 링크
- type : 입력 형식 설정 (button, radio, checkbox 등)
- maxlength : 입력 받을 수 있는 최대 길이
- minlength : 입력 받을 수 있는 최소 길이
- autofocus : 페이지 로드시 해당 입력창에 커서가 자동으로 놓이도록 설정
- autocomplete : 자동완성 기능 (on, off)
<form action="/action_page.php" method="GET" target="_blank">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
name="fname"
maxlength="5"
autofocus
autocomplete="on"
/>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" /><br /><br />
<input type="submit" value="Submit" />
</form>'Web' 카테고리의 다른 글
| [CSS] Selector 정리 (0) | 2022.12.18 |
|---|---|
| [CSS] 벤더 프리픽스(Vendor Prefix)란? (0) | 2022.12.09 |
| [CSS] Reset CSS - 브라우저에 따라 다르게 보이는 차이 (0) | 2022.12.09 |
| [Web] json-server를 활용하여 로컬에 JSON서버 구축하기 (1) | 2022.11.23 |
| [CSS] Box Model과 Box Sizing (0) | 2022.10.17 |
