HTML 시작하기

VS Code를 설치

참고: https://hye-rim.tistory.com/category/%EA%B8%B0%ED%83%80/VS%20Code

① 탐색기를 누르고

② 폴터 열기를 클릭하여 생성한 폴더를 추가한다.

폴더를 추가하는 방법은 에디터 상단 맨 왼쪽에 '파일(F)' > '폴더 열기'로도 새로운 파일을 불러올 수 있다.

작업환경 세팅

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

"!" + [Tab]을 눌러 <!DOCTYPE html>을 세팅한다.
<!DOCTYPE>: HTML5(표준) DOCTYPE(DTD Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
<html></html>: 문서의 전체 범위. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할. 제작하는 사이트의 주언어에 맞게 수정한다.
<head></head>: 문서의 정보를 나타내는 범위. 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(css) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
<meta>: HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공
<title></title>: HTML문서의 제목을 정의. (웹페이지의 제목)
<body></body>: 문서의 구조를 나타내는 범위. 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위

CSS, JS 연결

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome!</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
  </head>
  <body>

  </body>
</html>

<link rel="stylesheet" href=" "> : 외부에 작성된 css파일을 HTML와 연결해 준다.link태그는 href(hypertext reference)에 해당 파일이 위치한 경로를 명시한다. favicon(브라우저 탭 웹페이지 제목 옆에 나오는 작은 아이콘)도 연결할 수 있다.
<script src=" "></script>: 외부에 작성된 js파일을 HTML와 연결해 준다. script태그는 src (source)에 해당 파일이 위치한 경로를 명시한다.

"link" + [Tab], "script" + [Tab]을 누르면 자동 완성 할 수 있다.

'Front-End > HTML' 카테고리의 다른 글

HTML 이해하기 (0)	2022.09.18

VS Code를 설치

작업환경 세팅

CSS, JS 연결

'Front-End > HTML' 카테고리의 다른 글

검색 태그

티스토리툴바