INTRO
HTML은 FE 개발자라면 많이 접해봤기 때문에 엄청 새로운 내용은 없었다.
(이미 HTML 관련해서 잘되어있는 포스팅이 너무 많다!)
그래서 해당 포스트에서는 HTML의 개념, 등장 배경, 그리고 일부 기능에 대해서 간단하게 정리하고자 한다.
1. HTML 개념
HTML은 데이터를 구조화하는 데 사용하는 마크업 언어이다.
"마크업"이란 데이터에 의미를 부여하는 기호 체계로, 우리가 흔히 볼 수 있는 HTML 파일은 의미를 가진 태그들이 트리 형태로 구성된 파일이라고 볼 수 있다.
HTML과 동일한 Markup 체계를 가진 언어로는 XML이 있다.
XML은 유연한 Markup Language라는 의미를 가진다.
그렇다면 HTML, XML과 같은 Markup Language는 왜 등장하게 되었을까?
💡 HTML의 등장 배경
HTML의 등장 배경
- 이기종 (서로 다른 기종) 사이에서 데이터를 공유하기 위함
즉, 두 언어의 근본적인 목적은 다양한 플랫폼 간 데이터 교환과 해석을 가능하게 하여, 데이터를 효율적으로 공유하고 처리할 수 있게 하는 것이라고 볼 수 있다.
💡 플러그인과 표준화
초기의 웹 브라우저는 하드웨어나 외부 서버와 직접 상호작용하지 못했다.
이를 해결하기 위해 플러그인 기술이 등장했고, 대표적으로 ActiveX가 있다.
주로, ActiveX는 애니메이션이나 동적 콘텐츠를 제공하는 데 사용되었다.
하지만 ActiveX는 심각한 보안 문제를 일으켰고, 브라우저마다 다른 기능을 사용하면서 호환성 문제가 생겼다.
이런 문제를 해결하기 위해 웹 표준화 작업이 진행되었고, HTML5가 그 결과물로 등장하게 되었다.
즉, 표준화 덕분에 브라우저 간 호환성이 개선되고, 플러그인 없이도 다양한 기능을 구현할 수 있게 된 것이다.
💡 HTML5의 특징
그렇다면 HTML5의 특징으로는 어떤게 있을까?
시맨틱 태그
- 시맨틱 태그는 콘텐츠의 의미를 명확히 표현해준다.
- 이를 통해 사람뿐 아니라 기계도 데이터를 더 쉽게 이해할 수 있다.
개발 편의성
- HTML5는
<input>태그의 다양한 속성을 추가하여, 입력 형식을 제한하고 검증 과정을 단순화시켰다.
내장 기능 강화
- 플러그인을 통해 제공되던 기능들이 HTML5에 내장되면서 보안성과 접근성이 크게 향상되었다.
💡 문서 구조와 태그
HTML은 태그를 이용해 웹 페이지를 구성한다.
태그는 일반적으로 시작과 종료 태그로 나뉘지만, 일부 태그는 종료 태그가 없는 자기 종료형이다.
예시는 다음과 같다.
<hr>
<br>
<input type="text" name="username">
<img src="image.png">위처럼 Element는 태그와 속성으로 구성되며, 태그의 역할을 확장하거나 동작을 지정하기 위해 속성을 사용한다.
마찬가지로 속성 예시는 다음과 같다.
<img src="image.png" width="100" height="100" alt="설명 텍스트">속성(Attribute)
- src : 이미지 소스를 지정한다.
- width, height : 이미지 크기를 지정한다.
- alt : 이미지가 표시되지 않을 때 대체 텍스트를 제공한다.
- etc...
각 태그마다 허용하는 Attribute들이 다르기 때문에 위에서 언급한 Attribute를 제외하고도 많은 속성들이 있다는 것을 유의하자.
💡 <form> 태그
우리가 HTML에서 특히 주의깊게 봐야하는 것은 바로 <form> 태그이다.
<form> 태그는 사용자 입력을 받아 서버로 전달하는 역할을 수행하는 태그이다.
이러한 목적으로 <form> 태그는 주로 다음과 같은 태그들과 주로 사용된다.
<input>: 사용자 입력을 받는 대표적인 태그
- 다양한 type 속성으로 여러 형태의 입력 가능
- text, password, checkbox, radio 등
<textarea>: 여러 줄의 텍스트 입력이 필요할 때 사용
- 크기 조절이 가능한 텍스트 입력 영역 제공
- 긴 텍스트, 댓글, 리뷰 등에 활용
<button>: 클릭 가능한 버튼 요소
- submit, reset, button 등의 type 지정 가능
- 폼 제출이나 특정 동작 실행에 사용
위에서 제시된 태그들의 특징은 사용자와의 상호작용이 진행된다는 것이다.
사용 예시는 아래와 같다.
<form action="/submit" method="POST">
<input type="text" name="username">
<textarea name="message"></textarea>
<button type="submit">전송</button>
</form>
<form>태그 속성
- action : 데이터를 처리할 서버의 URL을 지정한다.
- method : 데이터를 전송하는 방식(GET, POST 등)을 정의한다.
이처럼 <form> 태그는 <input>, <textarea>, <button> 같은 태그와 함께 사용되며, attribute를 통해 정의된 주소 & 정해진 방식으로 하위의 값들을 서버로 전달해주는 것이다.
OUTRO
HTML5는 단순히 웹 콘텐츠를 표현하는 것을 넘어 시맨틱 태그와 편의 기능을 추가하면서 웹 개발의 생산성을 높이고, 보안 문제를 해결했다.
이를 통해 웹의 핵심 철학인 "데이터 공유"를 더욱 효과적으로 구현할 수 있게 되었다는 것을 기억하자
