1. <html></html>
- 문서의 전체 범위 : HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
2. <head></head>
- 문서의 정보를 나타내는 범위: 웹브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일위치, 스타일(CSS)같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
<title></title> html 문서의 제목을 정의, 웹브라우저 탭에 표시됨
<link> 외부 문서를 가져와 연결 (대부분 CSS파일), 필수 속성으로 rel, href가 있음
- rel="가져올 문서와의 관계" href="가져올 문서의 경로"
<!-- 경로에 ./ 는 index.html파일 주변에서 해당 파일을 찾으라는 의미 -->
<link rel="stylesheet" href="./main.css" />
<!-- Favorite Icon을 줄여서 Favicon이라 부름 -->
<link rel="icon" href="./favicon.png"><style></style> 스타일(CSS)를 HTML문서 안에서 작성하는 경우 사용
<script></script> 자바스크립트 파일을 선언, 속성으로 src(Source)가 있음
<script type="module" defer src="./main.js"></script>
<script>
console.log('TEST');
</script><meta /> html 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에 제공, name(정보의 종류), content(정보의 값) 속성을 가짐
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="sohee" />* charset (Character Set)
- 문자 인코딩(Encoding) 방식을 지정하는 속성, 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것, 한글사용시 EUC-KR, UTF-8 이 사용됨
* viewport
- 모바일이나 태블릿의 장치(device)에서 웹페이지를 오픈할 때 가로 너비를 모바일 환경의 가로 너비와 일치(width=device-width)시키거나, 웹사이트가 출력될 때 확대/축소 여부나 정도를 결정(initial-scale=1.0 : 기본출력은 1.0배)하는 정보의 값들을 meta 태그로 명시하는 개념을 말한다.
3. <body></body>
- 문서의 구조를 나타내는 범위: 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위
<img> 이미지태그, 필수 속성으로 alt가 있음
* alt
- 이미지가 대신 출력할 텍스트라는 의미로 대체 텍스트라고 함. 이미지 경로가 잘못되었거나 네트워크가 불안정하거나 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자를 말함
패스트캠퍼스 프론트엔드 초격차 패키지 강의 내용을 참고하였습니다.