HTLM 구조

addison·2023년 7월 9일

HTML+CSS

목록 보기

4/6

의미 분석하기

<!DOCTYPE html> <!-- html의 버전, html5 -->
<html lang="ko"> <!-- 범위의 시작과 끝 -->
<head> <!-- html의 정보 묶음 -->
    <meta charset="UTF-8"> <!-- 문자 인코딩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <!-- "viewport" 브라우저에서 볼수 있는 화면, 모바일화면에서-->
  <!-- 화면의 가로 너비는 모바일 디바이스 동일 출력, 
확대축소의 비율이 1.0으로 하지않음으로 화면 보여주겠다--> 
  
    <title>Document</title> <!-- html의 제목 -->
</head>
  
  
<body> <!--html의 구조 -->
  <h1>Hello World!</h1> <!-- 실제 화면 출력-->
</body>
</html>

파일을 HTML에 연결하기

main.css 작성
main.js 작성

const el = document.querySelector('h1')
console.log(el)

defer 추가하면 현재 html 코드의 body 부분을 제대로 처리할 수 있다.
js 코드를 통해서 변한 것은 보기 어렵지만
f11 개발자 도구를 열어보면
요소나 콘솔 부분에 콘솔 탭 열어보면
자바스크립트 코드를 통해서 콘솔이라는 창에 출력되어있다.
기록으로 남게됨.
출력되는 기록은 화면에 영향주지 않지만 js 에서만 작성할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel = "stylesheet" href="./main.css">
  <script defer src="./main.js"></script>
</head>
<body>
  <h1> Hello World! </h1>
</body>
</html>

웹 페이지를 나누고 연결하기

about.html 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1> About </h1> 
</body>
</html>

index.html에서

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel = "stylesheet" href="./main.css">
  <script defer src="./main.js"></script>
</head>
<body>
  <a href = "/about.html">
    About 
  </a>
  <h1> Hello World! </h1>
</body>
</html>