Web(Front) - HTML Markup Elements

Notice

Recent Posts

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

관리 메뉴

All :L

Web(Front) - HTML Markup Elements 본문

STUDY/Front End

Web(Front) - HTML Markup Elements

ofijwe 2024. 8. 25. 20:45

📒 HTML5 Markup Elements : 기본태그

1️⃣ 포맷팅 요소

화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있음

2️⃣ 목록형 요소

하나 이상의 하위 tag 포함
각 항목을 들여쓰기로 표현
번호 또는 심볼을 이용해 표현
<ul>: 번호 X /<ol>: 번호 O / <li>: 목록 / <dl>: 용어정의&설명 / <dt>: 용어정의 / <dd>: 용어 목록

3️⃣ Table 모델

행(<thead> <tbody> <tfoot>)과 열( )의 셀 표시
제목 <caption>
- table 제목 정의를 위해 사용
- table 당 하나만 사용
- 기본적으로 가운데 정렬
행(Row)
- 머리글(<thead>), 바닥글(<tfoot>), 하나 이상의 본체 항목<tbody>으로 그룹핑
- 각 행 그룹은 최소 하나 이상의 <tr> 필요
열(Column)
- table 내 구조적 분리 가능하게 함
- 명시적인 열 그룹(<colgroup>)을 만듦. → 열을 묶어(<col>) 그룹핑함.
- <span> 속성: <col>에 의해 묶여진 열 개수
테두리(border) → HTML5 지원 X, CCS를 사용
- cellspacing : table cell과 cell 사이 공간을 의미
- cellpadding : cell 외곽과 cell 컨텐프 사이 공간을 의미
셀 병합
- <td> 요소에 셀을 병합하기 위한 두 개의 속성 존재
  - colspan : 두 개 이상의 열을 하나로 병합
  - rowspan : 두 개 이상의 행 하나로 병합

4️⃣ 이미지 요소

<img> 태그
- src 속성은 이미지 경로를 지정(상대경로, URL 모두 가능)
- 이미지 사이즈 지정 : height, width
- alt 속성 : 이미지 표시할 수 없을 때 대신 보여질 텍스트
<figure> 태그
- 설명 글을 붙여야 할 대상 지정
- <figcaption> : 설명 글이 필요한 대상을 <figure>태그로 묶고 설명 글은 <figcaption>태그로 묶음
- 대상 : 이미지, 오디오, 비디오와 같은 미디어파일 or 텍스트 단락이나 표.

5️⃣ 링크 요소(Anchor)

<a> 태그
- 하나의 문서에서 다른 문서로 연결하기 위해 사용(하이퍼링크)
- 서로 중첩해서 사용 가능
- href 속성 : 하이퍼링크 클릭 시 이동할 URL이나 책갈피 지정
- target 속성 : 하이퍼링크 클릭 시 현재 윈도우 or 새로운 윈도우로 이동할 지 지정
  - _blank : 새 창 or 탭
  - _self : 링크가 있는 화면
  - _parent : 부모 프레임에 표시
  - _top : 프레임을 벗어나 링크 내용 전체 화면으로 표시
#anchor
- 같은 페이지 안에서 특정 요소 클릭시 그 위치로 한 번에 이동
map 태그
- 하나의 이미지에 여러 개 link
- <area> : 이미지 영역에 표시할 때 사용
  - href, target, shape(default, rect, circle, poly) 속성 등이 있음
link 태그
- 문서와 외부 자원 열결
- <head> 위치에 정의 → 여러 자원 연결 가능
- rel 속성 : 현재 문서와 연결된 문서 사이의 연관관계 지정
- href 속성 : 연결된 문서 위치 지정

6️⃣ 프레임 요소

iframe 태그
- 화면의 일부분에 다른 문서 포함
- src 속성 : 외부 문서의 경로 지정(상대경로, URL 모두 가능)
- height, width : 사이즈
- name : 프레임 이름

📒 HTML5 Markup Elements : form control

1️⃣ from control 요소

사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
사용자가 입력하기 위한 control 요소들은 모두 <from> 태그 하위에 위치해야 서버로 전송 가능
control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력 받음
- from, inputm textarea, button, select, optgroup, option 태그 등

2️⃣ form

사용자가 입력한 자료들을 어떤 방식으로 서버에 전달할 것인지 결정
서버에 어떤 프로그램을 이용해 처리할 것인지 결정
method 속성
- 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 지 지정
  - GET 속성 : 주소 표시줄에 입력한 내용 표시, 길이 제한의 데이터만 서버로 전송
  - POST 속성 : 입력한 내용 표시 X, Body에 담아 전송하기 때문에 길이 제한 X
