// 기능이 있는 태그*
<button>버튼</button> <!-- 버튼 생성 -->
<textarea>입력창</textarea> <!-- 여러줄 텍스트 입력창 생성 -->
// 태그의 attribute와 value
<input type="text" /> <!-- 한줄 텍스트 입력창 생성 -->
<input type="password" /> <!-- 비밀번호 입력창 생성 -->
<input type="color" /> <!-- 색상 선택창 생성 -->
<input type="checkbox" /> <!-- 체크박스(여러개선택) 생성 -->
<input type="radio" name="group"/> <!-- 라디오버튼(1개선택) 생성 -->
=> name이 동일한 radio 버튼 중 1개만 선택됨
<label>라벨</label> <!-- 체크박스, 라디오버튼 등에 라벨 생성 -->
<a href="<http://google.com>">구글로 가기</a> <!-- 현재창에서 이동-->
<a href="<http://google.com>" target="_blank">구글로 가기</a> <!-- 새창에서 이동 -->
inline, block 태그
HTML에 존재하는 모든 태그들은 각자의 사이즈를 가지고 있다.
각자의 사이즈는 block 또는 inline 둘 중 하나로 표현이 된다.
block : 페이지 전체의 넓이를 차지하는 요소
inline : 자신의 크기만큼만 넓이를 차지하는 요
<!-- Block 요소 -->
<h1 />
<div />
<p />
<!-- Inline 요소 -->
<span />
<input /> <!-- text, checkbox, radio 모두 동일 -->
<a />
<button />
<label />
종속 태그
종속태그란 다른 태그와 함께 상호작용을 해야 작동하는 태그를 말한다.
혼자 있으면 아무것도 할 수 없는 태그를 말함.
select - option , ol - li , ul -li 가 종속태그에 속한다.
HTML 문서구조 및 설명
문서마다 정해진 규격이나 규칙없이 양식이 모두 다르다면, 브라우저가 문서를 해석하는 것 부터가 어려움.
개발자들은 최소한의 문서의 구조를 통일시켜놓고 체계화하게 되었음.
제일 대표적인 예로는 head(검색엔진을 위한 영역)와 body(브라우저에서 보여지는 영역) 이다.
tilte 태그는 태그에 입력한 내용은 사이트의 좌측 상단 제목 부분에 표시가 됨.
<title>코드캠프 - 개발회사에서 만든 코딩 부트캠프</title>
<meta name="description" />태그에 입력한 내용은 구글, 네이버 등 검색엔진에서 사이트 검색시 상세 설명 내용 부분에 표시됨.
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요." />
<meta property="og:" /> 태그에 입력한 내용은 검색엔진이 아닌 여러 서비스들(카카오톡, 슬랙, 페이스북 등)에서 주소를 직접 입력하는 경우, og 태그에 입력된 정보를 보여준다.
<meta property="og:image" content="다음로고.png" />
<meta property="og:title" content="Daum" />
<meta property="og:description" content="나의 관심 콘텐츠를 가장 즐겁게 ..." />
