꾸물꾸물 졔의 개발공부
HTML 마크업 요소 - 1 본문
[ 목록형 요소 ]
- 목록 tag : 하나 이상의 하위 tag 포함함
<ul> 번호없는 목록 표시, 항목 앞에 심볼로 표기
<ol> 번호있는 목록 표시, (숫자 / 알파벳 / 로마숫자)
- type : 숫자 / 영어대소문자 / 로마숫자대소문자
- start : 숫자 (시작번호)
- reversed : 역순 표기
<li> ul / ol 의 하위에서 사용
<dl> 용어 정의와 설명에 대한 내용을 목록화
<dt> 용어 목록의 정의 부분
<dd> 용어 목록의 설명 부분
[ table 테이블 ]
- HTML table 모델은 데이터를 행 (row) 과 열 (column)로 구분하여 표기
- 행 그룹 요소 : <thead> <tbody> <tfoot> 로 행들을 그룹화 가능
- 내용 : <th> 머리글 / <td> 데이터
- border 속성 : 테이블의 테두리 설정여부
<caption> table 의 제목 정의 , table 당 하나만 적용 , 기본적으로 가운데 정렬
<tr> 행 그룹요소
<colgroup> 명시적인 열그룹 생성, <col> 요소의 span속성은 묶여진 열의 갯수
<cellspacing> table cell 과 cell 사이의 공간
<cellpadding> cell 과 내부 콘텐츠 사이의 공간
<td>의 속성
- <colspan> 두개이상의 열(column)합치기
- <rowspan> 두개이상의 행(row)합치기
[ img 요소 ]
<img> 태그를 사용해서 이미지 삽입
src : 이미지 경로 지정
alt : 이미지를 표시할 수 없을 때 화면에 대신해서 보여질 텍스트
[ 링크 요소 ]
1) <a> 태그 사용, 하나의 문서에서 다른 문서로 연결
href : 하이퍼링크 클릭시, 이동할 문서의 URL 이나 문서의 책갈피
target : 하이퍼링크 클릭시, 현재 윈도우 또는 새로운 윈도우 이동 지정
- _blank : 링크 내용이 새 창이나 새탭에서 열림
- _self : target 속성이 기본 값으로 링크가 있는 화면에서 열림
- _parent / _top : 이런것도 있다 ~ 정도 ?
2) <map> 하나의 이미지에 여러개의 link ( 클릭위치에 따라 )
<area> 태그로 이미지 영역 표시
-shape, target, href 등의 속성 활용
-shape : default, rect, circle, poly
3) <link> 문서와 외부 자원 연결
<head> 에 위치하며, 여러 자원 연결 가능
- rel : 현재 문서와 연결된 문서사이의 연관관계 지정
- href : 연결된 문서의 위치 지정
[ 프레임 요소 ]
<iframe> tag : 화면의 일부분의 ''다른 문서'' 를 포함
- src : 포함시킬 외부 문서의 경로 지정
-name : 프레임의 이름 지정
--> target = name 으로 하면, 해당 프레임에 표시되는 것임
[ form control 요소 ]
- 사용자로부터 데이터를 입력받아 처리하기 위한 용도
- 사용자가 입력하기 위한 control 요소들은 <form> 태그 하위에 위치해야, 서버로 전송이 되어짐
submit : 사용자의 요청에 따라 서버가 HTML form 전달하고, 사용자가 값 입력하여 서버로 전송하는 것
- method : 사용자가 입력한 내용을 서버프로그램으로 어떻게 넘겨줄지 ?
--> get ( 주소표시줄에 입력한 내용 표시, 길이제한 있음 )
--> post ( HTTP 메세지의 body 에 담아서 전송, 길이제한 없음 )
- name : form 의 이름 지정, 구분자로 사용
- action : form 안의 내용들을 처리해줄 서버상의 프로그램 지정 (url)
- target : action 에서 지정한 스크립트 파일을 현재 위치가 아닌 다른 곳에서 열도록 지정
- autocomplete : 자동완성 (default : on )
<label> 태그를 사용하면, 해당 label 을 클릭해도 입력값을 받을 수 있다.
ex ) <label for ="id"> <input type, id, name .. >
해당 id를 가진 input 타입의 label 이 되어짐
<fieldset> : form 요소를 그룹으로 묶어서 표시, <legend> : 해당 fieldset 의 제목
'WEB > HTML' 카테고리의 다른 글
| HTML 마크업 요소 - 2 (0) | 2022.03.06 |
|---|---|
| HTML 의 기본 (0) | 2022.03.02 |