<HTML> Unit 2. 웹 페이지 기본 구조와 작성 방법

이채현·2022년 11월 4일
baselinkmetascriptstyletitle
0

1) HTML 기본 용어

1. 태그와 요소

요소 (element)

  • HTML 페이지를 구성하는 각 부품
    Ex) 제목, 본문, 이미지 등

  • 요소와 태그를 구분하지 않고 사용.

[생성 방법]

  1. 내용을 가지는 요소 
<h1>Hello HTML5</h1>
<p>즐거운 웹 프로그래밍 입문</p>
<audio></audio>
  1. 내용을 가질 수 없는 요소
<img>
<br>
<hr>

태그 (element)

  • 요소를 만들 때 사용하는 작성 방법
    ex) <h1>Hello HTML5</h1>

XHTML 표기법

  • 내용을 가질 수 없는 요소는 HTML 표기법과 XHTML 표기법 둘 다 사용 가능.
  • 내용을 가질 수 없는 태그를 구분하고자 XHTML 표기법 사용.
<img />
<br />
<hr />

2. 속성

  • 태그에 추가 정보를 부여할 때 사용.
<h1 title="header">Hello HTML5</h1>
<img src="image.png">

※title, src= 속성 이름(name),
 header, image.png= 속성 값(value).

3. 주석

  • 코드 설명을 기록할 때 사용.

  • 여러 줄 주석 작성 방법

<!-- 주석 -->

2) HTML 기본 용어

1. HTML5 페이지의 구조

HTML 페이지 구조 예시

<!DOCTYPE html>
<html>
<head>
	<title>Hello HTML5</title>
</head>
<body>

</body>
</html>

<html> 태그의 lang 속성

<html lang="ko">

• 구글 검색 엔진이 웹 페이지를 탐색할 때 어떤 언어로 작성했는지 쉽게 알 수 있도록 도움.

<head> 태그 내부에 넣을 수 있는 태그

  • <meta>: 메타 데이터(해당 문서에 대한 정보)를 정의할 때 사용.

    • 속성:
      charset: character set, 문자 집합
      name: 메타 데이터의 이름
      content: name과 연관된 값

[예시]

  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  • <title>: 페이지 제목 지정.

[예시]

<head>
	<title>HTML Elements Reference</title>
  • <link>: 웹 페이지에 다른 파일 추가
    • 속성:
      rel: 현재 문서와 연결된 문서의 relationship
      href: URL

[예시]

	<link rel="stylesheet" href="style.css">
  • <style>: 웹 페이지에 스타일시트 (css) 추가.

[예시]

<html>
<head>
<style>
  h1 {color:red;}
</style>
</head>
<body>

<h1>A heading</h1>

</body>
</html>
  • <base>:
    1) 웹 페이지의 기본 경로 지정
    2) href나 target 속성 중 최소 하나 이상을 명시해야 함.
<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>

2. HTML5 페이지 작성법

스타일시트 작성과 실행

내부 스타일

  • HTML 페이지 내부에서 <style> 태그를 사용해 직접 입력.
  • 스타일시트가 간단하고 짧은 경우

[예시] 

	<head>
	<title>HTML5 Basic</title>
	<style>
	  h1 {
	    color : white;
	    background: black;
	  }
     </style>
</head>
<body>
	<h1> Hello world..! </h1>

외부 스타일

  • 스타일시트를 별도의 다른 파일에 생성 & <link>태그의 href 속성을 사용해 불러옴.
  • 협업 업무나 프로젝트 규모가 클 때 사용.

예시)
[Style.css]

h1 {
	color : white;
	background: black;

[HTMLPageWithLink.html]


<head>
	<link rel=”stylesheet” href=”Style.css”>
</head>
<body>
	<h1>Hello World..!</h1>
</body>
</html>

자바스크립트 작성과 실행

내부 자바스크립트

  • <script> 태그를 사용해 HTML 페이지 내부에 코드 작성.
  • 주석
    • 한 줄
    // 경고 창을 출력합니다.
    • 여러 줄
    /*
경고 창을
출력합니다.
*/

[예시]

<head>
	<script>
	  // 경고 창을 출력합니다. 
	alert(‘Hello Javascript .. !’);
	</script>
</head>

외부 자바스크립트

  • <script> 태그의 src속성에 파일 경로를 입력해 HTML 페이지로 불러옴.

[예시]

[OuterJavaScript.js]

alert(‘OuterScript’);

[HTMLPageWithOuterScript.html]

<head>
	<script src=”OuterJavaScript.js></script>
</head>

3. 오류와 검증

검사 실행

  • 버그(bug): 프로그램이 원하지 않는 방향으로 동작하는 것.
  • 디버그(debug): 버그를 잡는 행위
    [방법]
    1) 마우스 우클릭: [검사]
    2) 단축키:
    Windows- F12 or Ctrl + Shift + I
    Mac- option +cmd + I

검사를 사용한 계층 구조 확인

  • [Elements] 탭: 현재 HTML 페이지의 계층 구조 확인
  • [Console] 탭: 오류 확인 및 자바스크립트 코드 추가 입력.
profile
이채현
소프트웨어융합학과 재학 중인 대학생
다음 포스트

Velog 튜토리얼.🐣

0개의 댓글