HTML은 Hyper Text Markup Language (하이퍼텍스트 마크업 언어)의 줄임말입니다.
Hyper texts (하이퍼 텍스트)는 웹사이트에서 필요한 기본 근본입니다, 관련 항목이나 특정 부분과 연결하기 위한 텍스트입니다.
HTML은 프로그래밍 언어가 아닌 마크업 언어입니다. 그럼 프로그래밍 언어와 마크업 언어의 차이점은 무엇인가요?
프로그래밍 언어 (Programming Language)는 컴퓨터 시스템을 구동시키는 소프트웨어를 작성하기 위한 언어이며 메모리에서 데이터를 읽고, 데이터에 대한 조건부 논리를 제공합니다.
마크업 언어 (Markup Language)는 태그 등을 이용해서 문서나 데이터의 구조를 표현하는 언어의 한 가지입니다. 프로그래밍은 불가하고 웹사이트를 제작할 때 뼈대 부분입니다.
간단한 HTML 역사
- 1991년 HTML 1.0
- 1995년 HTML 2.0
- 1997년 HTML 3.2
- 1999년 HTML 4.01
- 2000년 XHTML 1.0
- 2007년 HTML 5
HTML 5에서는 그전에 불편했던 W3C와 XHTML 사용 표준에서 탈락시키고 현재 HTML5와 CSS3가 표준으로 확정되고 사용되고 있습니다. (참고 자료 https://www.inflearn.com/pages/infmation-61-20230404)
HTML 태그 (tag)
태그는 웹 페이지의 콘텐츠와 구조를 저의하는 데 사용되는 요소이며 각 태그는 특정한 역할을 합니다. CSS나 javascript를 통해 스타일링과 동적 동작을 추가할 수 있습니다. 태그 시작할때는 opening tag (여는 태그)와 종료할때는 closing tag (닫는 태그)가 있습니다.여는 태그 + 콘텐츠 + 닫는 태그 모두 같이 사용할 경우 element (HTML 요소)라고 말합니다.
Void Element (빈 요소 / 자체 종료 대그)
이러한 요소는 닫는 대그가 없고, 태그 하나로 사용됩니다.
에를 들어 <br>, <hr />, <img> 등이 있습니다.
HTML 속성 (attribute)과 값 (value):
속성은 HTML 요소에 추가 정보를 제공하기 위해 사용되고 항상 여는 태그내에 작성됩니다. 속성은 항상 이름과 값은 등호 "="로 연결되며 값은 항상 큰따옴표(" ")로 감싸야 합니다.
기본 HTML 보일러플레이트는 다음과 같습니다:
상단 보일러플레이트에 대한 간단한 설명:
- <!Doctype html>:
- <HTML>: HTML 시작을 알리는 태그이며 모든 HTML 요소를 포함합니다
- <head>: 문서의 메타데이터를 포함한 부분입니다
- <meta lang>: 문서의 언어를 설정해줍니다. 현재 en은 영어로 설정되어 있습니다. (한국어는 ko 입니다)
- <meta charset="UTF-8": 문서의 문자 인코딩을 UTF-8로 성정해줍니다 (응답성, 호환성등).
- <title>: 웹페이지의 제목을 브라우저에 설정해줍니다 (하단 사진 참고)
브라우저 열면 상단에 보이는 부분입니다.
- <body>: 웹 페이지의 본문 콘텐츠가 들어가는 부분입니다.
'웹 개발 (Frontend Developer) > HTML' 카테고리의 다른 글
| 기본적인 HTML 태그에 대해 (0) | 2024.08.01 |
|---|---|
| 시맨틱 (Semantic) HTML에 대해 (0) | 2024.07.30 |
