09009

[HTML] HTML 작성 및 실행 본문

Front-End/HTML
[HTML] HTML 작성 및 실행
09009

HTML 기본 형태 생성

VS Code 창에서 !를 작성하고 enter를 누르거나 ht 약어를 작성한 후 html:5를 선택하여 enter를 클릭하면

html 기본 형태가 자동으로 생성된다.

!를 작성하였을 때
html:5를 입력하였을 때
html 기본 형태가 자동으로 생성된 모습

 

내부 스타일시트 작성과 실행

head나 body 태그에 아래와 같이 style 태그를 생성 후 저장하고 실행한다.

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML5 Basic</title>
  <style>
    h1 {
      color : white;
      background : black;
    }
  </style>
</head>
<body>
  <h1>Hello World..!</h1>
</body>
</html>

💻 출력

 

외부 스타일시트 작성과 실행

위에서 내부 스타일시트에 style 태그를 작성했던 것과 달리 이번에는 파일을 따로 생성하여 작성한다.

 

 

일단 기존 html 문서를 작성한 뒤

 

✍ 2-4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <h1>Hello World..!</h1>
</body>
</html>

VS Code에서 [파일] - [새 파일] 메뉴를 선택하여 새 파일을 생성하고 파일 확장자를 CSS로 설정한다.

파일 이름은 style.css로 저장하고 2-4.html에서 link 태그를 사용하여 외부 스타일시트를 불러오도록 한다.

 

✍ style.css

h1 {
  color : white;
  background: black;
}

✍ 2-4.html

link 태그를 사용하여 외부 스타일시트를 불러온 모습

💻 출력

 

내부 자바스크립트 작성과 실행

아래 html 파일에서 head 태그나 body 태그 내부에 아래와 같이 script 태그를 생성 후,

코드를 작성하고 파일을 저장하고 실행한다.

 

✍ 2-5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Basic</title>
    <script>
        // 경고창을 출력합니다.
        alert("Hello JavaScript .. !");
    </script>
</head>
<body>
    
</body>
</html>

💻 출력

외부 자바스크립트 작성과 실행

  script 태그를 사용하여 외부 자바스크립트를 불러와 파일을 저장하고 실행한다.

 

✍ 2-7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Basic</title>
    <script src = "outerjavascript.js"></script>
</head>
<body>
    
</body>
</html>

 

✍ outerjavascript.js

alert('Hello Javascript!');

 

💻 출력

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

[HTML] 시맨틱 태그  (0) 2023.04.08
[HTML] 공간 분할 태그 - div, span  (0) 2023.03.29
[HTML] 입력 양식 태그  (0) 2023.03.29
[HTML] 테이블 태그  (0) 2023.03.29
[HTML] 글자, 목록 태그  (0) 2023.03.28
'Front-End/HTML' Related Articles more
Comments