01. Doctype
index로 파일명을 하는 이유는 프로젝트 단위로 화면을 출력할 때 index란 이름의 파일을 우선적으로 열기 때문.
<!DOCTYPE html>
의 뜻은 Document Type Definition을 의미하며 문서 형식의 마크업 언어를 뜻함
웹브라우저에게 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 개발자가 알려주는 용도
∴한마디로 html 버전을 지정하는 코드!
02. HTML, HEAD, BODY
<head>
: 문서의 정보를 나타내는 범위
웹브라우저가 해석해야 할 제목, 설명, 파일 위치, 스타일 같은 눈에 보이지 않는 정보를 나타내는!
<body>
: 문서의 구조를 나타내는 눈에 보이는 로고, 헤거, 푸터, 네비게이션, 메뉴, 버튼, 이미지 등 보여지는 구조를 작성하는 범위
03. CSS,JS 연결하기
css는 <link> 이용해서 연결
html 안에 직접 css 넣을 수도 있음 <style>사용해서
js는 <script src="">이용해서 연결! src 사용안하면 <style>처럼 html에 직접 넣을 수 있음
04. 정보를 의미하는 태그 살펴보기
-
rel 은 relationship의 약어로 외부문서가 현재의 html과 어떤 관계인지를 명시하는 속성입니다.
-
./는 주변에서 찾는 다는 뜻.
-
Favorite Icon을 줄여서 파비콘(Favicon)이라고 부른다. png파일 이름을 favicon으로 지정하시길 권장.
-
<meta>는 html 문서의 제작자, 내용, 키워드 같은 정보를 브라우저에 제공
name은 정보의 종류를 뜻하고, content는 정보의 값을 뜻함 -
charset : Character Set의 약어로 문자 인코딩 방식을 지정하는 속성임. 즉 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말함.
05. 화면에 이미지 출력하기
<img>이용해서 이미지 넣으면 됨. alt는 이미지가 출력되지 않을 경우에 대체 택스트가 대신 나가는 용도.
06. 상대 경로와 절대 경로
상대 경로 - ./는 생략 가능 ../이면 상위 폴더로 올라감~
절대 경로 - http(s) - 원격 or "/" - 루트 경로[최상위 경로]
local host:5500 이라고 주소창에 써도 접속 가능
루트경로 - index파일, css, images 폴더가 있는 곳. "/"하나만 쓰면 됨.
그때그때 더 효율적인 방법을 사용하면 됨.
07. 페이지를 나누고 연결(링크)하기
a라는 태그 : 태그 내부에 있는 글자나 내용을 선택하면 href안에 있는 경로로 이동하게 해줌.
※파일이 들어있는 폴더 경로만 명시해주면 브라우저가 자동으로 index란 이름의 파일을 출력함!!
