HTML 기본
tag와 속성
글로벌 속성
- class : tag에 적용할 스타일의 이름을 지정
- dir : 내용의 텍스트 방향을 지정.
- id : tag에 유일한 ID를 지정함. 자바스크립트에서 주로 사용.
- style : 인라인 스타일을 적용하기 위함
- title : tag에 추가 정보를 지정. tag에 마우스 포인터를 위치시킬 경우 title의 값 표시
HTML 마크업 요소
포맷팅 요소
목록형 요소
- 목록 tag는 하나 이상의 하위 tag를 가진다.
- 목록 tag는 각 항목을 들여쓰기로 표현.
- 번호 또는 심볼을 이용해서 목록 표현.
<ul>: 번호 없는 목록을 표시. 항목 앞에 심볼을 표시<ol>: 번호 있는 목록을 표시. 알파벳, 숫자 등으로 표시<li>: 목록 항목<ul>이나<ol>태그 하위에서 사용
table
- HTML table 모델은 데이터를 행과 열의 셀에 표시.
- 행 그룹요소인
<thead>,<tbody>,<tfoot>요소를 사용하여 행들을 그룹화 <colgroup>과<col>요소는 열 그룹을 위한 추가적인 구조정보를 제공.- table의 셀은 머리글(
<th>)이나 데이터(<td>)를 가질 수 있음.
이미지 요소 - img
<img>tag를 사용하여 이미지를 삽입하기 위해 사용.- src 속성은 이미지 경로를 지정하기 위해 사용.
- height, width 속성으로 이미지 사이즈를 지정.
- alt 속성은 이미지 표시할 수 없을 때 화면에 대신하여 보여질 텍스트 지정.
링크 요소 - target
- _blank : 링크 내용이 새 창이나 새 탭에서 열린다.
- _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
링크 요소 - #anchor
- 같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한 번에 이동시킨다.
<tag id="anchor name"> text or image </tag><a href="#anchor name"> text or image </a> <br>
링크 요소 - link
linktag를 사용하여 문서와 외부 자원을 연결.
form control 요소
- 사용자로부터 데이터를 입력받아 서버에서 처리하기 위한 용도로 사용.
<form>: 사용자에게 입력 받을 항목을 정의.<input>: 텍스트 box, 체크 box, 라디오 버튼 등 사용자가 데이터를 입력할 수 있도록 함.<textarea>: 여러 줄의 문자 입력.<button>: 버튼을 표시.<select>: select box를 표시.<option>: select box의 각 항목들을 표시.
- 사용자가 입력한 자료들을 어떤 방식으로 서버로 전달할 것인지 결정.
- 서버에서 어떤 프로그램을 이용해 처리할 것인지 결정.
<form [속성="속성값"]> form control </form>- method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정.
- GET : 주소 표시줄에 사용자가 입력한 내용이 표시
- POST : HTTP 메세지의 body에 담아서 전송하기 때문에 전송 내용의 길이에 제한이 없다. 사용자가 입력한 내용이 표시되지 않는다.
- name : form의 이름을 지정. 한 문서 안에 여러 개의
<form>태그가 있을 경우 구분자로 사용. - action :
<form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정. (URL)
