1) HTML 소개
HTML이란 Hyper Text Markup Language의 줄임말로,
1990년대 영국의 물리학자 팀 버너스리가 제안하여 개발되었다.
초기 개발 목적은 연구소의 연구원들이 신속하게 정보와 문서를 공유하기 위해서였고,
현재의 웹은 문서의 형태는 아니지만, 정보를 공유한다는 목적은 여전히 같다.
Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 가진 텍스트, 즉 링크를 의미한다.
Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능한 특징이 있다.
HTML은 .html 파일 확장자를 쓰면, 그 파일 안에 html 코드를 작성하게 된다.
https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 말고도 웹 페이지의 외형과 표현을 서술하고(CSS), 기능과 동
developer.mozilla.org
2) HTML 문법 - 태그
HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙이다.
태그는 < > 기호로 표현하며 < > 기호 사이에 태그 이름이 들어간다.
대부분 태그는 시작 태그(<)와 종료 태그(>)로 이루어지며 종료 태그(>)는 태그 이름 앞에 '/' 기호가 붙는다.
<h1>This is h1 Tag</h1>위 코드는 태그의 가장 기본적인 예로, h1~h6 중 가장 중요한 문장을 나타내는 <h1>을 사용한 코드이다. 또 내용을 포함한 태그 전체를 요소(Elemnet)라고 하는데, 태그와 요소는 의미가 엄연히 다르니 이를 혼동하지 않도록 주의해야 한다.
HTML에는 많은 종류의 태그들이 있고, 각각의 의미에 맞게 태그를 사용해야 한다. 태그의 종류는 다음시간에 다뤄보도록 하겠다.
태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용된다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
3) HTML 문법 - 속성
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.
속성은 이름과 값으로 이루어져 있는데, 시작 태그(<)에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다. 여기서 속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현한다.
<h1 id="title">This is h1 #title</h1>위 코드는 <h1>에 id(#) 속성을 추가해서 title 값을 선언한 코드이다.
의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있는데, 여러 속성을 선언할 때는 공백으로 구분해서 사용하면 된다.
<h1 id="title" class="main">This is h1 #title .main</h1>위 코드는 <h1>에 id(#)와 class(.) 2개의 속성을 선언한 코드이다. 속성의 선언 순서는 태그에 영향을 미치지 않으며, class(.)를 id(#)보다 먼저 선언해도 결과는 같다.
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분되고, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다.
위 예시에 쓰인 id(#)와 class(.) 속성은 글로벌 속성이다.
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
HTML 특성 참고서
HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.
developer.mozilla.org
4) HTML 문법 - 태그 중첩
태그 안에 다른 태그를 선언할 수 있지만, 태그를 중첩해서 사용할 때 중첩되는 태그는 부모 태그를 벗어나선 안된다.
[잘못된 태그 선언]
<h1>This is <i>wrong tag</h1></i><h1> 안에서 <i>가 시작되었으나, <i>보다 부모인 <h1>의 종료 태그가 먼저 선언됐다.
[올바른 태그 선언]
<h1>This is <i>right tag</i></h1>자식인 <i>의 종료 태그를 먼저 선언한 후 <h1>의 종료 태그를 선언했다.
The W3C Markup Validation Service
파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사
validator.kldp.org
5) HTML 문법 - 빈 태그
태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며, 그 사이에 내용이 들어간다.
하지만 태그 중에는 위와 같지 않은 태그가 존재하기도 하는데, 이러한 태그를 내용이 없는 빈 태그라고 한다.
● <br>
● <img src="">
● <input type="">
위와 같은 빈 태그는 내용이 없어서 종료 태그가 필요없다. 빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나, 화면에 표시되지 않더라도 다른 용도로 사용되는 태그다.
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우인데, 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고도 한다.
빈 태그에는 대체되는 태그만 있는 것은 아니며, 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그인 <br>도 존재한다.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
Empty element
An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).
developer.mozilla.org
6) HTML 문법 - 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.
<h1>Hello, World</h1>
<h1>Hello, World</h1>
<h1>
Hello,
World
</h1>HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 코드는 모두 같은 텍스트가 화면에 나타난다.
7) HTML 문법 - 주석
주석은 화면에는 노출되지 않고 코드 내에서 메모의 목적으로만 사용하는 것이다.
<!-- 여기 쓰는 모든 것은 주석 처리가 된다. -->
<!-- 주석은 여러 줄로도 작성할 수 있고
<h1>Hello, World</h1>
위 <h1>태그는 브라우저가 해석하지 않는다.
-->HTML에서 주석의 시작은 <!-- 로 표시하고, -->로 종료한다.
Python은 #이고, JavaScript는 //와 여러 줄 주석은 /* */로 처리한다.
https://www.w3schools.com/tags/tag_comment.asp
HTML comment tag
HTML Tag Example An HTML comment:
This is a paragraph.
Try it Yourself » Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displa
www.w3schools.com
8) 문서의 기본 구조
HTML의 기본구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로, 크게는 문서 타입 정의와 <html> 요소로 구분한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML-CSS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html><!DOCTYPE>같은 문서 타입 정의는 보통 DTD(doctype)라고 부르고, 위 코드에 보이는 것처럼 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며, 반드시 문서 내 최상단에 선언되야 한다.
문서 타입 선언 후에는 <html> 태그가 나와야 하고, 자식으로는 <head> 태그와 <body> 태그가 있다.
<html> 태그의 lang 속성은 문서와 어느 언어로 작성되었는지를 의미하고, "ko"는 korean, "en"은 english를 의미한다.
<head> 태그에 위치하는 태그들은 브라우저 화면에는 표시되지 않고, 문서의 기본 정보 설정이나 외부 스타일 시트 파일(CSS) 및 js 파일(JavaScript)을 연결하는 등의 역할을 한다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정하며, UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나이다.
<body> 태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, HTML 문서를 작성할 때 다루는 태그들 대부분이 모두 여기에 들어간다.
https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33340
[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith
- 부스트코스
www.edwith.org
위 8개의 내용은 부스트코스 무료 강의에서 들을 수 있다🥰
댓글