[HTML] HTML 기초 및 주요 태그 정리

HTML 이란?

HTML은 Hyper Text Markup Language의 약자로 웹페이지를 작성하기 위한 언어입니다. Hyper Text는 텍스트에 하이퍼링크 설정이 가능하고 텍스트들이 서로 연결되어 있다는 의미이고, Markup은 종이 인쇄 산업시대 때 복사 편집인이 인쇄할 종이의 여백 부분에 특별한 글꼴이나 색 정보를 위해 표시(마크업)했던 것에서 사용되기 시작한 말입니다.

HTML 특징

Markup언어는 태그(tag)로 구성되고 태그 안에 문서의 내용을 표시합니다.
HTML 태그(tag)와 HTML 엘리먼트(element)는 같은 의미로 사용됩니다.
태그는 <>로 표시하며, 시작태그와 끝태그로 구성됩니다.
empty content를 가지는 빈태그가 있으며, <tag /> 로 표현 가능합니다.
태그는 일반적으로 소문자를 사용합니다.
태그는 속성(attribute)을 가질 수 있으며, name=value의 형식을 갖습니다.
주석은 로 표시하며, 단축키는 ctrl+shift+/ (상이할 수 있음) 입니다.

주요 태그

기본 구조

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

<!DOCTYPE>	문서(document)의 타입을 정의
<html>	HTML 문서의 루트 요소(root element)를 정의, 한 페이지의 시작과 끝
<head>	문서에 대한 정보인 메타데이터(metadata)의 집합을 정의
	<meta>	문서에 대한 정보인 메타데이터(metadata)를 정의
	<title>	문서의 제목(title)을 정의
<body>	문서의 내용(contents)을 정의

head 태그가 포함할 수 있는 태그

<meta>	문서에 대한 정보인 메타데이터(metadata)를 정의
<title>	문서의 제목(title)을 정의
<base>	문서의 모든 상대 주소에 대한 기본 URL과 target 속성값을 정의, 기본 경로를 지정
<link>	문서와 외부 소스(external resource) 사이의 관계를 정의, 다른 파일을 추가
<style>	문서에 스타일시트를 추가
<script>	문서에 자바스크립트와 같은 스크립트를 추가

* 참고 : 상대 경로와 절대 경로

경로에는 상대 경로와 절대 경로 두 가지가 있습니다. 상대 경로는 파일이 실행되는 위치를 기준으로 한 경로이고, 절대 경로는 전체 URL을 사용한 경로입니다. 다음과 같은 구조에서 test1.html에서 images 폴더의 001.png 파일 경로를 찾는 상황을 생각해 봅시다.

상대 경로와 절대 경로를 직접 지정해 주면 다음과 같이 작성 가능합니다. ../ 은 해당 파일이 위치한 곳에서 한 단계 위의 상위 폴더(여기서는 webapp 폴더)를 찾아가는 표시입니다. 만일 해당 파일이 위치한 폴더와 같은 위치에 있는 폴더 및 파일을 찾아가고 싶으면 / 없이 바로 해당 이름을 적어주면 됩니다. (ex. "images/001.png") test는 프로젝트명입니다.

* src (Source) : 이미지 소스의 URL을 명시함.

<img alt="이미지파일" src="../images/001.png" width="100" height="100">
<img alt="이미지파일" src="http://localhost:8081/test/images/001.png" width="100" height="100">

<base>

head 태그 안에 base 태그를 사용해 기본 경로를 지정하면, 상대 경로를 간략히 적을 수 있게 됩니다.

* href (Hypertext Reference) : 링크될 외부 리소스(external resource)의 URL를 명시함.

<!-- head 부분 -->
<base href="../images/">
<!-- body 부분 -->
<img alt="이미지파일" src="001.png" width="100" height="100">

<link>

문서와 외부 소스(external resource) 사이의 관계를 정의합니다. 주로 외부 스타일 시트(external style sheet)를 추가할 때 사용됩니다.

동일한 폴더 위치에 mystyle.css 라는 파일을 따로 만들어 효과를 적용해 보겠습니다. p태그에 효과를 적용하여 글자색이 빨간색이 된 것을 확인할 수 있습니다.

* rel (relationship) : 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시함.

