| 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> 로 표시한다. |
| 공백 |
| 문자 간 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 |
|
| (button, submit) onclick | 클릭 시 행동사항 |
| (radio, select)checked | 페이지 표시 할 때 미리 선택해 두는 형태 |
| (radio, select)name | 이름이 같으면 그룹으로 선택된다. |