HTML 기본문법 정리

HTML(Hyper Text Markup Language)

HTML은 TAG 형태로 이루어진 Markup언어이다.

 

마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 데이터의 구조를 명기하는 언어의 한 가지이다.

 

프로그래밍 언어와 구별하여 일반적으로 데이터 언어라고 하지만, Text 처럼 프로그래밍이 가능한 것도 있기 때문에 명확하게 구분되지는 않는다

 

html 의 기본 태그 설명

HTML이라는게 사실 어렵거나 할 만한 내용은 없다. 나중에 html5 관련된 내용이나 새로운 기술 나온 것이 적용된 내용을 보고 실질적 판단은 가능하겠지만 지금까지 사용한 기본 문법은 그렇다.

 

  • <html> 태그

<html>태그는 <태그이름>문장</태그이름> 형태로 작성한다.

<html>로 시작해 </html>로 끝나며 내부에 작성한다.

 

  • <head> 태그

html의 머리말에 해당되는 부분, title 태그, script등을 기록한다.

title을제외하고는 head부분에 기술한 내용은 웹 브라우저를 통해 사용자에게 보이지 않는다.

html문서에 관한 정보들을 알릴 뿐이다.

 

  • <title>태그

HTML문서의 제목을 지정하는 태그

64문자 이내로 기입하는 것이 좋다.

간단 명료하게 정하는 것이 좋다.

 

  • <body>태그

<body> 태그는 html문서를 표현하는 본문이다.

설명

bgcolor (color value) 

배경 색상 설정

background (경로\파일명.확장자)

배경의 이미지 설정

leftmargin (pixel) 

본문 내용의 시작 위치(좌측부터 떨어진 위치)

topmargin (pixel) 

본문 내용의 시작 위치(위부터 떨어진 위치)

link (color value)

하이퍼링크 색상

alink (color value)

하이퍼링크 방문한 적 있을 경우 색상

vlink (color value) 

마우스로 누르고 있는 상태의 색상

 

 

  • <!-- -->주석

주석은 <!-- 이곳에 작성한다 --> 형태로 작성

 

  • <br> 줄바꿈

    엔터에 의한 줄바꿈은 되지 않으며 필요 시 <br>로 표시한다.

     

  • &nbsp;공백

    문자 간 space는 1칸만 입력되������ 2����� 이상이 필요 시 &nbsp; 라고 입력해야 한다.

     

  • <hr> 구분선 horizontal ruler

줄을 입력하여 구분선 형태로 사용한다. (가로선만 존재한다)

속성

설명

width (rate) (pixel)

너비를 비율, 픽셀 수로 길이 지정

size (pixel)

두께

align (center, left, right)

정렬 형태

noshade (옵션없음)

그림자 없음

color (color value) 

색상

 

  • <pre> 입력한대로 출력

    해당 태그 내에 글자 작성 시 있는 그대로 출력한다.

    html5 부터 사용하지 않도록 권고(안 쓴다는 말)

  • <center> 가운데 정렬

    이것도 역시 css 사용하고 사용하지 않도록 권고

     

  • <p>태그

문단을 나누는 역할을 한다. 연달아 사용할 경우 중복 입력은 되지 않고 하나로 인식된다

속성

설명

align (center, left, right) 

정렬 형태

 

  • <h>태그 headline

    문서의 제목을 위해 사용. 제목이라기 보다는 강조 글 같은 형태.

    <h1></h1> 형태로 사용하며 1(크다) ~ 6(작다) 까지 사용한다.

    단락 기능을 포함한다. (p사용한 것 같은 형태)

 

  • 특수 문자 출력

    지금까지 쓸 일은 거의 없었으니 특별히 익힐 ���요는 없으나 혹시 필요할까 하여 �����

���수문자

특수이름

아스키코드

<

>

&

"

공백

?

&lt;

&gt;

&amp;

&quot;

&nbsp;

&copy;

&reg; 

&#60

&#62

&#38

&#34

&#32

&#169

&#174 

 

  • <font> 태그

말 그대로 폰트 속성인데 이도 css로 넘어가지만 css에서 쓸라면 대충 뭔지는 알아두어야 함

속성

설명

face 

글꼴 이름을 지정

size (글자 크기)

글자 크기를 지정. +1, --1 형태로 사용 시 기본 사이즈에서 증 감되어 사용됨

color (color value) 

색상

title

글꼴의 설명 텍스트를 지정

 

  • <basefont size> 기본글자 지정

    사이즈를 지정해 문서에서 사용할 기본 사이즈 정한다.

    종료태그 없다.

     

  • 글 장식 태그

��성

설명

<b> 

글꼴 이��을 지정

<i> 

글자 크기를 지정. +1, --1 형태로 ���용 시 기본 사이즈에서 증 감되어 사용됨

<u>

글꼴의 설명 텍스트를 지정

<sub> 

아래첨자

<sup> 

위 첨자

<big> 

조금 더 크게

<small> 

조금 더 작게

<strike> 

취소선

<tt> 

타자기체 (가로세로 비율이 고정된 글꼴 표현)

<blockquote> 

들여쓰기

<address> 

주소 표시. 이탤릭체로 나올 뿐 별 것 없다

 

  • <ul> <ol> <dl> 목록 태그

속성

설명

<ul> type= 

순서가 없는 목록 : 목록 작성 시 li 태그 사용. 자동 줄 넘김 기능 포함

<ol> type= 

순서가 있는 목록 : 목록 작성 시 li 태그 사용. 자동 줄 넘김 기능 포함

<dl> type= 

