반응형
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판)
반응형
'HTML' 카테고리의 다른 글
| HTML5 글자 태그 (0) | 2021.09.26 |
|---|---|
| HTML5 오류와 검증 (0) | 2021.09.26 |
| HTML5 페이지 구조 (0) | 2021.09.26 |
| HTML5 기본 용어 (0) | 2021.09.26 |