HTML이란?
● Hyper Text Markup Language
웹 페이지를 만들때 쓰는 언어, 완전한 프로그래밍 언어가 아니다. 👉 마크업을 하기 위한 언어
● 하이퍼텍스트?
웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
Hyper Text → Text 북, Text를 초월하는 의미를 갖고 있다. 즉 Link
● markup(마크업)?
태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진, 링크인지 표시하는 것
Markup Language → 프로그래밍 언어의 한 종류
태그를 붙이는 것
● HTML 태그?
소스에서 꺽쇠괄호(<, >)로 묶인 부분
.html(.htm) 확장자를 사용
● HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
즉, 굵은 글씨를 만들 수 있고 링크를 만들 수 있고 문단을 만들 수 있다.
index.html은 기본적으로 html 파일 확장자를 가진 파일이다. index라고 부르는 이유는 모든 웹사이트의 첫 번째 페이지의 기본이름이다. 따라서 index.는 기본적으로 항상 모든 웹사이트의 진입점이다.
태그 (Tag), 요소 (Element)
● 태그?
HTML은 태그들의 집합, HTML 코드 작성 시 기본이 되는 규칙
<, >기호로 표현
<,> 사이에는 태그 이름이 들어간다.
대부분 시작태그와 종료 태그로 이뤄져있으며 종료 태그는 이름앞에 '/'기호가 붙는다.
소스를 들여쓰기할때는 tab키를 이용
<태그 속성="속성 값" 속성="속성 값"> 형태로 이루어진다.
<imgsrc="images/first.jpg"width="350"height="200"alt="시계 이미지">
빨간색 부분은 속성
파란색 부분은 속성 값
● 빈 태그 (Enpty Tag)?
시작 태그만 존재
빈 태그의 예 <br>, <img src="">, <input type="">
● 요소(Element)?
웹 페이지를 구성하는 데이터 항목
HTML 페이지를 구성하는 각 부품, 내용을 포함하는 태그 전체
태그를 요소의 의미로 부르기도 한다.
(자바스크립트를 공부하다 보면 요소에 대해 더욱 자세히 알 수 있다.)
참고로 태그는 이러한 요소를 만들때 사용하는 작성방법이다.
요소 = 객체 object
속성 (Attribute)
● 속성?
태그에 추가적인 정보를 제공
● 속성 이름?
시작 태그 안에 공백으로 구분하여 선언
● 속성 값?
시작태그에서 태그 이름 뒤에 공백으로 나눈 후 속성 이름="속성 값"으로 표현한다.
하나의 태그에도 여러개의 속성을 사용 가능 → <h1 id="title" class="test">
<h1 title="header">Hello HTML5</h1>
title? 속성이름
" "사이에 속성 값
태그 중첩(Nesting Tages)
<h1>Hello
<i>HTML</i>
</h1>
공백
HTML은 기본적으로 두칸이상의 공백을 무시
줄 바꿈(개행)도 무시
주석
프로그래밍 언어에서 프로그램 시행에 영향을 미치지 않고 설명용으로 사용하는 코드
단축키 Ctrl + / (주석 on/off)
<!-- 주석 -->
HTML 문서 구조
<!doctype>?
문서 유형(document type)을 지정하는 것
태그는 아니지만 웹 문서를 들때 함께 사용해야 하는 요소
문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문, 최상단에 위치
<html lang="ko"> ?
lang은 언어 속성
문서가 어느 언어로 작성되었는지를 의미
<html> 태그?
문서 유형을 선언하고 내용과 정보가 시작되고 끝나는 것을 표시하는 태그
문서 정보
<head>
브라우저 창에 보이지 않는 것들
따라서 head는 페이지 제목, CSS 파일 또는 기타 항목에 대한 링크가 속한다.
<title> 태그?
문서 제목
<meta> charset 태그?
메타 데이터 → 데이터에 대한 정보
웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보
charset 문자의 인코딩 값을 속성
<body>태그?
화면에 보이는 내용
스타일시트 작성과 실행
내부 스타일 방법: HTML 페이지 내부에서 style 태그를 사요애 스타일시트를 직접 입력하는 것
외부 스타일 방법: 스타일시트를 별도의 파일로 만든 후, HTML 페이지 내부에서 link 태그의 href 속성을 사용해 스타일시트를 불러오는 것
내부 스타일시트 작성과 실행
<HTMLPageWithStyle.html>
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Basic</title>
<style>
h1 {
color : white;
background: black;
}
</style>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>외부 스타일시트 작성과 시행
<Style.css>
h1 {
color: white;
background-color: black;
}<HTMLPageWithLink.html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
내부 자바스크립트 작성과 실행
<HTMLPageWithScript.html>
<!DOCTYPE html>
<html>
<head>
<title>
HTML5 Basic
</title>
<script>
// 경고 창을 출력합니다.
alert('Hello JavaScript .. !');
</script>
</head>
<body>
</body>
</html>외부 자바스크립트 작성과 실행
<OuterJavaScript.js>
alert('OuterScript');<HTMLPageWithOuterScript.html>
<!DOCTYPE html>
<html>
<head>
<title>
HTML5 Basic
</title>
<script src="OuterJavaScript.js">
</script>
</head>
<body>
</body>
</html>외부 스타일시트 → link태그
외부 자바스클립트 → script태그
HTML Standard
html.spec.whatwg.org
'🖥️ HTML' 카테고리의 다른 글
| [HTML] 그룹화 | 시맨틱 마크업 | 시맨틱 요소 (0) | 2022.08.05 |
|---|---|
| [HTML] 이미지와 앵커 태그 (0) | 2022.07.25 |
| [HTML] 목록 요소 | 표를 만드는 순서 (0) | 2022.07.21 |
| [HTML] 폼 태그 | input 태그 | label 태그 (0) | 2022.01.08 |
| [HTML] 제목 요소, 단락 요소, 텍스트 관련 태그 (2) | 2022.01.08 |