Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트
Ch 3. 무작정 시작하기
Doctype(DTD)
<!DOCTYPE html>
문서의 HTML 버전을 지정
마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.
HTML, HEAD, BODY
<html>
<head>
</head>
<body>
</body>
</html><html>
문서의 전체 범위
HTML문서가 어디에서 시작하고 끝나는지 알려준다.
<head>
문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 눈에 보이지 않는 정보이다.
<body>
문서의 구조를 나타내는 범위
웹페이지의 보여지는 구조를 작성하는 범위
CSS, JS 연결하기
<link rel="stylesheet" href="./main.css">html 파일에서 head 태그(정보) 안에 link 태그로 css 파일과 연결해준다.
<script src="main.js"></script>html 파일에서 head 태그(정보) 안에 script 태그로 js 파일과 연결해준다.
정보를 의미하는 태그 살펴보기
<title>
HTML 문서의 제목을 정의
웹 브라우저의 탭에 표시된다.
<title> Bang </title><link>
외부 문서를 가져와 연결할 때 사용.rel
가져올 문서와의 관계href
가져올 문서의 경로
<link rel="stylesheet" href="./main.css"><style>
스타일(CSS)를 HTML 문서 안에서 작성하는 경우 사용
<style>
div {
text-decoration: underline;
}
</style><script>- 자바스크립트 파일을 가져오는 경우에 사용
- 자파스크립트를 HTML 문서 안에서 작성하는 경우에 사용
<script src="main.js"></script><meta>
HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
위의 태그들로 표현하지 못하는 정보들을 작성할 때 사용
<meta name="" content="">화면에 이미지 출력하기
<img src="./images/hi.png" alt="">`- src
이미지 경로 - alt
대체 텍스트
상대 경로와 절대 경로
- 상대 경로
- ./
주변에서 찾기 (생략 가능) - ../
상위 폴더
- ./
- 절대 경로
- http(https)
원격 - / (//)
루트 경로
- http(https)
페이지 나누고 연결하기
<a href = "url">TEXT</a><a>
해당 경로로 이동하게 한다.
if 폴더 경로만 입력해주어도 브라우저는 자동으로 index.html 파일을 찾게 된다.
개발자 도구 사용하기
브라우저에서 제공하는 개발자 도구(F12)를 사용해보자.
HTML, CSS의 내용을 확인해볼 수 있다.
- Elements
- styles
element.style {}
임시로 css 스타일을 적용해볼 수 있다.
-computes
기능들이 어떻게 적용되어 있는지 수치화 되어 있는 모습 을 확인할 수 있다.
- styles
Ch 4. 웹에서 시작하기
Codepen.io
로컬에 개발환경을 따로 구축하지 않아도 온라인에서 코드를 편집할 수 있는 도구
브라우저 스타일 초기화
브라우저에서 기본적으로 제공하는 CSS 규격을 초기화해서 개발하도록 하자.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">Emmet
- What is Emmet?
에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.
-위키백과
console.log('bang log');