1. 자주 사용하는 HTML 요소/시맨틱 요소/ id와 class

자주 사용하는 HTML 요소

div태그
한줄 차지

span태그
컨텐츠 크기만큼 공간차지

img태그
src는 속성 페이지주소는 속성 값
닫는 태그는 없음

a태그
href 속성 사용하여 링크삽입

ul,li,ol 태그
ul은 unorder list
li은 order list
ol은 숫자

input,textarea 다양한 입력 폼

<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>

시맨틱 요소

의미가 있는 요소

시맨틱 요소 사용하는 이유?
1.검색엔진이 웹페이지 방문시 시맨틱 요소를 중요한 키워드로 고려함 상위노출 결정될 수 있음.
2.협업시 의미있는 요소로 찾는 것이 편리
3.데이터 유형 예측가능

시맨틱 요소 종류

<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.

id:읽기영역 자체는 고유하므로 id로 이름을 붙인다.
class: 반복되는 항목은 같은 class를 지정해줌으로서, 동일한 유형임을 알수있다.