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칸 이상이 필요시 ' ' 라고 입력해야 한다.
<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사용한 것 같은 형태)
특수 문자 출력
지금까지 쓸 일은 거의 없었으니 특별히 익힐 필요는 없으나 혹시 필요할까 해서 적습니다
특수문자 특수이름 아스키코드
'<' '<' '<'
'>' '>' '>'
'&' '&' '&'
'"' '"' '"'
공백 ' ' ' '
'@' '©' '©'
'?' '®' '®'
<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 이름이 같으면 그룹으로 선택된다.