1.HTML 필수 태그
<html> , <head>, <title>, <body>
▲필수 태그들은 다음과 같이 HTML 문서를 만들기 위해서 기본적으로 한다.
▶<!DOCTYPE html>
HTML5 문서임을 브라우저에 알리는 지시어로 반드시 첫 줄에 나와야 하며 이것은 HTML 태그가 아니며 소문자로 기입해도된다.
▶<head></head>
<head></head>로 둘러싼 부분은 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다.
▶<meta>
<meta>태그 또한 필수 태그는 아니며 메타데이터의 태그이다. 웹페이지의 저작자, 문자 인코딩 방식, 문서 내용 등 다양한 메타 데이터를 표현하기 위해 사용된다. 이 태그는 name과 content 속성을 쌍으로 구성한다. 인코딩 방식을 지정할때는 charset속성을 사용한다.
▶<title></title>
HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 <title>태그를 이용하며 <head>내에서만 작성된다.
▶<body></body>
문서의 본문이다. 이곳은 자바스크립트 코드를 포함할 수 있다. 헤드와 바디 사이에는 아무것도 들어갈 수 없다.
※짚고 넘어가기
▷<!--주석문-->
주석문은 태그는 아니지만 HTML 문서 내에 간단한 설명을 다는 것으로 브라우저에 의해 출력되지 않는다.
주석문은 페이지 내 아무 곳에서 사용가능하다.
▷태그 구성
태그는 여러 속성들을 가질수 있으며 이러한 속성들은 값을 가지게 되어있다. 태그는 여러 속성을 가지지만 속성은 속성마다 하나의 값만 가질수 있다.
▷시작태그와 종료태그
태그는 대부분 종료태그가 존재하지만 종료태그가 없는 태그도 일부 존재한다. <img> 태그의 경우가 해당되겠다.
▷태그와 속성은 대소문자 구분 X
▷속성의 값에 불필요한 공백 문자가 들어가면 HTML5 표준에 어긋난다.
▷속성 값의 이중 인용 부호
HTML5에서 속성 값은 반드시 이중 인용 부호로 묶을 필요는 없다. 단일 인용부호를 사용해도 되고, 인용부호를 사용하지 않아도 된다. 다만, 속성 값에 빈칸이 들어가는 경우에는 반드시 인용부호를 사용해야한다.
2.HTML 일반 태그
<hn>, <p>, <hr>, <br>......등 무수히 많다. 기본 적이고 많이 사용하는 태그들만 몇개 살펴보자.
▶<hn>/<hn>
문단 제목을 다는 태그이다. h는 heading의 줄임말이며 이 태그는 장이나 절의 제목크기를 달리하는 기능을 가진다.
크기는 <h1>부터 <h6> 까지 조절할 수 있으며, <h1>이 가장 크다.
<hn>태그에 의해 출력되는 제목의 글자 크기는 브라우저가 결정하며, CSS스타일 시트를 이용하여 개발자가 변경 가능하다.
▶<p></p>
단락을 나누는 태그이며 문단을 표현한다. CSS스타일을 활용하여 단락 단위로 내여쓰기, 들여쓰기를 제어할 수 있다.
▶<hr>
수평선을 삽입하여 시각적 효과를 주는 태그이다. 이 태그는 종료태그가 없다.
▶<br>
새로운 줄로 넘어가는 태그이다.
▶<pre></pre>
HTML문서는 Enter키를 여러번 입력하여도 하나의 빈칸으로 처리하므로 개발자가 의도한 모양대로 출력되지 않는다. 개발자가 입력한 포맷 그대로 출력하기 위해서는 <pre>태그를 사용한다.
▶<div></div>
HTML태그들은 블록태그와 인라인 태그로 나뉘는데 <div>태그는 많이 사용되는 블록 태그이다. 이 태그는 특별한 의미 없이 여러 HTML태그 들을 블록으로 묶는 컨테이너로 사용된다.
▶<span></span>
<span>태그는 텍스트 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 쓰이며 많이 사용되는 인라인 태그이다.
▶<base>
메타 데이터의 태그이며 웹페이지들이 담겨 있는 기본 URL과 웹페이지가 출력될 윈도우를 지정하기 위해 사용된다. href 속성을 활용하여 값에는 URL을 지정하면된다. 그리고 웹페이지에 대한 경로는 다음 예시와 같이 간단히 파일 이름만 명시하면 된다.
<a herf=""></a>는 하이퍼 링크를 만드는 태그 및 속성이다.
▶<img>
HTML에 이미지를 삽입할 수 있는 태그이다. 이 태그의 속성은 src, alt, width, height가 있으며 src속성으로 지정할 수 있는 이미지 종류는 BMP, GIF, PNG, JPG, animated-GIF가 있다.
src |
이미지 파일의 URL. 필수 속성 |
alt |
이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열. 필수 속성 |
width |
이미지가 출력되는 너비로, 생략되면 원본이미지 값으로 출력된다. |
height |
이미지가 출력되는 높이로, 생략되면 원본이미지 값으로 출력된다. |
여기서 조심해야 할 것은 src 값과 alt값이 같은 의미를 지니지 않으면 혼란을 초래할 수 있다.
▶<ol>,<ul>,<dl>
이 세가지 태그는 데이터를 나열할 때 사용되는 리스트 태그이다. 리스트의 각 아이템은 <li>태그를 사용하며 </li>는 생략가능하다.
<ol></ol>
순서있는 리스트 태그이며 type속성을 가지며 값의 종류는 1, A, a, I, i 가 있다. <li>내에 type속성을 주어 특정 아이템의 마커를 내가 원하는 대로 줄수 있다.
<ul></ul>
순서 없는 리스트 태그이다.
<dl></dl>
정의 리스트 태그이며 정의 리스트 전체는 <dl>을 사용하고 각 아이템에서 용어는 <dt>, 설명은 <dd>로한다. </dt>와</dd> 모두 생략 가능하다.
위와 같이 태그는 정말 많은 종류가 존재하며 이밖에도 더 무수히 많은 태그들이 있다. 다루지 못한 태그들은 앞으로 차차 다루어보도록 하자.
'HTML' 카테고리의 다른 글
| HTML / DOM요소는 어떻게 만들어지나 (0) | 2020.12.25 |
|---|---|
| HTML / 스크립트 태그 작성 방법 (0) | 2020.12.25 |
| H4. 미디어 삽입, 웹폼 (0) | 2020.03.06 |
| H3. 표, 하이퍼링크, 앵커, 파일다운로드 링크, 인라인프레임 (0) | 2020.03.05 |
| H1. HTML과 CSS, J.S를 맛보기로 살짝 활용해 간략한 자기 소개 페이지 만들기! (0) | 2020.03.04 |
