🔑HTML은 웹페이지를 기술하기 위한 마크업 언어입니다.
Content 내용 & Structure 구조
사람의 신체로 비유하자면 뼈대라고 할 수 있습니다
💡 그래서 뭐가 달라진거죠?
📃 HTML5는 2014년 10월 28일 차세대 웹 표준으로 아래와 같은 기능들이 추가됐습니다
1️⃣ 멀티미디어 기능의 혁신
HTML5에서는 별다른 플러그인이 필요없이 비디오와 오디로를 직접 지원하는 <video>와 <audio> 태그가 추가되었습니다.
2️⃣ 새로운 시맨틱 태그 도입
<header>, <footer>, <article>, <section>, <nav> 등의 태그가 도입되어, 페이지 구조를 더 직관적이고 이해하기 쉬운 방식으로 작성할 수 있습니다
3️⃣ 그래픽 및 에니메이션 기능
SVG와 <canvas> 요소가 추가되어, 플러그인 없이 2D 그래픽 및 애니메이션을 그릴 수 있습니다. WebGL을 이용한 3D 그래픽 렌더링도 가능해졌습니다.
4️⃣ 오프라인 저장소 지원
LocalStorage와 SesstionStorage와 같이 웹 페이지가 Client 측에 데이터를 저장 가능하게 해준다
5️⃣ 디바이스 접근
사용자의 디바이스에 있는 하드웨어 기능에 접근할 수 있도록 API를 제공합니다
6️⃣ 폼 기능 강화
<input type="email">, <input type="tel">, <input type="date">와 같은 새로운 입력 유형들이 추가되어, 사용자에게 적합한 형식으로 입력을 유도하고, 입력 오류를 줄여줍니다
💡 HTML5 의 구조
📃 HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정합니다
실제적인 HTML document는 2행부터 시작되고 <html> </html> 사이에 기술합니다
<head> </head> 사이에는 문서의 제목, 외부 파일의 참조, 메타데이터의 설정 등이 위치합니다
웹브라우저에 출력되는 모든 요소는 <body>와 </body>사이에 위치합니다
💻 CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>💡 HTML5의 기본 문법
📃 HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 Content로 구성됩니다
1️⃣ 요소 element
🔝HTMLdocument는 이러한 요소들의 집합으로 이루어집니다
br, hr, img, imput, link, meta와 같이 종료태그가 필요없는 빈 요소도 존재합니다
2️⃣ 속성 attribute
🔝각각의 요소들은 속성을 포함하고 있습니다. 예를들어 위에 img태그는 src라는 이미지의 경로를 나타내는 속성과 width, height 속성을 통해 이미지의 크기를 조정할 수 있습니다
3️⃣ 주석 comments
<!--주석은 화면에 표시되지 않습니다.-->🔝 주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않습니다. 로직이 좀 복잡한 코드를 작성할때, 주석처리를 통해서 진행을 하는 것을 많이 추천드립니다. 코드를 가독성있게 잘 작성하는 개발자들이 코딩하는 것을 보면 주석을 적절히 활용하면 코드를 작성하는 것을 볼 수 있습니다.
<!--웹페이지의 header 구현하기.-->
...
<!--웹페이지의 body 구현하기.-->
...
<!--웹페이지의 footer 구현하기.-->
...📝 SUMMARY
📍 이외에도 HTML5에는 정말 다양한 태그와 문법들이 존재합니다. 하지만 제 개인적인 의견으로는, 간단한 로직이라도 직접 머릿속으로 구상한 것을 구현하면서 실습하다 보면 자연스럽게 익힐 수 있다고 생각합니다. 저는 경험을 통해 스스로 학습하는 과정이 가장 효과적이였습니다
🔍 참조
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com