name 속성
- form 이름 지정
- 한 문서에 여러 개의 <form>태그가 있을지 구분자로 사용
action 속성
- form 태그 안 내용 처리해 줄 서버상의 프로그램 지정 (URL)
target 속성
- action 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정
autocomplete 속성
- 자동 완성 기능, 기본값 on

3️⃣ label

form control에 레이블(텍스트) 연결

4️⃣ 사용자 입력을 위한 input

type 속성에 따라 여러 가지 형태로 화면에 표시
<input type=”유형” [속성=”속성값”]>
id 속성
- 여러 번 사용된 폼 요소를 구분하기 위해 사용
- 최소 한 개 이상의 문자
- 공백 X
같은 html doc에서 id는 하나의 값만 가능, name은 중복 허용
- id를 중복해도 에러는 안 나지만 가급적 중복 없이 사용 필요
type 속성HTML input type 속성
textfield, password
- textfield : 한 줄의 일반 텍스트를 입력 받는 필드
  - name, size, value, maxlength
- password : 내용 표시 X, * 등으로 표시
search, url, email, tel
number, range
- min, max, step, value 속성 사용
- number : 사용자가 입력한 내용 숫자로 인식
  - 직접 숫자를 입력하거나 브라우저에 따라 스핀박스 표시
- range : 슬라이드 막대를 움직여 숫자 값 입력
checkbox, radio
- checkbox : 여러 개 항목 중 선택된 항목 표시
  - name과 상관없이 다중 선택 가능
- radio button : name 속성의 값이 모두 일치해야 함.
  - name이 같은 항목 중 단일 선택
color
- 사용자가 색상을 선택할 수 잇는 색상표
날짜, 시간
- min, max, step, value 속성 사용
button
- button은 submit이나 reset과 같이 자체 기능 X, 스크립트 함수와 연결해 사용
- submit, reset button
  - reset button : 입력한 모든 정보 초기화
  - submit button : 사용자가 입력한 form 정보 서버로 전송
- image button
  - image + submit
- file button

5️⃣ 여러 data 나열

dropdown(select box)
- 사용자 입력이 아닌 여러 옵션 중 선택하는 목록
- select 태그 : select box(dropdown) 표시
  - size 속성 : 항목 개수 지정
  - mutiple 속성 : ctral 키 누른 상태로 다중 선택
- option 태그 : select box에 포함될 항목 정의
  - selected 속성 : 여러 개 항목 중 선택된 항목 표시
  - value 속성 : 각 항목 값을 지정하기 위해 사용
- optgroup 태그 : 여러 항목들을 몇 가지 그룹으로 묶을 경우
datalist
- 텍스트필드에 직접 값을 입력하는 것이 아닌 datalist의 선택 값이 텍스트 필드에 입력됨.
- value, label 속성
textarea
- tag는 여러 줄을 입력할 수 있는 box 표시
- cols와 rows 속성은 text box 크기 지정
- textarea 태그 사이의 문자열은 text box에 표시
- disable 속성 : 화면에 표시 하되 데이터 수정할 수 없도록 비활성화 상태로 표시

6️⃣ 기타 form control

button
- type 속성은 버튼이 활성화 되었을 때 어떤 동작할지 지정(기본은 submit)
- contents를 포함할 수 있기 때문에 아이콘 추가 가능
progress
- 작업 진행 상태 표시
- 작업 시작을 0, 최종 완료 최대값으로 설정
- value, max 속성
meter
- 값이 차지하는 크기 표시
- progress와 화면 비슷. progress는 작업 진행 상황, meter는 전체 크기 중 얼마나 차지하는지 표현
- min, max, value, low, high, optimum 속성

'STUDY > Front End' 카테고리의 다른 글

Web(Front) - CSS 선택자 (Selector) (0)	2024.08.26
Web(Front) - CSS (0)	2024.08.26
Web(Front) - HTML & DOM (0)	2024.08.26
Web(Front) - HTML Semantic (0)	2024.08.25
Web(Front) - HTML 공간 분할 태그 (0)	2024.08.25

'STUDY/Front End' Related Articles

Comments

All :L

Web(Front) - HTML Markup Elements 본문

Web(Front) - HTML Markup Elements

📒 HTML5 Markup Elements : 기본태그

1️⃣ 포맷팅 요소

2️⃣ 목록형 요소

3️⃣ Table 모델

4️⃣ 이미지 요소

5️⃣ 링크 요소(Anchor)

6️⃣ 프레임 요소

📒 HTML5 Markup Elements : form control

1️⃣ from control 요소

2️⃣ form

3️⃣ label

4️⃣ 사용자 입력을 위한 input

5️⃣ 여러 data 나열

6️⃣ 기타 form control

'STUDY > Front End' 카테고리의 다른 글

티스토리툴바