Doctype(DTD)
브라우저가 기본적으로 프로젝트 단위로 화면이 출력될 때 index라는 이름을 가지고 있는 HTML파일을 우선적으로 찾아서 열게 됨.
<!DOCTYPE html>
<html>
<head> </head>
<body></body>
</html><!DOCTYPE html>: 문서(페이지)의 HTML버전을 지정. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도 현재 HTML5가 표준
우리가 브라우저로 접속하는 각 웹 페이지는 기본적으로 하나의 HTML 파일이 동작하는 것이기 때문에, HTML(특히 index.html)을 하나의 페이지로 이해할 수도 있음
→ <!DOCTYPE html PUBLIC "-//W3C//DTD···로 되어있으면 그 사이트는 HTML5인 표준버전이 아니고 그 전 버전인 XHTML로 만들어진 운영되는 페이지(사이트)라고 보면 됨
HTML, HEAD, BODY
<html>, </html>: 시작태그, 종료태그
시작태그부터 HTML 태그가 끝나는 종료태그까지 작성해서 브라우저에게 제공하는 약속하는 범위
문서의 전체 범위를 의미. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
<head>, </head>
문서의 정보를 나타내는 범위. 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹 페이지의 보이지 않는 정보를 작성하는 범위
<body>, </body>
문서의 구조를 나타내는 범위. 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위
CSS, JS 연결하기
<head>
<link rel="stylesheet" href="./main.css" />
</head>link를 쓴 채 Tab을 누르면 자동적으로 <link rel="stylesheet" href=" ">가 써짐. 원하는 파일을 ""에 넣어 css을 연결
<head>
<script src="./main.js"></script>
</head>scr을 쓴 채로 Tab을 누르면 자동적으로 <script></script>가 써짐. src=""를 쓰고 ""안에 자신이 원하는 js파일을 넣어 연결
페이지에 영어를 한국어로 바꾸는 메뉴가 나타나지 않게 하는 방법
<html lang="en">인 채로 결과를 확인해 보면
이런 식으로 크롬에서 뜨는 걸 확인할 수 있음
lang(language 단어의 약어)은 지정할 문서의 언어(ISO 639-1)를 명시하는 HTML 속성
지정 가능한 언어 목록: https://ko.wikipedia.org/wiki/ISO_639-1_코드_목록
ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. ISO 639는 언어 분류를 위해 사용되는 표준화된 명명법이다. 각 언어는 2글자(639-1) 및 3글자(639-2, 639-3)로 할당된다. 어족 ISO 언어 이름 네이티브 이름 639-1 639-2/T 63
ko.wikipedia.org
HTML이 동작하는 환경의 언어가 무엇인지 lang에다가 명시를 할 수가 있음. 영어사이트가 아닌 한국 사이트를 만들기 때문에 en에서 ko로 바꾸면 영어를 한국어로 바꾸는 메뉴가 나타나지 않는 것을 확인할 수 있음
정보를 의미하는 태그 살펴보기
<title>Document</title>
<title>: HTML 문서의 제목(title)을 정의
<link rel="stylesheet" href="./main.css" />
<link rel="icon" href="./pigicon.png">
<link>: 외부 문서를 가져와 연결할 때 사용. 대부분 CSS파일
rel(필수 속성) 사용해 가져올 문서와 관계 정의, href을 사용해 가져올 문서의 경로 정의
rel(Relationship 단어의 약어)은 가져올 외부 문서(대표적으로 CSS 파일)가 현재의 HTML과 어떤 관계인지 명시하는 HTML 속성(Attribute) 임
./는 자기 자신(파일, ex) index.html) 기준으로 주변에서 파일을 찾겠다는 의미
rel="icon"은 브라우저에 탭 부분에 표시되는 대표 아이콘을 뜻함
Favorite Icone을 줄여서 Favicon(파비콘)이라고 부름. HTML Favicon를 적용할 때는 이름을 favicon이라고 지정하는 것을 권장하며 favicon.ico 혹은 favicon.png 파일이 주로 사용됨
<style>: 스타일(CSS)을 HTML 문서 안에서 작성하는 경우에 사용
<style>
div {
color: red;
}
</style>
<script>: src를 사용해 소스코드(파일)를 지정하여 HTML파일에 연결
<script src="./main.js"></script>
<script>
console.log('Hello~!')
</script>자바스크립트(JS) 파일을 가져오는 경우와 자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우로 나눌 수 있음
<meta>: title, link, style, script 태그로 나타낼 수 없는 나머지 모든 정보를 나타냄. HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
<meta charset="UTF-8" />
<meta name="author" content="Hyeon_E" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />기본적인 사용법은 위에 2,3번째 처럼 사용하면 됨. meta는 정보를 의미. 기본적인 정보를 meta태그로 제공하는 것.
name은 정보가 무엇인지 종류를 명시하고 content는 정보의 값을 명시함
viewport는 모바일 장치에만 해당하는 것이고 일반적인 데스크탑에서는 해당상황이 없다고 봐도 됨
예로 스마트폰(타블렛)에서 웹사이트를 볼 수 있음. 스마트폰이 여기서 말하는 모바일 장치임. 모바일에서 웹페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 웹사이트가 처음 출력될 때 확대/축소 여부나 정도를 어떻게 결정하겠다 등 몇 가지 정보를 META 태그로 명시하는 개념이 name="viewprot"의 내용
위에 내용을 보면 viewport가 가로 사이즈는 device-width는 기계가 가지고 있는 가로 사이즈에 맞춰서 출력하고 initial-scale=1.0은 페이지가 처음에 출력될때 기본 사이즈는 1.0배수로 출력하겠다는 의미
charset(Character Set)은 문자 인코딩 방식을 지정하는 HTMl 속성. 문자 인코딩이랑 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만든것을 말하며, 대표적 한글 사용에는 EUC-KR 혹은 UTF-8 등이 사용되며, 웹에선 UTF-8의 사용을 권장
'기초 > 프론트엔드 종합반 HTML&CSS, JS, React' 카테고리의 다른 글
| 2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 (1) | 2022.12.30 |
|---|---|
| 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트5 (0) | 2022.12.29 |
| 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트4 (1) | 2022.12.27 |
| 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 (2) | 2022.12.23 |
| 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 (0) | 2022.12.01 |
댓글