정의 목록 : 목록 작성 시 li 태그 사용. 자동 줄 넘김 기능 포함

type

1(숫자), a(소문자), A(대문자), i(소문자로마), I(대문자로마)

,disc(검은 원), circle(흰 원), square(사각형), start

그냥 직접 써라 그게 더 낫다. 뭐하러 이딴거 써 ㅡㅡ;

 

  • <dl> 정의 목록나열. 그냥 적는게 낫다. 패스.

     

  • <marquee> 움직이는 텍스트

속성

설명

align 

위치(상중하)

height, width 

텍스트가 나타날 범위 (영역) 지정

hspace, vspace 

텍스트 바깥쪽의 상하좌우 여백을 지정

behavior 

이동 형태 scroll(한쪽으로 흐름) , slide(끝에 가면 정지), alternate(좌우반복)

direction

방향 left, right, top, down

scrolldelay 

지연속도 1/1000초 단위

scrollamount 

한번에 스크롤되는 픽셀 수 지정

bgcolor 

문자열 배경 색 지정

loop 

반복회수

 

 

  • <img> 이미지 태그

속성

설명

src 

이미지 경로 / 파일명.확장자 (상대경로, 절대경로 모두 가능)

align 

같이 작성되는 글자 위치의 정렬

alt 

마우스 오버 시 설명 문자

width

이미지 폭 지정

height 

이미지 높이 지정

height 

이미지 높이 지정

border 

테두리 두께 지정

hspace 

이미지 좌/우 여백 지정

vspace 

이미지 상/하 여백 지정

 

  • <a> 하이퍼링크(anchor) 태그

속성

설명

href 

하이퍼링크 연결로 이동하고자 하는 위치 지정. 주소 적을 때="http포함 경로", 메일은mailto:메일주소

브라우저에서 사용 가능 : 그대로 표시

브라우저에서 사용 불가 : 소프트웨어 띄우거나 다운받거나 함

name 

하이퍼링크 이름 지정

target 

클릭했을 때 속성에 지정된 url이 보여질 위치를 지정

="_blank" 별도의 창에서 열림

title

하이퍼링크에 대한 설명을 표시

 

  • <table> 테이블 태그

테���블 태그

설명

<caption> 

테이블의 가운데 위에 나타난다.

<tr> 

행 만들기 태그

<th> 

강조 표시 태그 (그냥 border 쓰면 된다)

<td>

테이블 데이터 태그

 

속성은 <table><tr><td>에 대부분 공통적으로 사용 가능하다.

속성

설명

align 

정렬

border 

셀 두께

width, height 

숫자나 % 이용한 너비/높이

cellpadding

셀 테두리와 내용 사이의 간격

cellspacing 

셀과 셀 사이 경계선의 굵기

background 

배경 이미지 넣기

bgcolor 

테이블(셀)색상

bordercolor 

테두리 색상

rowspan (td) 

행(가로) 합치기(숫자)

colspan (td) 

열(세로) 합치기

valign (td) 

글자 세로 정렬 (top, middle, bottom)

 

  • <frameset> 화면분할

    head 내에 포함되어야 한다.

    내부에 <frame>태그로 각각의 프레임을 설정해 준다.

    <frameset> 내에 <frameset>으로 복합 프레임 제작 가능

속성

설명

cols 

세로로 분할 ="100, *" 100픽셀, 나머지. 비율도 가능하다. 나눈 수량만큼 <frame>필요

rows 

가로로 분할

 

<frame>태그

속성

설명

src

해당 프레임이 가리킬 위치

noresize 

사이즈 변경하지 않음

scrolling (yes, no, auto) 

스크롤바 표시 여부

marginwidth 

프레임 좌우 내부의 여백 지정

marginheight 

프레임 상하 내부의 여백 지정

name 

해당 프레임에 이름 지정. a 태그 이용해서 지정된 프레임의 보여주는 부분 변경 가능

 

  • <iframe> 창안에 작은 창

속성

설명

src

해당 프레임이 가리킬 위치

width

넓이

height

높이

frameborder

경계선 두께

marginwidth

-

marginheight

-

scrolling

-

align

-

 

  • <form> 태그

    입력양식 폼을 구성하는 기본 골격을 제공하는 폼 태그

    실제로 프로그램 작성 시 가장 많이 이용한 부분이다. 이것만 알고 있으면 웹 만드는데 별 문제 없다.

속성

설명

action

처리할 위치

method

get(값이 url에 보임), post(값이 안보임) 방식

name

해당 폼이 사용할 이름

onsubmit

input submit 타입 실행 시 실행 할 것

 

  • <input> 입력 폼 태그

    input 태그는 주로 form 내부에 사용한다.

    데이터를 입력 받기 위해서 사용한다.

기본 문법 한방에 정리|작성자 손발따로

속성

설명

name

이름을 지정하여 어떤 데이터인지 구분하는 데 사용

value

초기 값 지정 시 사용

maxlength

최대 글자 수

size

화면에 보여지는 텍스트 입력양식의 길이 지정

type

text = 텍스트 입력 박스

password = 텍스트 입력 박스와 동일하나 비밀번호 사용 시 사용하도록 입력글자 숨김 기능

textarea = 다량의 텍스트 입력 가능

radio = 라디오 버튼

checkbox = 체크박스 기능

button = 버튼

reset = 입력 내용 리셋

submit = 폼의 action 기능 수행

select = 드롭다운 메뉴

(button, submit) onclick

클릭 시 행동사항

(radio, select)checked

페이지 표시 할 때 미리 선택해 두는 형태

(radio, select)name

이름이 같으면 그룹으로 선택된다.