기본구조
<!DOCTYPE html><!-- 웹에 문서타입을 알려준다 HTML5 -->
<html lang="ko">
<!-- HTML태그이고 lang은 이 문서의 기본언어가 한국어라 알려주는 것 -->
<head>
<!-- head태그 html 문서의 메타정보를 나타낸다 -->
<meta charset="UTF-8"> <!-- 캐릭터셋 문자 인코딩방식 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 뷰 포트 페이지의 너비를 기기의 스크린 너비로 설정 / 배율설정 -->
<title>Document</title><!-- 문서의 제목이다 웹브라우저에서 탭칸에 여기있는 글자가 나타난다 -->
</head>
<body>
<!-- 본문 실제 보여지는 영역 -->
</body>
</html>
최초 작성시 나오는 기본적인 부분
시멘틱태그
<header>헤더</header>
<nav>네비게이션</nav>
<main>메인콘텐츠영역</main>
<article>독립적인 콘텐츠</article>
<section>섹션</section>
<aside>사이드바</aside>
<footer>푸터</footer>그룹화
<body>
<!-- 기본 그룹화 -->
<header></header>
<!-- 페이지 상단의 네비게이션메뉴나 로그인 , 로고 등이 들어가는 영역 -->
<main></main>
<!-- 메인 콘텐츠 영역이고 이안에서 section으로 나눌수있다 -->
<footer></footer>
<!-- 사이트의 추가정보 사업자번호나 고객센터 등등이 있다 -->
</body>
이런식으로 큰틀을 잡는다
블록태그
<div>기본 영역 태그 단독으로 사용하는 경우는 거의 없다 class를 넣어서 별명을 꼭 지어주자</div>
<h1>제목 h6번까지 있다. 번호가 클수록 폰트사이즈가 작아진다</h1>
<section> 말 그대로 섹션 보통 main안에서 큰 섹션을 나눌때 사용한다 </section>
<audio src="경로"> 오디오를 사용할 수 있는 태그 </audio>
<canvas> 그림판처럼 사용할 수 있다 js를 써서 3D 같은것도 구현 가능하다</canvas>
<form action="경로" method="메소드"> 폼태그 사용자의 정보를 받는 큰틀이다 내부에 input이 들어간다</form>
<ul>리스트항목들을 묶는 큰틀 순서가 없다</ul>
<li>ul 안에서 사용한다 각 항목</li>
<p>문단을 나타내며, 텍스트의 큰 단위를 묶어서 표현합니다</p>
<video src="경로">비디오를 넣을 수 있다 </video>
<iframe src="경로" frameborder="0">다른 웹 페이지를 현재 페이지에 삽입하는 데 사용되는 태그</iframe>
<fieldset>form태그 안에 영역 구분</fieldset>
<legend>필드셋의 타이틀</legend>
<script defer>자바스크립트코드를 사용하는 태그 defer를 사용하여 스크립트의 실행을 지연시킨다 페이지 요소들이 스크립트의 영향을 받을때 깨질수도 있기때문에 문서부터 로드하고 스크립트 실행</script>
자주 사용하는 거 위주로
인라인태그
<b>볼드체를 나타낼때 사용</b>
<strong>강조할 때 사용 볼드체랑 비슷함</strong>
<a href="경로">하이퍼 링크</a>
<br><!-- 줄바꿈 태그 로 대체 가능 상황마다 다르다 -->
<img src="경로" alt="설명">
<span>특정 텍스트 부분을 묶을때 사용</span>
<label for="폼요소의 id">input이랑 짝지</label>
<input type="text"><!-- 여러가지 속성들로 값을 받을수 있다 -->