p { 
	color: red;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>link 태그 실습</title>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
	<!-- 외부스타일 시트 파일 이용 p태그에 효과 적용 -->
	<p>Hello</p>
	<p>World</p>
</body>
</html>

<style>

해당 문서의 head 태그 안에 직접 스타일시트를 추가할 수도 있습니다. 위와 동일한 결과를 얻을 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>style 태그 실습</title>
	<!-- head 사이에 css style 직접 지정 가능 -->
	<style type="text/css">
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>Hello</p>
	<p>World</p>
</body>
</html>

<script>

문서에 자바스크립트와 같은 스크립트를 추가할 때 사용합니다. 스크립트 코드를 태그 안에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니다. script 태그는 반드시 head 태그 안에 와야하는 것은 아닙니다.

동일한 폴더 위치에 myscript.js 라는 파일을 만들어 추가시켜 보겠습니다. 실행한 html 페이지에서 F12를 눌러 콘솔창에 메세지가 출력된 것을 확인할 수 있습니다.

console.log("hello");

<script type="text/javascript" src="myscript.js"></script>

본문 작성

<p>	문단(paragraph)을 정의
<br>	행 바꿈(line-break)을 정의
<h1>~<h6>	제목(headings)을 정의
<hr>	수평선(horizontal rule)을 정의
<b>	텍스트를 진하게(bold)
<i>	텍스트를 이탤릭체로(italic)
<strong>	텍스트 강조
<sub>	아랫첨자(subscript) 텍스트를 표현
<sup>	윗첨자(superscript) 텍스트를 표현
<address>	문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시
<del>	텍스트 한가운데 라인을 추가하여 문서에서 삭제된(deleted) 텍스트를 표현
<ins>	텍스트 아래쪽에 라인을 추가하여 문서에 추가된(inserted) 텍스트를 표현

* 참고 : HTML 태그 종류

HTML 태그는 특성에 따라 두 가지로 구분 가능합니다. 첫째는 block 방식 태그로, 태그 사용시 자동 개행(줄바꿈)이 이루어지는 태그입니다. 둘째는 inline 방식 태그로, 태그 사용시 줄바꿈이 이루어지지 않는 태그입니다.

<h1>~<h6>

제목을 정의하며, 가장 큰 글자크기의 h1 태그부터 h6 태그까지 사용 가능합니다. block 방식 태그입니다.

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>

<hr>

수평선을 정의하며, 굵기 조절도 가능합니다. block 방식 태그입니다.

Hello
<hr>
World
<hr size="10" noshade="noshade">

<b>, <i>, <strong>, <sub>, <sup>, <address>, <del>, <ins>

address 태그를 제외한 나머지는 모두 inline 방식 태그로 줄바꿈이 이루어지지 않습니다.

<b>문자열을 진하게</b><br>
<i>문자열을 이탤릭체로</i><br>
<strong>문자열 강조</strong><br>
HTML5<sub>아랫첨자</sub><br>
HTML5<sup>윗첨자</sup><br>
<address>
	서울시 강남구 ㅇㅇ동 ㅇㅇ 번지 
</address>
<del>10000원</del>5000원<br>
<ins>밑줄 쫘악~</ins><br>

하이퍼링크 걸기

<a>

a 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 앵커(anchor) 태그라고도 합니다. 다음과 같이 href, title, target 등의 속성을 가질 수 있습니다. href로 링크할 페이지를 지정합니다. title은 마우스를 올려두었을 때 뜨는 메세지를 지정하는 속성이고, target은 링크를 어디에서 실행시킬지 결정하는 속성입니다. _self인 경우 현재 탭에서 링크가 열리고, _blank인 경우 새로운 탭에서 링크가 열립니다.

* href (Hypertext Reference) : 링크된 페이지의 URL를 명시함.

<a href="target.html" title="target.html 로컬 페이지" target="_self">로컬 페이지 이동</a><br>
<a href="http://www.google.com" target="_blank">외부 페이지 이동</a>

하나의 웹 페이지 내에서 특정 위치로 이동하는 것도 가능합니다. 맨아래라는 문단에 id 속성을 부여하고 id를 사용해 링크가 실행되도록 합니다.

* id : 태그에 부여하는 유일한 식별자. #id 형식으로 사용.

<a href="#bottom">맨아래로 이동</a><br>
...
<p id="bottom">맨아래</p>

테이블 만들기

<table>	데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의
	<caption>	테이블의 제목 정의
	<tr>	각 행(row)을 정의
		<th>	하나의 셀(cell)을 강조하여 정의
		<td>	하나의 셀(cell)을 정의

기본적인 테이블 구조를 다음과 같이 만들 수 있습니다. 주의할 점은 table 태그에 border 속성으로 테두리를 지정해야 테이블의 테두리가 보인다는 점입니다.

<table border="1">
	<caption>제목</caption>
	<tr>
		<th>1열 제목</th>
		<th>2열 제목</th>
	</tr>
	<tr>
		<td>1행 1열</td>
		<td>1행 2열</td>
	</tr>
	<tr>
		<td>2행 1열</td>
		<td>2행 2열</td>
	</tr>
</table>

셀 병합

rowspan, colspan 속성으로 셀을 병합시킬 수 있습니다. row는 행이고 col(column)은 열입니다. rowspan은 행을 병합하고, colspan은 열을 병합합니다. 속성값으로 몇 개의 셀을 병합할 것인지 설정합니다.

<table border="1">
	<tr>
		<th>이름</th>
		<th colspan="2">연락처</th>
	</tr>
	<tr>
		<td rowspan="2">홍길동</td>
		<td>02)111-1111</td>
		<td>010-1111-1111</td>
	</tr>
	<tr>
		<td colspan="2">hong@gmail.com</td>
	</tr>
</table>

리스트 만들기

<ol>	순서가 있는 리스트(ordered list)를 정의		<li>	리스트(list)에 포함되는 아이템(item)을 정의
<ul>	순서가 없는 리스트(unordered list)를 정의
<dl>	용어(term)와 그에 대한 설명을 리스트 형식(description list)으로 정의
	<dt>	용어(term)나 이름(name)을 정의
	<dd>	용어에 대한 설명(description)을 정의

