Part 1. HTML/CSS/JS ch3,ch4. 시작하기

3922 단어 FC_OnlineFC_Online

Doctype(DTD)

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

HTML버전

HTML1~4
XHTML
HTML5 : 표준

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

CSS , JS 연결

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

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

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

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"

상대경로 절대경로

상대경로절대경로
./ (생략가능) : 주변http, https : 원격의 사이트주소
../ : 상위폴더/,// : 최상위 경로, 루트

Codepen.io

https://codepen.io/
웹에서 바로 결과 출력할 때 사용

브라우저 스타일 초기화

https://www.jsdelivr.com/package/npm/reset-css
reset.css 로 브라우저 기본 스타일을 초기화

좋은 웹페이지 즐겨찾기