2. HTML 기본 태그

순서

HTML 기본 태그
문자 서식 태그
단락 서식 태그
목록 태그
연결 태그

기본 태그

문서 구조 태그

Html 태그중 가장 기본적인 태그로써 문서 구조를 정의하는 <html>, <head>, <title>, <meta>, <body>가 있으며 이러한 태그들로 HTML 문서를 작성한다.

<meta> 태그를 제외한 나머지 <html>, <head>, <title>, <meta>, <body> 태그는 필수 태그로 표시된 태그들은 문서에 반드시 사용되어야 한다.

`<html>` 태그

html 태그는 <html> 요소를 정의하며, 문서 트리에서 루트 노드에 해당되는 루트 요소로 문서의 모든 html 요소를 포함한다

lang : 요소 내용의 자연 언어
dir : 요소 내용의 작성 방향

`<head>` 태그

<head>요소에는 <title> 요소와 <meta> 요소를 포함하며 다음과 같은 태그를 포함할 수 있다.

<title> : 문서의 제목
<meta> : 문서의 메타 데이터
<link> : 링크 연결
<script> : 스크립트 코드
<noscript> : 스크립트가 지원되지 않는 브라우저를 위한 대체 요소
<base> : 상대 url의 기준이 되는 절대 url

`<title>` 태그

문서의 제목을 나타내며 요소의 내용은 브라우저가 문서를 실행할 때 제목 표시줄에 출력된다.

`<meta>` 태그

메타데이터는 데이터에 관한 데이터, 즉 데이터에 대해 설명하는 데이터로 HTML 문서에 대하여 설명하는 메타데이터를 포함한다.

<meta http-equiv="속성값" content="내용"> ............ 표현식 1
<meta name="속성값" content="내용"> .................. 표현식 2

태그의 형식은 위의 두 가지 형식중 하나만 사용하면 된다.

`<body>` 태그

class

클래스 이름 지정
id

클래스의 유일한 아이디 지정
style

스타일 지정
background="파일이미지 url"

배경으로 사용될 이미지 파일의 url
bgcolor="색상명/rgb값"

배경 색
text="색상명/rgb값"

문자 색
link="색상명/rgb값"

링크로 설정한 문자의 색
alink="색상명/rgb값"

링크가 설정된 문자를 클릭할 때 변화되는 색
vlink="색상명/rgb값"

링크를 클릭한 후의 문자 색
topmargin="픽셀 수"

문서의 쥐쪽 여백
leftmargin="픽셀 수"

문서의 왼쪽 여백
bgproperties="fixed"

배경 그림의 고정
scroll = "no"

스크롤바 활성 여부

주석

html 문서에 대한 부수적인 설명이 필요할 경우 사용되며 주석의 내용은 웹브라우저에 나타나지 않는다.


제목 태그

h1
h2
h3
h4
h5
h6

가 있는데 h옆에 있는 숫자가 클 수록 큰 제목이 나온다.

문자 크기 지정

 ~  n은 1~7 사이의 숫자

문자색 지정

 ~ 

글꼴 지정

 ~ 

특수 문자 사용

< : <
> : >
& : &
" : "
공백

단락 서식 태그

목록 태그

<ul> : 순서 없는 리스트

<ul type="disc(기본)"/"circle"/"square">
<li>리스트 항목</li>
</ul>

<ol> : 순서 있는 리스트

<ol>
  <li> 리스트 항목 </li>
</ol>

<dl> : 용어 리스트

<dl>
  <dt> 용어의 제목 </dt>
  <dd> 용어의 설명 </dd>
</dl>

연결 태그

HTML에서는 하이퍼링크 기능을 이용하여, 인터넷 상의 다른 웹 사이트 혹은 자식의 웹 사이트에 있는 다른 페이지에 연결할 수 있다.

href="rul"

절대 url 또는 상대 url 또는 앵커 url
name="앵커"

앵커 설정
title="설명"

링크에 마우스를 가져가면 나타나는 설명
target="프레임 이름/예약어"

링크된 페이지를 나타낼 곳

같은 문서 내에서의 연결

앵커 url을 이용하여 같은 문서 내에서 이동할 곳을 링크로 연결한다. 이를 위해 <a> 태그를 사용하며, 그 결과 동일한 문서 내의 특정 위치인 앵커로 이동할 수 있게 된다.

<a href="#앵커"> ~ </a> : 링크가 설정된 텍스트
<a name="앵커"> ~ </a> : 문서 내 이동할 곳

웹 상의 문서 연결

절대 url을 이용하여 다른 웹 사이트의 문서를 연결한다.

<a href="절대 url" title="링크에 대한 설명"> 링크가 설정된 텍스트 </a>

메일 프로그램 연결

주소를 기록하기 위해서는 <address> 태그를 이용한다. 웹 페이지에서 이메일 서비스를 이용할 때는 <a> 태그를 사용하여 연결시킨다.

<a href="mailto:메일주소"> 메일 프로그램으로 링크가 설정되는 텍스트 </a>

저작자표시 동일조건

'📺 Front End > -- HTML & CSS' 카테고리의 다른 글

6. HTML 폼 태그 (0)	2019.11.29
5. HTML 프레임 (0)	2019.11.29
4. HTML 테이블 (0)	2019.11.29
3. HTML 이미지 삽입 (0)	2019.11.28
1. Html 기초 (0)	2019.11.27

Wonit

2. HTML 기본 태그

순서

기본 태그

문서 구조 태그

`<html>` 태그

`<head>` 태그

`<title>` 태그

`<meta>` 태그

`<body>` 태그

주석

제목 태그

문자 서식 태그

문자 크기 지정

문자색 지정

글꼴 지정

특수 문자 사용

단락 서식 태그

목록 태그

연결 태그

같은 문서 내에서의 연결

웹 상의 문서 연결

메일 프로그램 연결

'📺 Front End > -- HTML & CSS' 카테고리의 다른 글

댓글

티스토리툴바

2. HTML 기본 태그

순서

기본 태그

문서 구조 태그

<html> 태그

<head> 태그

<title> 태그

<meta> 태그

<body> 태그

주석

제목 태그

문자 서식 태그

문자 크기 지정

문자색 지정

글꼴 지정

특수 문자 사용

단락 서식 태그

목록 태그

연결 태그

같은 문서 내에서의 연결

웹 상의 문서 연결

메일 프로그램 연결

'📺 Front End > -- HTML & CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바

`<html>` 태그

`<head>` 태그

`<title>` 태그

`<meta>` 태그

`<body>` 태그