HTML5 페이지의 구조
▶ html 태그의 lang 속성
- 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도움
<html lang="en">
-> <html lang="ko">코드 실행시 번역알림창 뜨는거 없앨 수 있다!
▶ head 태그 속성
| 태그 | 설명 |
| meta | 웹 페이지에 추가 정보 전달 |
| title | 페이지 제목 지정 |
| script | 웹 페이지에 스크립트 추가 |
| link | 웹 페이지에 다른 파일 추가 |
| style | 웹 페이지에 스타일시트 추가 |
| base | 웹 페이지의 기본 경로 지정 |
** mata : data의 data
▶ head 태그 안의 title 태그
- 웹 브라우저 탭에 표시됨
▶ 스타일 시트 작성과 실행
- 두 가지 방법의 스타일시트를 사용해 스타일 적용
1) 내부 스타일 방법 : style 태그를 사용해 스타일시트를 직접 입력
<HTMLPageWithStyle.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
2) 외부 스타일 방법 : link태그의 href 속성을 사용해 스타일시트를 불러옴
** 여러 사람이 함께 협업하고 프로젝트 규모가 클 때는 외부 스타일이 좋음
<style.css>
h1 {
color: white;
background: black;
}
<HTMLPageWithLink.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
▶ 자바스크립트 작성과 실행
1) 내부 작성 방법 : script 태그를 사용해 내부에서 작성
<HTMLPageWithScript.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//경고 창을 출력합니다.
alert('Hello Javascript..!')
</script>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
2) 외부 작성 방법 : script 태그의 src 속성을 사용해 외부에서 불러오도록 작성 가능
**js는 길어질 때가 많아 주로 외부 js로 작성
<OuterJavaScript.js>
alert('OuterScript');
<HTMLPageWithOuterScript.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="OuterJavaScript.js"></script>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
▶ 오류와 검증
- 버그(bug) : 프로그램이 원하지 않는 방향으로 동작하는 것
- 디버그(debug) : 버그를 잡는(수정하는) 행위
** 웹 브라우저의 검사(F12) 기능으로 쉽게 디버그
> js 코드의 문제점을 검사로 확인할 수 있음
> [Elements(요소)] : 현재 HTML 페이지의 계층 구조와 각 태그에 적용된 스타일을 파악
> [Console(콘솔)] : 오류를 확인하거나 자바스크립트 코드를 추가로 입력
<a href="https://www.flaticon.com/kr/free-icons/html-5" title="html 5 아이콘">Html 5 아이콘 제작자: Freepik - Flaticon</a>
'Front-end > HTML' 카테고리의 다른 글
| [HTML] 04 HTML5 입력 양식 태그와 구조화 태그 (1) | 2025.03.09 |
|---|---|
| [HTML] 03 HTML5 기본 태그 (0) | 2025.03.08 |
| CSS3 실습 5-5 (0) | 2022.12.09 |
댓글