<ol>

순서가 있는 리스트를 정의합니다. start 속성으로 몇 번부터 시작할지 설정할 수 있습니다.

<ol>
	<li>사과</li>
	<li>배</li>
</ol>
<ol start="3"> 
	<li>사과</li>
	<li>배</li>
</ol>

<ul>

순서가 없는 리스트를 정의합니다. type 속성으로 모양을 지정할 수 있습니다.

<ul type="circle">
	<li>사과</li>
	<li>배</li>
</ul>
<ul type="square">
	<li>사과</li>
	<li>배</li>
</ul>
<ul type="disc">
	<li>사과</li>
	<li>배</li>
</ul>

<dl>

용어와 용어에 대한 설명을 리스트 형식으로 정의합니다.

<dl>
	<dt>HTML5 이란</dt>
	<dd>홈페이지를 만드는...</dd>
	<dt>WWW 이란</dt>
	<dd>World Wide Web...</dd>
</dl>

태그 그룹핑

<div>	문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용, block 방식
<span>	문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용, inline 방식

<div>

문서에서 특정 영역이나 구획을 정의할 때 사용합니다.

<div id="title">
  <h1>오만과 편견</h1>
   <div id="volume">
    <h2>1권</h2>
     <div id="chapter">
      <h3>1장</h3> 
        <p>하트포드셔의 작은 마을에 사는 베넷 가에는 다섯 자매가 있는데 ...</p>
        <p>그러나 엘리자베스는 다아시가 ‘오만’하다는 ‘편견’을 가지고 ...</p>
     </div>
   </div>
</div>

<span>

특정한 효과를 갖지 않으며, 문서에서 인라인 요소들을 하나로 묶을 때 사용합니다.

<!-- head 부분 -->
<style type="text/css">
   #red { 
     color: red;
     font-size: 30px;
   }
</style>
<!-- body 부분 -->
<p>하트포드셔의 작은 마을에 사는 베넷 가에는 다섯 자매가 있는데 ...</p>
<p>그러나 엘리자베스는 다아시가 <span id="red">‘오만’하다는 ‘편견’</span>을 가지고 ...</p>

데이터 입력하기

<form>	사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용
	<input>	사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용
	<select>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용
		<option>	드롭다운 리스트에서 사용되는 각각의 옵션을 정의
	<textarea>	사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용
	<fieldset>	폼에서 연관된 태그들을 하나의 그룹으로 묶어서 박스 라인을 그려줌
		<legend>	<fieldset>의 제목을 정의
	<button>	클릭할 수 있는 버튼을 정의

input 태그의 type 속성으로 다양한 타입의 데이터를 입력받을 수 있습니다. 기본적으로 사용되는 태그와 속성들을 종합해 보면 다음과 같이 표현할 수 있습니다.

<form name="login" action="target.html" method="post">
  <fieldset>
   <legend>회원가입</legend>
	  아이디 <input type="text" name="userid"><br>
	  비밀번호 <input type="password" name="userpw"><br>
	  성별 <input type="radio" name="gender" value="male">남 
	  <input type="radio" name="gender" value="female">여<br>
	  직업 <select name="job">
	   		<option value="developer">개발자</option>
	   		<option value="designer">디자이너</option>
	   		<option value="unemployed" selected="selected">무직</option>
	     </select><br>
	  진입경로 <input type="checkbox" name="root" value="internet">인터넷 
	  		<input type="checkbox" name="root" value="recommend">추천 
	  		<input type="checkbox" name="root" value="tv">TV<br>
	  가입인사 <textarea rows="2" cols="20"></textarea><br>
	  <input type="reset" value="지우기">
	  <input type="submit" value="가입">
  </fieldset>
</form>

form 태그를 사용하는 기본적인 방법은 이 글에서 더 자세히 살펴볼 수 있습니다. 참고해 주시면 감사하겠습니다.

이상으로 HTML의 기본 개념과 주요 태그를 정리해 보았습니다.

참고

http://www.tcpschool.com/html-tags/intro

'WEB > HTML, CSS' 카테고리의 다른 글

[CSS] CSS 기초 및 선택자 정리 (0)	2022.06.23
[HTML] form 태그 (0)	2022.06.22

Amy IT

[HTML] HTML 기초 및 주요 태그 정리

HTML 이란?

HTML 특징

주요 태그

기본 구조

head 태그가 포함할 수 있는 태그

본문 작성

하이퍼링크 걸기

테이블 만들기

리스트 만들기

태그 그룹핑

데이터 입력하기

'WEB > HTML, CSS' 카테고리의 다른 글

댓글

티스토리툴바

[HTML] HTML 기초 및 주요 태그 정리

HTML 이란?

HTML 특징

주요 태그

기본 구조

head 태그가 포함할 수 있는 태그

본문 작성

하이퍼링크 걸기

테이블 만들기

리스트 만들기

태그 그룹핑

데이터 입력하기

'WEB > HTML, CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바