HTML 기본 문법
vscode에서 자동으로 생성해 주는 HTML 코드로 기본 문법에 대해 정리해 보겠습니다.
HTML 기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<body>
안녕
</body>
</html>
- <!DOCTYPE html>
Document Type 의 의미로 html 파일로 사용 할 것이라고 웹 브라우저에 알려주는 역할을 한다.
스크립트 파일의 경우 대부분 제일 먼저 해당 파일에 대한 설명을 적어줘서 파일을 읽는 매체에 알려주는 역할을 한다. 리눅스의 sh , ksh 같은 경우와 유사.
HTML5 이전 버전에서는 다양하게 사용하였으나 이제는 간단하게 html 만 적어주면 된다.
- <html lang="en"> </html>
html 은 HTML 의 상위 요소를 설정해주는 코드로 언어를 설정해 준다. 제일 먼저 해주는 부분으로 전체 요소를 결정한다. lang 설정에 경우 en이 기본으로 설정되어 있으나 텍스트가 한글을 사용한다면 ko로 변경해 주자. 이 언어 선택에 따라 음성을 변환하거나 검색 옵션에 따라 먼저 선택될 수 있는 부분이 있다. </html> 의 경우에는 종료 태그로 페이지 가장 마지막에 작성한다.
테그란?
<tag> </tag> 와 같이 <tag> 로 시작 태그 </tag> 종료 태그로 끝나는 것을 합쳐서 테그라고 함. 시작 태그와 종료 태그 사이에 내용을 작성하여 태그에 따라 작성된 내용이 구성된다.
속성이란?
테그안에 속성을 추가하여 태그에 다양한 속성을 넣어 줄 수 있다. 위에서 나온 <html> 태그 안에 lang이라는 속성을 넣어 html 태그 안에서 속성이 적용될 수 있게 설정한 것이다.
- <head> </head>
<head> 태그는 메타데이터(metadata)의 집합을 정의할 때 사용하며 , 다음과 같은 요소들을 사용 할 수 있다.
| 태그명 | 목적 |
| <title> </title> | 페이지의 제목 |
| <style></style> | 페이지의 스타일 |
| <base> | 페이지의 위치를 정의 , href , target 속성 값만 사용 |
| <link> | 외부와 연결하기위한 정의 |
| <meta> | 페이지에 대한 설명, 키워드, 저자(author), 리다이렉 나 viewport 지정할때 사용 |
| <script></script> | 자바스크립트 적용 할때 사용 |
- <meta charset="UTF-8">
HTML 페이지의 인코딩 타입을 UTF-8로 사용 한다. EUC-KR 이나 다양한 타입을 선택할 수 있다.
- <meta http-equiv="x-ua-compatible" content="ie=edge">
최신 표준 모드로 렌더링하기 위한 설정으로 IE=edge 설정하여 최신 모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전 최신 모드로 사용 가능하게 해 준다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
브라우저 웹 페이지에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절하기 위한 옵션이다. 렌더링 영역을 브라우저 디스플레이의 뷰포트의 크기와 같게 만들고 원래 크기를 맞혀준다.
- <title>Hello</title>
페이지 화면의 제목을 나타낸다.
- <body>안녕</body>
페이지의 메인이 되는 <body> 부분이다. 여기에 모든 페이지에 필요한 요소를 작성하면 된다.
태그의 종류
- <a> 테그
다른 페이지를 연결할 때 사용하는 링크를 정의할 때 사용하며, href 나 target 등 연결을 위한 속성을 사용할 때 정의한다.
<a href="https://hmhjj.tistory.com">
- <div></div> 태그
body에서 영역별로 구분 짓기 위한 태그로 여러 요소들을 하나로 합치거나 스타일 및 컨테이너로 모을 때에도 사용한다.
<div> 안녕 </div>
- <button></button> 태그
클릭하기 위한 버튼을 생성하는 태그이다. 화면에서 어떠한 행위를 할때 필요한 테그이다.
<button>버튼</button>
- <canvas></canvas> 태그
자바스크립트에서 사용하는 그래픽을 화면에 나타낼 때 사용하는 테그이다.
<canvas style="border: solid yellow" ></canvas>
- <p></p> 테그
위와 아래에 여백을 주어 단락을 정의할 때 사용한다.
<div> 안녕 </div>
<p>여기는 단락</p>
<div> 안녕 </div>
- <h1></h1> 테그 ( 1~ 6 까지 사용 )
제목을 사용할 때 사용하는 태그로 1이 제일 크고 여백이 많고 6이 제일 작은 제목으로 사용 할수 있다.
<h1>h1 제목</h1>
<h2>h2 제목</h2>
<h3>h3 제목</h3>
<h4>h4 제목</h4>
<h5>h5 제목</h5>
<h6>h6 제목</h6>
- <img> 테그
이미지를 화면에 보여줄 때 사용한다. 아래 예시 첫 번째 코드는 블로그에 있는 사진을 링크 주소로 넣었고, 두 번째는 파일로 넣을 때 사용하는 방법이다. 뒤에 alt은 이미지가 없거나 사용할 수 없을 때 대체 텍스트를 넣어준 것이다.
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fb5ZISo%2FbtrpUHHN4Qk%2FAAAAAAAAAAAAAAAAAAAAAHh875e8DLacWClg3rNPr7QMmRyxPDe3GeieAH754d78%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1751295599%26allow_ip%3D%26allow_referer%3D%26signature%3DVKlqsbc9o426jw1ZksY4tYDRZlw%253D" alt="이미지">
<img src="image/img.png" alt="이미지">
- <input> 태그
사용자로부터 입력을 받을 수 있게 화면을 나타내 주는 태그이다.
입력 <input>
- <select></select> 테그
사용자에게 선택할 수 있는 옵션을 제공하는 클릭 하면 항목이 나오는 선택 태그이다.
<select>
<option>가</option>
<option>나</option>
<option>다</option>
</select>
- <table></table> 테그 ( <tr></tr> 항목, <th></th> 셀 )
테이블 형태의 표 형식을 사용할 때 사용하는 태그이다. 테이블을 구성할때 tr 로 구분을 나누고 각 항목을 th로 표현한다.
<table>
<tr>
<th>가</th>
<th>나</th>
<th>다</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
여기까지 테그 종류에 대해 설명했다 소개한 태그보다 어마어마하게 많은 태그들이 존재하기에 차근차근 해보면서 찾아보자.
'언어 > JAVASCRIPT+JQuery' 카테고리의 다른 글
| [HTML] 기초 (1) vscode 개발 툴 설정과 HTML 페이지 시작 (0) | 2022.01.05 |
|---|
댓글