마크업 준비하기

oching·2022년 4월 15일

HTML/CSS/SCSS

목록 보기

2/6

FASTCAMPUS ST-FE 3기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch 3. 무작정 시작하기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch 4. 웹에서 시작하기

01. Doctype(DTD)

마크업 언어에서 문서형식을 정의
웹 브라우저가 어떤 HTML버전의 해석방식으로
페이지를 이해하면 되는지 알려줌.

HTML버전

HTML1~4
XHTML
HTML5 : 표준

<!DOCTYPE html5>    문서의 html버전을 지정 
<html>	 HTML문서의 시작-/끝을 지정하는 범위 
	<head>  
          문서의 정보를 나타내는 범위 
      	  : 웹브라우저가 해석해야할 웹페이지의 제목, 설명, 사용할 파일 위치, CSS
            웹 페이지의 보이지 않는 정보를 작성하는 범위
	</head>
 	<body>  
      	문서의 구조를 나타내는 범위
      	: 사용자 화면에서 보여지는 구조를 작성하는 범위
  	</body>
 </html>

02. CSS , JS 연결

head 영역 속 meta태그 아래에 위치
루트가 되는 개념의 파일부터 순서대로 연결한다.

css 연결
<link rel="stylesheet" href="./main.css">

js 연결
<script src="./main.js"></script>

03. HEAD 태그 의미

<title></title> html문서의 제목을 정의. 웹 브라우저 탭에 표시.
<link> 외부 문서를 가져와 연결할 떄 사용. [ rel 가져올 문서와의 관계 / href 경로 ]

rel : 가져올 문서와의 관계
href : 경로
<style></style> css를 html안에서 작성하는 경우
<script></script> js를 html안에서 작성. 연결
- src : 속성으로 외부파일 연결
<meta> html문서의 제작자, 내용, 키워드 등의 정보를 검색엔진이나 브라우저에 제공.
- name : 정보의 종류 ex) viewport
- content : 정보의 값 ex) "width=device-width, ininial-scale..."
- charset : 문자인코딩 방식 ex) "UTF-8"