HTML
html은 Hyper Text Markup Language의 줄임말입니다.
웹을 이루는 가장 기초적인 구성 요소입니다.
프로그래밍 언어가 아니며, 컨텐츠의 구조를 정의하는 마크업 언어입니다.
Hyper Text
- 참조를 통해 사용자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트입니다.
Markup Language
- 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어입니다.
- 지난 번에 공부했던
Markdown도 이에 해당합니다.
HTML 분석
요소 (Element)
- 각각의 요소들이 모여 html을 구성합니다.
- 요소는 중첩(nesting)될 수 있습니다.
- 요소는 속성(attribute)을 가질 수 있습니다.
- 여는 태그(opening tag) : 요소의 시작을 나타냅니다. 요소의 이름으로 구성되고 여닫는 꺽쇠괄호로 감싸집니다.
- 닫는 태그(closing tag) : 요소의 끝을 나타냅니다. 여는 태그와 같은 형태지만 요소 이름 앞에 전방향 슬래쉬가 포함됩니다.
- 컨텐츠(content) : 요소의 내용으로 여는 태그, 닫는 태그 안에 작성됩니다.
🚨 기본적으로 요소는 여는 태그, 닫는 태그를 갖게 되지만, 그렇지 않은 경우도 있습니다.
- empty elements : img 요소의 경우에는 속성을 가지지만 내용이 없어 닫는 태그도 필요하지 않습니다. (br, hr, input, link, meta, etc.)
ex) <img src="images/example.png" alt="example image">
HTML의 기본구조
텍스트 파일인 HTML 문서를 구조화하여 브라우저에서 렌더링하기 위해 DOM트리 구조를 갖습니다.
(DOM : Document Object Model)
다음은 DOM트리 구조를 갖는 기본적인 html의 구성 요소입니다.
이 구조를 바탕으로 html 내의 요소를 중첩시켜가며 문서를 작성합니다.
<!DOCTYPE html>: html 페이지를 올바르게 동작하기 위해 포함되는 요소<html></html>: 최상위(root) 요소<head></head>: 문서 메타데이터 요소- 문서 제목, 인코딩, 스타일, 외부 파일 로딩 등 일반적으로 브라우저에 나타나지 않는 내용을 담고 있습니다.
<body></body>: 문서 본문 요소- 실제 화면에 나타나는 모든 내용을 담고 있습니다.
<meta charset="utf-8">: 문서가 사용해야 할 문자 집합을 utf-8로 설정합니다.<title></title>: 페이지의 제목을 나타내는 내용을 담고 있습니다.
html 기본구조 예시
- html 파일에서
! + tab을 입력하면 기본구조를 바로 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>기본 요소 몇 가지
제목
특정 부분이 문서의 제목이나 하위 내용의 제목임을 구체적으로 명시할 수 있습니다.
제목 요소는 h1 ~ h6까지 있습니다.
- 다음과 같이 작성할 수 있습니다.
<h1>main title</h1>
<h2>Top level heading</h2>
<h3>Subheading</h3>
<h4>Sub subheading</h4>문단
<p>요소를 이용하여 문자의 문단을 포함합니다.
일반적인 문자 내용을 나타낼 때 사용합니다.
<p>A single paragraph</p>연결
hyper text에서 가장 중요한 부분입니다.
anchor 의 약자인<a>요소를 이용하여 단어를 링크로 만들어줍니다.
href 속성 (hypertext reference)을 통해 이동할 링크를 입력할 수 있습니다.
<a href="https://dongkeun2.tistory.com">블로그로 이동</a>느낀점🧐
블로그에 글을 작성할 때에도 html언어를 사용할 수 있는데 그 동안은 몰라서 사용하지 않았습니다.
알고 나서도 markdown보다 불편한 것 같아 포스팅할 때에는 html은 안쓰고 쭉 markdown만 사용할 것 같네요ㅎ_ㅎ
요소가 많이 중첩될수록 구조가 복잡해져서 알아보기 힘들어지는데, DOM트리 구조를 잘 이해하고 있어야 할 것 같습니다.
그리고 내용이 없는 요소가 아니라면 여는 태그와 닫는 태그의 쌍도 잘 확인하여 작성해야 오류가 발생하지 않겠죠?
html은 그 동안 사용했던 프로그래밍 언어와 달리 오류를 반환해주지 않고 레이아웃이 망가진 상태로 출력되기 때문에 기본 구조를 확실히 알고 꼼꼼하게 확인해주는 습관을 가져야겠네요!! 🤔
매일 남기는 말
배워가는 단계에 있는 새싹 개발자입니다. 오탈자나 틀린 정보가 있다면 알려주시면 감사하겠습니다. 행복한 하루 되세요🐹
'개발일기 > Web' 카테고리의 다른 글
| [React]Redux로 상태관리하기 + Redux-toolkit (0) | 2022.08.24 |
|---|---|
| [Node.js] socket.io를 활용하여 채팅구현하기 (2) | 2022.06.16 |
| [Django] Django 기초(프로젝트 및 앱 만들기) (0) | 2022.03.03 |
| [Python] 가상환경(virtual environment) 사용하기 (0) | 2022.03.03 |
| [HTML] 시맨틱 태그(Semantic Tag) 알아보기 (0) | 2022.02.13 |