[웹사이트 만들기-4] HTML, CSS, JS 구조

1. HTML 구조

1-1) HTML 기본 구조

*.html에 !를 치고 엔터를 치면 구조가 자동으로 삽입되는데 이는 다음과 같다.

<!DOCTYPE html> <!--HTML 버전을 명시-->
<html lang="en"> <!--HTML 문서 전체 범위 명시-->

<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> <!--사용자가 보는 화면의 구조-->
  <span>Hello World!!</span>
  <span>Hello World!!</span>
  <div>Hello World!!</div>
  <div>Hello World!!</div>
  <div>Hello World!!</div>
  <div>Hello Worldddddd!!</div>
</body> <!--사용자가 보는 화면 끝-->
</html> <!--문서 전체 범위 끝-->

html lang = "en"을 "ko"로 바꿔주면 아래와 같이 번역기 창이 팝업되지 않는다.

(한국어를 전제하여 동작하는 사이트로 설정됨)

1-2) CSS 구조

div { <!--div 태그에 대한 css 구조의 시작을 의미-->
  color: red;
  font-size: 100px;
} <!--div 태그에 대한 css 구조의 끝을 의미-->

1-3) HTML과 CSS 연동

① 'main.css'라는 파일을 생성한 후 head 태그에 link 입력 후 tab키를 누르면 자동으로 하이퍼링크 창이 뜬다.

② href = "./main.css"를 입력하면 html과 css가 연동된다.

③ 연동이 완료되면 Live Server시 아래와 같이 나오게 된다.

div에 대해서만 설정하였으므로 span은 안되고 div만 된다.

※ CSS 파일을 사용하지 않고 html 파일에서 처리하고 싶으면

예시

<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">
  <link rel="stylesheet" href="./main.css">
  <script src="./main.js"></script>
  <style> <!--css 대신 스타일 변경-->
    div {
      text-decoration: underline; <!--밑줄치기-->
    }
  </style>
  <title>Document</title>
</head>

결과

2. 자바스크립트 연동

2-1) main.js 파일 생성 후 아래 소스 입력

 console.log('Hello JS!'); <!--로그 입력-->

2-2) html과 js 파일 연동

css파일은 link로 연동했다면 js파일은 script로 연동한다.

<!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">
  <link rel="stylesheet" href="./main.css"> <!--css 파일 연동-->
  <script src="./main.js"></script> <!--js 파일 연동-->
  <title>Document</title>
</head>

<body>
  <span>Hello World!!</span>
  <span>Hello World!!</span>
  <div>Hello World!!</div>
  <div>Hello World!!</div>
  <div>Hello World!!</div>
  <div>Hello Worldddddd!!</div>
</body>

</html>

2-3) 연동 확인

전체 저장 후 Live Server로 확인해보자. F12를 누르고 Console 탭을 보면 내가 썼던 로그콘솔이 잘 출력됨을 확인한다.

*F12 = 개발자 도구

'IT > 무작정 웹사이트 만들기' 카테고리의 다른 글

[웹사이트 만들기-6] CSS 문법 종류 (0)	2022.11.12
[웹사이트 만들기-5] HTML 태그 종류 (0)	2022.11.12
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키) (1)	2022.11.12
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란? (1)	2022.10.18
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할 (0)	2022.10.17