작성완료

HTML 기초

HTML은 웹 브라우저를 구성하는 기본 마크업 언어로, 시멘틱 HTML을 통해 정보에 맞는 태그 사용이 중요하다. 다양한 태그 종류에는 제목, 문단, 링크, 이미지, 리스트, 폼 등이 있으며, 각 태그는 특정 속성을 가지고 있다. 예를 들어, a> 태그는 링크를 생성하고, img> 태그는 이미지를 삽입하며, form> 태그는 사용자 입력을 받는다. 각 태그의 사용법과 속성에 대한 설명이 포함되어 있다.

HTML

Hyper Text Markup Language
웹 브라우저를 구성하는 가장 기초가 되는 마크업 언어

시멘틱HTML (Sementic HTML)

HTML을 마크업할 때 단순 나열이 아닌 정보와 의미에 맞춰 태그를 사용하는 것
코드 수정 시 편리, 검색 엔진 최적화에 좋음

태그 구성 요소

html
<div class="className"></p>
---- ----------------  ----
태그    속성(속성값)      태그

태그의 종류

<h1> ~ <h6> : 제목
<p> : 문단
<strong>, <em> : 강조 (진하게, 기울기)
<a> : anchor tag - 링크 이동
- 필수 속성 : href (hyper reference)
- 속성들
  - href : 클릭시 이동 할 링크
  - target : 링크를 여는 방법
    - _self : 현재 페이지 (기본값)
    - _blank : 새 탭
    - _parent : 부모 페이지로, iframe등이 사용된 환경에서 사용
    - _top : 최상위 페이지로, iframe등이 사용된 환경에서 사용
    - 프레임이름 : 직접 프레임 이름을 명시해서 사용가능
- 주소값 표기 방법
  - <a href="url"></a>
  - <a href="./파일명"></a>
  - <a href="#ID"></a>
  - <a href="mailto:메일주소"></a>
  - <a href="tel:전화번호"></a>
<img> : 이미지
- 필수 속성 : src, alt
- 속성들
  - src : 이미지의 경로
  - alt : 대체텍스트 (이미지를 볼 수 없는 상황일 때 대체로 보여지는 텍스트 (이미지 설명)
  - width : 이미지 가로 크기
  - height : 이미지의 세로 크기
<ol> : 순서가 있는 리스트 부모 태그
<ul> : 순서가 없는 리스트 부모 태그

<li> : <ol>, <ul>의 유일한 직계 자식 태그 (다른 태그는 직계로 올 수 없음)
<dl> : 용어를 정의 할때, key-value로 정보를 제공할 때 사용하는 리스트 태그

<dt>, <dd> : <dl>의 직계 자식 태그
<div>, <span> : 아무런 의미가 없는 태그
- 최대한 사용하지 않도록 노력한다.
  
  <div> : 전체를 그룹화 할 때<span> : 글자 일부, 문단 내 일부를 그룹화 할 때
<form> : 사용자게에 input(정보)를 받기 위한 태그

속성들
- action : form을 처리할 로직이 있는 url주소
- method : 정보를 서버로 전송하는 방식 (기본값 : GET)

input : 입력창 필드

필수 속성 : type
속성들

text : 텍스트email : 이메일 (@가 없으면 에러)password : 입력값을 ● 으로 표기url : 링크number : 숫자file : 파일radio : 옵션버튼 (단 하나만 선택가능)checkbox : 체크박스 (다중 선택 가능)※ type = radio, checkbox는 name,value가 필수속성placeholder : input 내부 설명 텍스트value : 초기 텍스트 입력값maxlength : 최대 입력 가능한 글자 수minlength : 최소 입력해야 하는 글자 수max : 숫자 최대값min : 숫자 최소값required : 무조건 입력 (필수입력)disabled : 입력 불가accept : 파일 유형 지정 (type="file"에 사용)

<label> : 사용자 인터페이스에 라벨(이름)을 지정

필수 속성 : for를 사용하여 label의 요소와 결합 가능
사용법 : <label for="결합할요소의 ID값"> -이름- </label>

label은 HTML에서는 텍스트로 보여지지만, 텍스트를 클릭하면 결합된 label의 요소가 선택되어 사용자의 편의성에 높아진다.

<select> : 옵션 선택

필수 자식 요소 : <option>
사용법

html
<label for="pet-select">애완동물 선택</label>
<select name="pet" id="pet-select">
  <option value="cat">고양이</option>
  <option value="dog">개</option>
  <option value="hamster">햄스터</option>
</select>

애완동물 선택
고양이 개 햄스터

<textarea> : 여러줄, 많은 양의 텍스트를 받는 태그
<button> : 버튼 태그

필수 속성 : type
type 속성값들
- button : 가장 기본적인 버튼 type
- submit : 서버에게 제출, 보내는 용도
- reset : 폼을 리셋하는 용도 (잘 사용하지 않음)
  ※ 평상시에는 button의 type은 button 이지만 버튼이 <form> 태그 내부에 있을 경우에는 button의 type은 submit 효과를 가진다.

`
| Name | Tom |
| --- | --- |

Table Header
---
Table Body
---
- 속성들
	- `colspan` : 가로로 차지하는 칸 수 지정
	- `rowspan` : 세로로 차지하는 칸 수 지정

HTML 기초

HTML

<label for="pet-select">애완동물 선택</label> <select name="pet" id="pet-select"> <option value="cat">고양이</option> <option value="dog">개</option> <option value="hamster">햄스터</option> </select>