<!DOCTYPE html>
DOCTYPE(DTD, Document Type Definition)
페이지의 html 버전 지정
버전: HTML1~5, XHTML
표준: HTML5 / 이전 버전을 찾기 힘들다. XHTML만 가끔 볼 수 있다. ()
브라우저가 이 페이지를 어떤 HTML 버전으로 해석해야하는지 명시
<~> 시작태그, </~> 종료태그
<html> </html>: HTML 문서의 전체 범위. 브라우저에게 HTML문서의 범위를 알려줌.
<head> </head>: 문서의 정보가 담긴 범위. 페이지의 정보, 설명, 컨텐츠 파일의 위치, 스타일(css) 등.
<body> </body>: 문서의 구조가 담긴 범위. 유저에게 보이는 것들을 포함함.
html과 css 연결
html의 head에 <link ~ href="css파일경로"> 추가
<link ~>: 파일을 가져와서 연결. 연결할 파일의 "정보" 명시
사이트의 언어
<html lang="언어">
ex) <html lang="ko">
html과 js 연결
html의 head에 <script src="js파일경로"></script>
head 태그들
-
<style></style>: 태그 내부에 css 코드를 작성할 수 있다. -
<title></title>: html 문서의 이름. 브라우저의 탭에 표시되는 값. -
<link rel="~" href="파일경로">: html 외부의 파일을 연결- rel: html 문서와의 관계
- stylesheet: css파일
- icon: 페이지의 타이틀 머리에 표시되는 아이콘. 대표 아이콘 favorite icon = favicon
-
<script src="js파일경로"></script>: 자바스크립트 파일을 연결 -
<script></script>: 태그 내부에 자바스크립트 코드를 직접 작성 -
<meta name="정보의종류" content="값" />: 위의 태그들 외의 기타 정보들<meta name="author" content="~" />: 페이지 제작자<meta name="viewport" content="~" />:- 브라우저의 사이트 랜더링 공간에 대한 정보
- 보통 모바일기기의 브라우저에서 사이트 랜더링에 필요한 정보를 담는다.
<meta charset="인코딩방식" />: character set / 문자 인코딩 방식 지정. 웹에서는 UTF-8 권장
-
css, js는 html head 내부에서 외부 파일을 연결하거나 직접 코드를 작성할 수 있다.
index.html은 프로젝트 루트에 위치해야한다. 브라우저가 페이지를 열때 루트에서 index.html을 찾는다.
img 출력
html의 body에 <img src="이미지파일경로" alt="이미지대신출력될문구">
- alt: alternate / 어떤 이유로 이미지가 출력되지 않을때 이미지대신 출력될 문구. 필수
경로
/: 프로젝트 루트 경로를 의미. 페이지의 주소가 생략된 표현. (https://~.com/ = /)
하이퍼링크
<a href="url혹은html파일경로">~</a>
- href: hypertext reference
<a href="디렉토리경로>~</a>: 디렉토리만 입력시 브라우저가 디렉토리에서 index.html을 찾는다.<a href="/">~</a>: 어떤 경로의 파일에서 사용하든 프로젝트 루트 디렉토리의 index.html을 가리킨다.<a href="about">~</a>: 이 태그를 포함한 html파일과 같은 디렉토리에 있는 about 디렉토리의 index.html을 가리킨다.
개발자도구
- Elements - 웹 페이지의 레이아웃, 구성요소들 분석 가능
- select 기능으로 뷰포트에서 페이지의 구성요소를 선택하면 elements탭에서 선택한 요소에 대한 코드를 찾을 수 있다.
- 요소를 선택하고 하단의 styels에 css 코드를 입력하면 '임시적으로' 요소의 스타일을 변경할 수 있다.
- 개발자 도구를 통해 html, css를 분석할 수 있으나 js는 비즈니스 로직을 포함하기에 난독화된 경우가 많아 큰 흐름만 유추할 수 있는 경우가 대부분.
