HTML이란?
웹이 보여지는 기본 원리
우리는 브라우저를 통해 웹 사이트에 접속하고, 개발자가 미리 코드로 작성해 놓은 웹 페이지의 묶음을 쉽게 시각화하여 보고 이용한다.
우리가 눈으로 보는 웹 페이지는 가장 먼저 HTML이라는 코드로 작성되어 있다.
<b>굵은 글씨</b>꺽쇠 괄호 안에 미리 지정된 코드를 넣고, 슬래시로 끝나는 지점을 닫으면서 서식을 지정하는 것이다.
그런데 저런 형태는 단순히 텍스트를 보여주기만 하는 형태이다. 위의 예제인 <b> 볼드 태그도 최신 마크업에서 등장한 것이고, 원시 웹에서는 정말 기본적인 텍스트만 렌더링 해주는 모습이었다.
메모장을 생각해보면 우리가 메모장에 텍스트를 쭉 나열하는 것이 바로 원시 웹의 마크업 언어이다. 그리고 우리가 이것을 텍스트 편집기나 word 같은 프로그램으로 글자 크기도 바꾸고, 이미지도 넣고, 가운데 정렬도 하면서 일종의 서식을 주어 좀 더 화면에서 보기 좋게 꾸미는 것은 CSS(Cascading Style Sheet)가 그 역할을 대신해주고 있는 것이다. 이것은 CSS 파트에서 다시 다루어 보겠다.
CSS가 HTML의 속성으로 부여되면 아래와 같은 형태가 된다.
<span style="text-align:center;color:red">이 글자는 화면의 중앙에 보이게 됩니다.</span>
<!-- 인라인 스타일링을 한 모습 -->여기서 text-align은 프로퍼티라고 부르고, center는 그 프로퍼티의 값이라고 부른다. 한 태그 또는 클래스에 프로퍼티와 값은 여러개를 중첩해서 사용할 수 있고, 띄어쓰는 등 공백으로 구분하지 않아도 된다.
프로퍼티와 값은 콜론(:)으로 구분하고, 이것이 중첩해서 적용될 때는 세미콜론(;)으로 구분한다. 이는 CSS를 다루는 포스팅에서 더 자세히 다룰 것이다.
.span {
text-align: center;
}css는 위와 같이 별도의 파일 또는 인라인 형식으로 그 스타일을 지정할 수 있다.
HTML이란?
HTML은 HyperText Markup Language의 약자로 직역하자면 웹 페이지와 웹 애플리케이션의 구조를 정의하는 마크업 언어임을 의미한다. 위에서 언급했듯 우리가 눈으로 보는 텍스트, 이미지, 영상 등의 서식을 정의하고 브라우저에서 사용자가 복잡한 코드를 보는 것이 아니라 시각화된 자료를 볼 수 있도록 도와주는 언어이고, 웹 개발의 핵심 기술이자 가장 기본이 되는 기술 중 하나이다.
HTML의 기본 구조
Tag
위에서 <b></b>로 묶은 이것은 태그라고 부르는 마크업이다.
태그의 기본 구성은 아래와 같다.
<img src="/map/seoul.png" style="border-radius:20px;">위 태그를 보면 닫는 태그가 없다. 이렇게 닫는 태그가 없거나 있어야 하는데 딱히 없어도 화면을 그려내는 데는 문제가 없는 요소들이 다수 존재한다. 이것이 HTML이라는 마크업 언어가 다른 엄격한 프로그래밍 언어와 비교되는 점 중 하나이다.
위 예제에서는 <html> 자체를 태그(tag)라고 부르고, src와 style을 속성(attribute)라고 부른다.
태그아 속성 사이는 공백으로 구분하는 것이 규칙이고, 하나의 태그에는 여러가지 속성을 넣을 수 있다.
태그에 붙는 속성은 태그를 좀 더 자세하게 설명하거나 더 세부적인 기능을 할 수 있도록 돕는 것이라고 생각하면 된다.
웹 페이지를 구성하는 HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>우리가 말을 할 때도 기본적인 문법, 즉 구조가 있듯이 우리가 보는 웹 페이지도 HTML이 이루고 있는 기본 뼈대가 있다. 위와 같은 형태이다.
<!DOCTYPE html>은 이 문서가 html을 이용하고 있음을 명시적으로 나타내는 태그이다. 다른 기능을 하진 않고, html의 태그가 여는 태그와 닫는 태그가 쌍을 이루고 있는 특징이 있는 반면 이는 문서의 시작에 명시적으로만 사용되기 때문에 닫는 태그가 없다는 것이 특징이다.
<html></html>은 이 문서를 여기서부터 여기까지 html로 작성하고 있음을 나타내는 태그이다. 모든 태그는 이 안에 작성이 된다.
<head></head> <body></body>은 심화해서 시멘틱 태그라고 부르는데, 위 구조에서는 html 문서 내부에 들어가는 모든 태그를 나타낸다고 생각하면 된다. 간단히만 언급하자면 <head> 태그는 문서의 핵심 정보를 담고 있는 타이틀의 성격을 한다고 보면 되고, <body> 태그는 문서의 컨텐츠에 해당하는 영역이라고 보면 된다. 즉 문서의 실제 내용은 <body> 내에 모두 위치하게 된다.
HTML의 한계
HTML은 화면을 그려내는 마크업 언어로 심플하고 강력하지만, 반면에 사용자가 화면의 요소(버튼, 입력창)을 클릭하거나 무언 가를 입력하는 것에 동적으로 대응하는 것에는 한계가 뚜렷하다. 따라서 이를 보완하기 위해 JavaScript라는 프로그래밍 언어가 등장했고, 지금까지도 웹 개발에 있어서 JavsScript와 HTML은 뗄래야 뗄 수 없는 사이로 존재하고 있다.
HTML의 발전
HTML은 1991년 처음 HTML1.0 버전으로 공개되었다. 처음에는 HTML이라는 단독 이름으로 사용되었지만, 이후 계속 2.0, 3.0 등 버전이 계속 업그레이드 되면서 최초 버전에도 1.0이라는 버전이 붙게 된 형태이다.
이후 HTML은 사용자를 빠르게 끌어 모아 사상 1995년에 최초로 웹 표준으로 선정되었다. 첫 버전에서 꽤 오랜 시간이 흘렀는데, 이 시기에는 IE와 같은 웹 브라우저들이 사용자들을 골고루 양분하고 있던 시대라, 우리는 지금 크게 신경쓰지 않아도 어느정도는 맞춰지는 크로스 브라우징에도 꽤 많은 시간을 할애했어야 했다.
그리고 계속 발전을 거듭해 오다 2014년 발표된 HTML 5를 현재까지도 웹 표준 마크업 언어로 사용하고 있는 것이다.
'Programing > HTML' 카테고리의 다른 글
| HTML5 기본 템플릿 코드 <head> (0) | 2025.02.06 |
|---|---|
| 모던 HTML의 이해 (0) | 2025.01.20 |
| 버튼에 새로고침 기능 넣기 (0) | 2024.02.29 |
| 여러 개의 div 한 열로 정렬하기 (1) | 2024.02.28 |
| Form (0) | 2024.02.25 |
댓글