요소
HTML 문서의 내용 + 태그 전체를 포함한 단위 == 블록
요소 = 시작 태그 + 내용 + 종료 태그
<p>안녕하세요</p>
태그
요소를 만들기 위한 문법
< >로 둘러싸인 부분
<p> 문장 </p>
속성
태그 안에 작성해서 요소에 추가적 기능을 부여하는 부분
<img src = "cat.jpg" alt = "고양이">
src, alt 는 속성
head
브라우저, 검색엔진, 스크립트, 스타일 등에 영향을 주는 정보가 들어감
포함 요소
meta : 문자 인코딩, 설명 등
<meta charset="UTF-8"> 한글 깨짐 방지
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일 대응
title : 브라우저 탭, 검색 결과 제목 등
link : 외부 CSS, 폰트 연결
style : 내부 스타일 정의
script : JS파일 연결
body
실제 화면에 보는 모든 요소(텍스트, 이미지, 버튼 등)가 들어감
포함 요소
header
main
script
블록 태그
화면 가로 전체를 차지하면서, 항상 새로운 줄에서 시작되는 요소(자동 줄바꿈)
p
문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그
문단과 문단 사이의 공백이 있음
<p>1</p>
<p>2</p>
h
제목 요소를 나타내는 태그 1이 가장 크고 6이 가장 작다
<h1>안녕하세요</h1>
<h2>반갑습니다</h2>
hr
수평선을 표시하는 태그
<h1>안녕하세요</h1>
<hr />
<h2>반갑습니다</h2>
인라인 태그
한 줄에서 다른 요소와 나란히 배치되는 요소(자동 줄바꿈 X)
br
줄바꿈을 담당
<h1>안녕하세요</h1>
<br />
<h2>반갑습니다</h2>
strong
감싸고 있는 콘텐츠를 굵게 표시함
em
감싸고 있는 콘텐츠를 기울여 표시함
mark
감싸고 있는 콘텐츠를 형광펜 표시함
img 태그
<img src="이미지 파일" alt="이미지 설명"/>
img 태그의 src 속성은 표시할 이미지의 위치정보와 파일명을 입력받음
alt는 이미지 로딩이 실패하면 대체 텍스트가 표시된다
크기 조절
정수 값으로만 지정하고, 픽셀 단위로 적용된다
<img src = "이미지 파일" alt = "이미지 설명" width = "너비", height = "높이"/>
컨테이너 태그
콘텐츠나 레이아웃에 영향을 주지 않고, 요소들을 묶어서 편하게 관리하는 태그
div 태그
하나의 블록 구역을 묶는 태그로, 자동 줄바꿈 발생
span 태그
하나의 특정 인라인 구간을 묶는 태그
전역 속성
모든 html 태그에서 공통으로 사용할 수 있는 속성
id : 요소에 고유 이름을 부여하는 식별자 역할 속성
class : 요소를 그룹으로 묶는 식별자 역할속성
style : 요소에 css 스타일 선언 속성
title : 요소에 추가 정보를 제공하는 텍스트 속성
링크
<a> 태그를 사용하여 링크를 만듬
href 속성
a 태그 요소는 href 속성을 통해 웹 문서의 주소, 전화번호, 메일 주소 등을 연결할 수 있는 링크를 만듬 (인라인 요소)
<a href = "www.naver.com"> 네이버 </a>
<a href = "tel:010-1234-5678> 전화 </a>
target 속성
문서를 열 때 어떻게 열지 결정
<a href = "www.naver.com" target = " ? "> 네이버 </a>
_self : 현재 탭에서 열기 (default)
_blank : 새로운 탭에서 열기
목록
연관 있는 항목들을 나열한 것, 블록 레벨 요소를 만드는 태그
ul 태그
순서가 없는 항목들의 묶음
기본적으로 앞에 ●(불릿)이 붙음
ol 태그
순서가 있는 항목들의 묶음
기본적으로 앞에 번호가 붙음
li 태그
각 항목을 표현할 때 사용하는 태그
input 요소
사용자로부터 값을 입력받을 수 있음
숫자, 텍스트, 체크박스, 버튼 등 다양한 형태
type 속성
type의 값에 따라 형태나 유형이 달라짐
<input type = "text" name = "nickname" />
text : 기본 텍스트 입력
password : 입력값 숨김
range : 슬라이더 형태
date : 날짜 선택 캘린더
checkbox : 체크박스
button : 버튼
다양한 속성
required : 반드시 값을 입력해야 함
maxlength : 최대글자 수
max : 최대값 제한
placeholder : 입력 칸이 비어 있을 때, 옅은 회색 안내문구를 보여주는 속성
select 요소
다수의 선택지를 포함할 수 있는 선택 메뉴
option 태그
선택지를 option 태그로 표시
value : 실제로 처리될 값
<select name="cafe">
<option value="starbucks">스타벅스</option>
<option value="ediya">이디야</option>
<option value="mega">메가커피</option>
</select>```
## textarea 요소
여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
`textarea name = "X"> </textarea>`
### 속성
`rows` : 행
`cols` : 열
`textarea name = "X" rows="10" cols="10"> </textarea>`
## form 태그
사용자가 입력한 데이터를 서버로 보내기 위한 태그
### action 속성
입력값을 전송할 서버의 url
### method
GET, POST 등
```html
<form action="example.php" method="post">
<input type="text" name="id" placeholder="아이디" />
<br />
<input type="text" name="password" placeholder="비밀번호" />
<br>
<input type="submit" value="로그인">
</form>meta 태그
HTML 문서에 대한 메타데이터를 정의
항상 head 안에 들어가고, 뷰포트 설정을 지정하는 데 사용
즉, 웹페이지에 대한 정보 제공으로 검색엔진이 페이지를 검색할 때 참고함
메타데이터: 데이터에 대한 데이터
속성
charset : 문자 인코딩 요약 정보를 기입 meta charset = "utf-8"
http-equiv : http 헤더를 제공
name : name 속성을 이름
content : 메타데이터 내용
viewport
현재 화면에 보여지고 있는 영역
배율 조정이 발생해 화면의 크기가 다르게 보이는 현상(웹과 앱)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
너비는 단말기 너비에 맞추고, 초기 배율을 1로
