1. HTML 기초
1. HTML 문서 구조
<!DOCTYPE html> <!--html 문서다-->
<html lang="kr"> <!--주 언어 : 한국어-->
<head> <!--head태그 : 문서 관련 정보-->
<meta charset="utf-8">
</head>
<body>
</body>
</html>
2. 태그 분류
1) Block level element
- 행 전체를 차지
ex) <div>, <p>, <h1>, <form>, <table>, <li> 등
2) Inline level element
- 요소 크기만큼 차지
ex) <span>, <a>, <img>, <input>, <label> 등
3. 태그 종류
1) 시맨틱 태그(Semantic tag) : 의미를 가지고 있는 태그
ex) header : 소개, 제목, nav : 네비게이션, 메뉴바, section : 구간 나누기, footer : 사이트 정보 등
2) 텍스트 관련 태그
ex) h1~h6 : 제목, p : 본문, br : 줄바꿈, pre : html에 적은 그대로 출력
3) 링크 태그
ex) <a href="주소"></a>
4) 멀티미디어 태그
ex) <img src="이미지 url" alt="이미지가 불러오기 실패할 때 표시되는 문장" height="높이px" weight="너비px">
2. 테이블과 리스트
1. 테이블
1) 태그
- <table> : 표 전체를 감싸는 태그
- <tr> : 표에서 행을 구분하는 태그
- <th> : 행 내부에 제목 셀을 담는 태그
- <td> : 행 내부에 데이터 셀을 담는 태그
2) 태그 속성
- rowspan = "숫자" : 숫자만큼 행을 점유
- colspan = "숫자" : 숫자만큼 열을 점유
2. 리스트
1) 순서 없는 목록
ex) - 아이템1
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul>
2) 순서 있는 목록
ex) 1. 아이템1
<ol>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ol>
3) 목록 관련 속성
<ol> 태그 속성
- start="리스트가 시작하는 숫자"
- type="순서를 시작하는 문자"
- reversed : 순서를 역으로
<li> 태그 속성
- value="해당 아이템의 숫자"
3. 폼 태그
1. 폼 태그란
사용자에게 입력 받는 양식 태그
<form></form>
2. 폼 태그 속성
1) action : 데이터를 보낼 URL을 지정
2) method : 보내는 방식을 지정
- get : form에 입력한 데이터를 url끝에 붙여 보이게 전송, 검색할 때 주로 사용
- post : 데이터를 숨겨서 보냄, 서버에 데이터를 쓰거나 삭제할 때 주로 사용
3. 폼태그와 같이 쓰이는 태그
1) 입력 태그
<input type="text" name="데이터의 id 지정" placeholder="가이드문구">
: 사용자에게 입력 받기 위해 사용되는 태그
2) 라벨 태그
<label for="input에 쓴 id값">비밀번호: </label>
3) 드롭바, 여러 항목 중 선택
<select name="데이터의 id 지정, label에 사용됨"> : 여러 항목 중 선택
<label for="gender">성별: </label>
<select name="gender" id="genderid">
<option value="id_male">남성</option>
<option value="id_female">여성</option>
</select>
4) 버튼
<button type="submit">제출하기</button>
= <input type="button" value="제출하기">
'Programming > HTML' 카테고리의 다른 글
| HTML5의 Semantic Tag (0) | 2022.03.13 |
|---|---|
| 2. HTML5 Markup Element (0) | 2022.03.11 |
| 1. HTML 개요 (0) | 2022.03.09 |