<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
</body>
</html>1. Doctype(DTD)
- 문서(한 페이지)의 HTML 버전 지정 -> 표준은 HTML5
(따로 버전 지정하려면 시작태그 내부에 PUBLIC ~~~ 추가해야 함)
2. html
- 문서의 전체 범위 지정
= HTML 문서의 시작과 끝을 브라우저에게 알려주는 역할 - 속성 lang으로 지정할 문서의 언어 명시 -> en, ko ...
3. head
- 문서의 정보를 나타내는 범위
= 웹 프라우저가 해석해야 할 제목, 설명, 사용할 파일의 위치, 스타일(CSS)등 보이지 않는 정보를 작성하는 범위 - 정보를 의미하는 태그
- title : HTML 문서의 제목을 정의 -> 웹 브라우저의 탭에 표시 됨
- link : 외부 문서(대부분 CSS)를 가져와 연결할 때 사용
- 속성 rel : 가져올 문서와의 관계 stylesheet, icon .. 등
-> 이 때 icon은 위의 title과 함께 탭에 표시되는 대표 아이콘을 의미하며 Favorite Icon 줄임말 Favicon.ico 또는 Favicon.png 주로 사용 - 속성 href : 가져올 문서의 경로(Hyper Text Reference)
- 속성 rel : 가져올 문서와의 관계 stylesheet, icon .. 등
- style : 스타일(CSS)를 HTML 문서 안에서 작성하는 경우 사용
-> 따라서, 스타일 선언 방식은 link태그로 .css파일 가져오기 | style태그 내에 직접 작성 가능 - script : JS파일 가져오는 경우 사용
-> 속성으로 src="경로" | 속성 없이 태그 내 직접 작성 - meta / : 위 네 개의 태그로 나타낼 수 없는 나머지 모든 정보(HTML문서의 제작자, 내용, 키워드 등)를 검색엔진이나 브라우저에게 제공
- 속성 name : 정보의 종류 author(제작자), viewport(웹 페이지 출력 영역, 모바일 장치에만 해당) .. 등
- 속성 content : 정보의 값
<meta charset="UTF=8"/>에서 charset은 문자 인코딩 방식 지정하는 속성
❗ 파일 연결은 head 안에 ❗
🌟 CSS 연결<link href="./main.css>
🌟 JS 연결<script src="./main.js>
4. body
- 문서의 구조를 나타내는 범위
= 사용자 화면을 통해 보여지는 로고, 해더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위 - img 태그 : 화면에 이미지 출력할 때 사용
- 필수 속성 src(경로), alt(대체 텍스트)
- .css 파일에서 background: url("경로")로도 이미지 출력 가능
- ⭐ a 태그 ⭐ : 클릭하면 페이지 이동시키는 역할
- 필수 속성 href(경로)
- 파일 이름을 index.html로 지정하면 폴더까지만 경로 지정해도(경로가 /로 끝나도) 해당 파일 알아서 찾아줌 = 즉, 브라우저는 무조건 index.html을 찾음
(+추가) 절대 경로와 상대 경로
1) 절대 경로
- http(https) : 원격(Remote)의 사이트 주소
- /(//) : 맨 앞에 . 없이 시작하면 최상위 경로(루트경로) 의미
-> 로컬환경 내부의 개발용 서버 http://localhost:포트번호
2) 상대 경로
- ./ (생략가능) : 주변 -> 트리구조에서 같은 레벨로 이해 가능
- ../ : 상위 폴더 -> 트리구조에서 레벨 하나 위로 가는 것
(+추가) 개발자 도구 (F12)
- Elements 밑의 styles에서 css코드 임시로 입력 가능
-> 중앙선 그어져 있는 부분은 실제로 적용 안된 것 - . 뒤에 붙어있는 이름은 CSS 선택자(Selector)
-> (Styles - Filter) :hov(호버) : CSS 선택자 파트에서 학습하는 여러 가상 클래스 선택자에 관한 내용을 임시로 적용해볼 수 있는 메뉴
💬 문자 인코딩 : 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것
💬 대체 텍스트 : 이미지 경로 잘못되거나 네트워크 불안정 등 이미지 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자
2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)