1. HTML 개요
* HyperText Markup Language
* 웹 페이지와 그 내용을 구조화하여 보여주기 위한 웹 브라우저용 언어(문서)
* 웹페이지의 컨텐츠들을 다양한 환경(브라우저)에서 동일하게 볼 수 있도록 하나의 표현 언어로 표준화하여 표시할 방법을 위해서 생겨남
- DOCTYPE(DOCument TYPE declration)
- 어떤 SGML이나 XML 또는 웹에서의 HTML 기반 문서 내에 그 문서가 특정 문서 형식과 규칙 및 정의를 따라 작성된 문서다 라는 것을 의미
- 문서형 정의
- DTD : Document Type Definition
- 선언으로 시작하여 해당 웹 문서의 버전과 종류를 나타낸다.
- 문서형 정의의 종류
- HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - HTML5
<!DOCTYPE html> - HTML5 추가된 태그
<article> <aside> <audio> <canvas> <embed> <footer> <figure> <header> <menu> <nav> <progress> <section> <summary> <time> <video> ...
- HTML
2. HTML 구성 요소
- 요소(Elements)
- HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미
- 태그(Tag)
- 요소(Elements)의 일부로 태그는 각자의 태그에 해당하는 의미를 가짐
- 태그는 시작태그와 종료태그로 한쌍을 이루는 것이 일반적
- 단, 일부 태그는 종료태그가 없는 것도 존재
- 제목을 의미하는 태그
<h1>제목입니다.</h1> - 문단을 의미하는 태그
<p>텍스트입니다.</p>.
- 속성(Attribute)
- 요소의 시작 태그 안에서 사용하는 명령어 체계를 의미
- 태그의 기능을 정하거나 추가적인 정보를 표시
- 속성을 이용해 문단에서 문자열을 가운데 정렬
<p class="edit-no">가운데 정렬합니다.</p> - 이미지 태그에서 이미지의 path를 설정하는 예
<img src="./my_photo.jpg" />
- 콘텐츠(Content)
- 요소의 내용으로 일반적으로 텍스트에 해당
- 사용 예
<p>텍스트 콘텐츠입니다.</p>
3. 실제 사용 예
4. HTML 문서 범위
META | 웹 페이지 정보 | HEAD |
LINK | 외부 문서를 연결할 때 사용(주로 css, icon 등을 연결할 때 사용) | HEAD |
STYLE | 문서의 스타일을 설정하는 태그, CSS를 작성함 | |
SCRIPT | Javascript를 불러오거나 작성하기 위한 영역 | |
TITLE | 문서의 제목을 표시 | HEAD |
- HEAD 정보 범위
- 웹 브라우저가 해석해야 할 HTML 문서의 정보
- 현재 웹 페이지의 제목, 문자 인코딩 방식, 연결할 외부 파일 위치 등등
- 웹 페이지를 구조화하기 위한 기본 설정 값을 의미
- BODY 구조 범위
- 웹 브라우저가 해석해야 할 HTML 문서의 구조
- 사용자가 화면을 통해서 볼 수 있는 내용의 형태 또는 레이아웃 등을 의미
- 일반적으로 사용자에게 보이는 화면이 여기에 해당
<!-- 주석은 이렇게 작성한다. -->
<!--
여러줄로 작성하는 것도
가능하다.
-->
<!-- 일반적으로 HTML 문서의 정보를 설정/표시한다. -->
<head>
<!-- 메타 정보를 표시한다. -->
<meta charset="UTF-8" />
<meta name="author" content="홍길동" />
<meta name="description" content="우리 사이트가 최고" />
<!-- 링크로 연결된 아이콘을 표시하거나, 스타일 등을 가져와 연결한다. -->
<link rel="shortcut icon" href="http://t1.daumcdn.net/top/favicon.ico" />
<link rel="stylesheet" href="https://t1.daumcdn.net/top/tiller-pc/20220218_100902/css/common.css" />
</head>
<!-- 여기에서부터 실제 화면에 표시되는 정보를 표시한다. -->
<body>
<!-- 텍스트 문자를 표시한다. -->
<p onclick="clickbutton()">환영합니다.</p>
<!-- 이미지 정보를 표시한다. -->
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" />
</body>
<!-- 화면의 디자인적인 스타일을 여기에 작성한다. -->
<style>
/* 여기에서 주석은 이와 같이 표시한다. */
/* 이미지의 높이와 넓이를 설정한다. */
img {
width: 200px;
height: 100px;
}
/* 텍스트 크기와 넓이 그리고 색상을 설정한다. */
p {
font-size: 30px;
font-weight: bold;
color: blue;
}
</style>
<!--
화면에서 동적인 기능 부분을 여기에 코딩한다.
현재는 거의 대부분의 경우 자바스크립트로 코드를 작성한다.
-->
<script>
// 여기에서 주석은 프로그래밍 주석이므로 //로 주석을 한다.(한줄 주석)
/*
여러줄 주석 : 범위 주석
주석을 여러줄로...
*/
// 버튼이 클릭될 경우 시스템 알리을 화면에 표시한다.
function clickbutton() {
alert("환영합니다. 오늘 수업은 여기까지입니다.");
}
</script>
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 오디오, 비디오, 멀티미디어 대체 태그 (0) | 2022.09.15 |
---|---|
[HTML] HTML 입력 폼 태그, 이미지 태그 (0) | 2022.09.15 |
[HTML] HTML 리스트, 테이블 태그 (0) | 2022.09.15 |
[HTML] HTML 시맨틱, 레이아웃, 텍스트 태그 (0) | 2022.09.15 |