HTML - Markup Language
- 자료가 어디에 어떻게 배치되어 있나 표현하기 위한 언어
<!DOCTYPE html>
// 이 문서가 HTML 문서임을 전달함.
<html lang="ko">
// 해당 문서의 언어를 나타내는 것.
<head>
// 기계가 식별할 수 있는 문서 정보를 담는다. 제목, 스크립트, 스타일 시트 등.
<meta charset="UTF-8" />
// 문자 인코딩
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
/* 반응형 웹사이트를 만드는 경우에 선언하는 내용.
브라우저 너비를 디바이스 너비에 맞춰서 표시.
초기 화면 배율은 1배율(100%) */
<link rel="stylesheet" href="style.css" />
// HTML을 스타일링 하기 위한 CSS 파일을 지정하기 위해 적음.
<title>Document</title>
/* 문서의 제목, 검색 결과와 브라우저 탭에도 나타나는 내용.
검색 엔진이 페이지를 잘 확인할 수 있도록 하는 역할을 함. */
</head>
<body>
// HTML 문서의 내용을 나타냄. 한 문서에 하나의 body 요소만 존재할 수 있다.
</body>
</html>h 태그
<h1>~<h6>요소는 6단계의 제목을 나타냄. 1부터 숫자가 내려갈수록 글씨 크기가 작아짐.
p 태그
<p> 요소는 하나의 문단을 나타냄.
목록 태그 (ol, ul, li)
- 순서가 있는 형태
<ol>-> ordered list - 순서가 없는 형태
<ul>-> unordered list <ol>과<ul>밑으로<li>리스트 나열하면 됨.
<ol>
<li>목록1</li>
<ul>
<li>가</li>
<li>나</li>
</ul>
<li>목록2</li>
<ul>
<li>가</li>
<li>나</li>
</ul>
<li>목록3</li>
<ul>
<li>가</li>
<li>나</li>
</ul>
</ol>a 태그
href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일 이메일 주소와 그 외 다른 URL로 연결될 수 있는 하이퍼링크를 만듦. <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
예약어
& - &
< - <
> - >
" - "
공백 -
div 태그
레이아웃을 나누는 데에 쓰임.
CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
줄바꿈을 하는 블록 레벨 요소
id는 고유한 값만 존재해야 하지만, class는 중복으로 존재할 수 있다.
span 태그
스타일을 적용하기 위해서, 어떤 특성의 값을 서로 공유하는 요소들을 묶을 때 사용할 수 있다.
본질적으로는 아무것도 나타내지 않는다.
줄바꿈을 하지 않는 인라인 요소
input 태그
사용자의 데이터를 받을 수 있는 대화형 컨트롤 생성함.
글자나 텍스트칸을 넣을 수 있는 공간이 생김.
[input 태그 더 자세히]https://delirussum.tistory.com/35
querySelector
querySelector를 사용할 때는 id인지 class인지 알려줘야 함. id인 경우에는 #을 앞에 써주고 class인 경우에는 .을 앞에 써준다.
[HTML 요소 참고서]https://developer.mozilla.org/ko/docs/Web/HTML/Element
개발자가 될테야