HTML(HyperText Matkup Language)
정의 📋
- 웹사이트를 만드는 가장 기초가 되는 마크업 언어
- 웹페이지의 내용과 구조를 담당하는 언어
Markup 언어란? 특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어 (프로그래밍 언어 X)
특징 🙌
- 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할을 한다.
구조 🔩
<html>: 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.<head>: 주로 외부 소스를 참조해야할때 사용하곤 한다.<body>: 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 된다.
문법 🔏
요소 (Element)
- HTML 요소는 시작 태그와 종료 태그 그리고 그 사이에 위치한 콘텐츠로 구성된다. ( HTML Element 참고 )
<start tag> content </end tag>1.<start tag> : 어떤 태그를 사용하는지 명시
2.contents : 해당 태그가 적용되기를 바라는 텍스트 문구
3.<end tag/> : 해당 태그가 적용되는 끝 지점을 명시
속성 (Attribute)
- HTML에게 추가적인 정보나 명령을 받을 수 있게 정보들을 전달해주는 것
<img src = "html.png">src : Attribute Name (속성명)
html.png : Attribute Value (속성값)
태그 (Tag)
1. <!DOCTYPE html>
- 문서 형식 정의 태그
- 출력할 웹 페이지의 형식을 브라우저에게 전달
- 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다.
2. <html>
- 전체 HTML 문서를 감싸는 태그
- 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.
- 하나만 존재해야 한다.
- HTML 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 된다.
3. <head>
- HTML 문서에 대한 정보를 나타내는 부분
- 주로 외부 소스를 참조해야 할 경우 사용한다.
- 하나만 존재해야 한다.
- HTML 바로 아래에 있어야한다.
4. <body>
- HTML 문서에서 실제적으로 보여지는 부분
- 하나만 존재해야 한다.
- html 바로 아래, head 다음에 위치해야 한다.
상대경로와 절대경로 🛠
상대경로 (Relative)
index.html
- 같은 파일 시스템 구조상의 위치를 표현
- 주로 웹사이트 내부의 자료로 연결할 때 사용
절대경로 (Absolute)
https://google.com/index.html
- 전체 인터넷을 기준으로 해당 자료의 위치를 표현
- 주로 외부 웹페이지로 연결할 때 사용
출처 📝
위의 내용은 Html을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 알려주시면 감사하겠습니다! 🙌
FrontEnd Developer