[HTML] HTML 기초

HTML이란 웹페이지를 만들 때 사용하는 언어를 의미하며, 플랫폼에 관계없이 사용 가능한 Hyper Text 문서를 만들 수 있는 마크업(markup) 언어이다. HTML은 태그라는 문법을 사용하는데, 그 종류가 약 150가지이다.

- Hyper Text : 하이퍼링크를 통해 다른 문서로 접근할 수 있는 텍스트

- Markup 언어 : 일반 텍스트 문서에 < >로 둘러싸인 약속된 태그(tag)를 붙여줌으로써, 특수한 기능을 웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어

HTML 코드로 웹페이지에 개발자가 표시하고싶은 내용이 적힌 HTML 문서를 만든다. 완성된 HTML 코드를 웹브라우저가 로딩하면 웹페이지가 만들어진다. 이렇게 HTML 코드가 웹브라우저를 통해 해석되고 표현되는 일련의 과정을 렌더링이라고 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> : 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그, 현재 표준으로 사용되고있는 HTML 버전을 사용하기 위해 적어주는 것

<html> ... </html> : HTML 문서가 시작되고 끝나는 것을 나타내는 태그.

<head> ... </head> : HTML 문서의 머리말 부분. 웹 페이지의 정보 및 문서에서 사용할 외부 파일들을 링크할 때 사용.

<title> ... </title> : HTML 문서의 제목.

<body> ... </body> : HTML 문서의 본문. 가장 중요한 부분.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>웹브라우저 제목</title>
</head>
<body>
    <b>내용</b>
</body>
</html>

- HTML의 이해는 태그의 종류, 의미, 속성을 이해하는 것이다.

- 태그는 속성(Attribute)을 가질 수 있다. 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여,
웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의 일부.

- 복합 태그 vs. 단일 태그

복합 태그 : 쌍으로 사용 되는 태그

ex) <title> ... </title>, ... , <html> ... </html> 등

단일 태그 : 단일으로 사용되는 태그

ex) , <hr> 등

- 속성을 갖는 태그 vs. 속성을 가지지 않는 태그

속성을 꼭 필요로 하는 태그
<a href=“http://www.naver.com">네이버</a> 로 연결
<img src=“./images/mypicture.jpg">
속성이 옵션으로 사용되는 태그: <hr noshade> 등
속성을 가지지 않는 태그: ... 등

- 태그는 대/소문자 구분이 없다.

크롬 브라우저 : F12 버튼 / 메뉴(오른쪽 상단 점 3개) -> 도구 더보기 -> 개발자 도구

리미창고