IT/무작정 웹사이트 만들기

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

크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널 2022. 11. 12. 13:14
반응형

[웹사이트 만들기-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 파일에서 처리하고 싶으면

<style></style> 태그를 <head>태그 안에 적용하면 된다.

 

예시

<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 = 개발자 도구

반응형