HTML

HTML5 작성법

올콩 2021. 9. 26. 06:29
반응형

HTML5 페이지의 작성과 실행

1. 새 파일 만들기

[파일]-[새 파일]

단축키: Ctrl+N

 

2. 코드 작성 후 파일로 저장

HTML 페이지는 다음과 같은 샘플코드로 시작

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

.html, .htm 형식으로 저장

 

cf) VSCode에서 html:5 입력 후 tab키를 누르면 html 기본 형태가 자동으로 생성됨

 

3. 실행

저장한 html 파일 경로 복사 후 크롬에 붙여넣기하여 웹 페이지 실행

경로 복사 단축키: <Shift>+<Alt>+C

 

스타일시트 작성과 실행

내부 스타일 (1개 파일 - .html)

  • (HTML페이지 내부에서) style 태그를 사용해 스타일시트를 직접 입력하는 방법
  • 스타일시트가 짧은 경우 사용

외부 스타일 (2개 파일 - .css, .html)

  • 스타일시트를 별도의 파일로 생성
  • (HTML페이지 내부에서) link 태그 href 속성을 사용해 스타일시트를 불러오는 방법
  • 협업 업무나 프로젝트의 규모가 클 경우 유용

 

자바스크립트 작성과 실행

내부 자바스크립트 (1개 파일 - .html)

  • (HTML 페이지 내부에서) <script> 태그를 사용해 코드를 직접 작성하는 방법

외부 자바스크립트 (2개 파일 - .js, .html)

  • 자바스크립트를 별도의 파일로 생성
  • <script> 태그의 src 속성에 파일 경로를 입력해 HTML 페이지로 불러오는 방법

 

[참고] HTML5 웹 프로그래밍 입문(3판)

반응형