JunO3O
HTML의 기본
HTML의 기본
2023. 3. 21. 02:59ㆍHTML
HTML의 기본 용어
: HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어 !
# 요소(Element) / 태그(Tag) / 속성(Attriubte)
ㅁ 요소(Element)
: HTML 페이지를 구성하는 각 부품을 요소라고 하며, 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용(contents)으로 구성됩니다.
ex) 제목, 본문, 이미지
ㅁ 태그(Tag)
: 태그는 HTML 문서를 구성하는 기본 단위입니다.
ㅁ 시작 태그(Start Tag) / 끝 태그(End Tag)
시작 태그 ┐ ┌ 내용(contents)
<h1> New HTML5 </h1>
└ 끝 태그
ㅁ 속성(Attribute)
: 태그에 추가 정보를 부여할 때 사용합니다.
속성 이름 ┐ ┌ 내용
<h1 title = "header"> New HTML5 </h1>
└ 속성 값
속성 이름 ┐
<img src="image.jpg">
└ 속성 값
ㅁ 주석
: 주석을 작성했다하더라도 프로그램 실행에는 영향을 미치지 않으며, 해당 코드에 대한 설명을 작성할 때 사용합니다.
<!-- 주석 처리를 하는 방법입니다. -->
HTML5 페이지 구조와 작성법
<!DOCTYPE html> <!-- HTML 문서라는 것을 알려주기 위해 반드시 첫 행에 나와야 합니다. -->
<html lang="en"> <!-- 모든 HTML 페이지의 기본 요소로, 모든 태그는 이 html 태그 내부에 작성합니다. -->
<head> <!-- body 태그에 필요한 스타일시트와 자바스크립트를 작성합니다. -->
<title>Document</title> <!-- 웹 브라우저에 표시하는 제목을 지정합니다. -->
</head>
<body>
<!-- 웹 브라우저에 표시할 내용을 작성합니다. -->
</body>
</html>
ㄴ> 첫번째 줄에서 <!DOCTYPE html>를 작성함으로써 문서 형식(document type)라는 것을 알려준 뒤, 실질적인 HTML document는 2행부터 시작되는데 <html> 과 </html> 사이에 기술해야 합니다.
ㄴ> 웹 브라우저에 출력되는 모든 요소는 <body> 와 </body> 사이에 위치해야 합니다.
ㅁ html 태그에는 lang 속성을 입력할 수 있습니다. lang 속성은 웹 브라우저 동작에는 어떠한 영향을 주지 않고, 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도와줍니다.
| lang 속성 값 | 언어 | lang 속성 값 | 언어 |
| ko | 한국어 | ru | 러시아어 |
| en | 영어 | zh | 중국어 |
| ja | 일본어 | de | 독일어 |
ㅁ head 태그 내부에는 아래와 같은 태그만 입력할 수 있습니다.
| 태그 | 설명 | 태그 | 설명 |
| meta | 웹 페이지에 추가 정보 전달 | link | 웹 페이지에 스타일시트 추가 |
| title | 페이지 제목 지정 | style | 웹 페이지에 스타일스트 추가 |
| script | 웹 페이지에 스크립트 추가 | base | 웹 페이지의 기본 경로 지정 |
<!DOCTYPE html>
<html>
<head>
<title> 웹 페이지 제목 </title>
</head>
<body>
<h1> 웹 페이지에 보여질 내용을 입력합니다. </h1>
</body>
</html>
