티스토리 뷰
목차
오늘은 웹사이트의 뼈대라고 할 수 있는 HTML에 대해서 알아보겠습니다.
1. HTML이란?
HTML은 Hyper Text Markup Language로 웹사이트를 보여주는 가장 기본적인 구성요소입니다. 흔히 HTML을 프로그래밍 언어라고 오해하기도 하지만, 단어에서 알 수 있듯이 HMTL은 마크업 언어입니다.
여기서 마크업 언어란 태그 등을 사용하여 문서를 구성하는 언어입니다.
HTML은 웹사이트의 보이는 부분을 만드는 것뿐만 아니라, 웹사이트의 타이틀을 정하거나 다른 파일을 가져올 수 있게 하는 등의 작업을 할 수 있습니다. 이러한 작업을 하려면 태그를 사용해야 합니다.
태그는 괄호 사이에 사용 용도에 맞는 단어를 넣어 사용됩니다.
2. HTML의 역사
최초의 HTML은 1991년 팀 버너스리가 SGML을 참고하여 월드 와이드 웹 버전으로 처음 만들어졌습니다.
하지만 표준으로 지정된 것은 1995년입니다. 사람들의 컴퓨터 보급과 인터넷이 특정 사람들뿐만 아니라 일반 사람들도 많이 사용하면서 HTML에 대한 정보가 알려지게 되었습니다. 하지만 많은 사람들이 사용함으로써 다양한 문제들도 생겨났고, 이러한 문제들을 해결하고자 W3C 권고안를 발표하여 1997년 HTML3.2를 표준화시키기 시작했습니다.
그렇게 점진적인 발전을 거쳐 현재는 2014년에 업데이트된 HTML5를 사용하여 웹사이트를 제작하고 있습니다.
3. HTML 기본 구성
앞서 말했듯이 HTML은 괄호 형식에 태그로 이루어져 있습니다. 이 태그들은 태그의 시작과 태그의 종료로 이루어지며, 특정 태그들은 하나로 되어 있기도 합니다. 이렇게 태그의 시작과 태그의 종류로 이루어져 있거나 태그의 시작과 종료가 하나로 되어 있는 태그들을 하나의 요소(element)라고 합니다.
HTML은 기본적으로 제일 상단에 을 반드시 선언해야 합니다. 이는 지금 작성하는 HTML 문서의 형식을 웹 브라우저에 알려서 요소들의 지원 여부나 속성들을 처리하는 기준을 통해 웹사이트가 브라우저에 잘 표시되도록 해줍니다. 을 선언한 후 이제 본격적으로 태그를 만들어 웹사이트를 구성할 준비를 합니다.
태그 내에는 크게 와 구성되어 있고, 요소 안에 들어가는 태그들은 웹사이트가 어떤 사이트인지 다른 확장자의 파일들을 가져올 수 있습니다. 대표적으로, 태그는 HTML의 설명과 키워드, 문서의 작성자 등을 보여줍니다. 이 태그는 태그 내에 부가적인 설정값을 선언하여 다양한 부분을 설명할 수 있습니다. 이러한 부가적인 설정값은 다른 태그에서도 사용할 수 있는데, 이를 속성(attribute)이라고 합니다. 태그의 속성 중 꼭 필요한 속성은 lang 속성과 charset속성입니다. lang은 HTML에서 사용할 언어를 설정하고, charset은 HTML의 문자 인코딩 방식을 설정하는 것입니다. 그리고 <meta>태그에서 알아두어야 할 속성 중에는 name과 content 속성도 있습니다. name과 content 속성으로는 해상도에 맞게 HTML을 조절해줄 수 있습니다. 이는 PC 화면뿐만 아니라 모바일 화면에 맞게도 조절할 수 있습니다.
또 태그는 웹사이트의 제목을 지정하고, 태그는 다른 포스팅을 통해 알아볼 예정인 HTML을 꾸며줄 수 있는 CSS 파일을 HTML에 연결하기 위해 사용됩니다. 태그를 통해 CSS 파일을 가져올 수도 있지만, HTML 문서 안에서 스타일을 꾸며줄 수 있는 태그도 있습니다. 태그는 사이에 CSS 문법에 맞춰 작성하면 됩니다. CSS 문법에 대해서는 다른 포스팅에서 다루어보겠습니다. 태그나 태그를 통해 HTML을 꾸밀 수 있다면 태그를 사용하여 웹사이트에 동적인 작업을 할 수 있습니다. JavaScript를 사용하면 웹사이트에 동적인 작업을 할 수 있는데, 태그를 통해 JavaScript 파일인 JS 파일을 불러올 수도 있고 태그 사이에 코드를 작성할 수도 있습니다. 이 태그는 <head> 태그에 넣냐 <body> 태그에 넣냐에 따라 작업 순서 달라질 수 있습니다.
태그 내에는 웹사이트에 보일 부분들을 작성할 수 있습니다. 제목을 넣고 싶다면 태그를, 글을 보여주고 싶다면 태그를 사용하는 등 웹사이트에 보여주고 싶은 레이아웃을 작성할 수 있습니다. 태그 내에 웹 브라우저가 더 알고 쉽고 검색엔진최적화를 위해 시맨틱 태그를 사용하여 구조를 만드는 것이 중요합니다.
4. 마크업 언어
HTML은 마크업 언어라고 위에서 설명을 했습니다. 마크업 언어는 어떤 사람이 어떠한 상황에서든 보았을 때 달라지지 않는 문서의 내용이나 데이터의 구조를 분명하게 드러내 보이는 언어 중 하나입니다.
HTML에 마크업 언어를 사용할 때는 기본 문법 규칙이 있습니다.
1. 요소는 태그의 시작과 태그의 종료가 있어야 합니다.
HTML 기본 구성 부분에서 언급했듯이 요소는 태그의 시작과 태그의 종료가 있습니다. 또한 태그의 시작과 종료가 하나인 빈 요소(empty element)도 있습니다. 사용 빈도가 높은 빈 요소 중에는 <br> 줄바꿈 태그와 <img> 이미지를 보여주는 태그, <input> 입력을 받는 태그, <meta>태그, <link> 태그 등이 있습니다. <br> 태그를 제외한 태그들은 꼭 필요한 속성들이 있습니다.
2. 요소는 같은 태그 이름으로 이루어져야 합니다.
태그의 시작은 <meta>로 시작하고 태그의 종료는 </link>를 사용하면 안된다는 것입니다.
3. 브라우저에는 보여지지 않았으면 하는 코드는 주석처리를 해야 합니다.
<!--- 와 ---> 사이에 화면에는 보이지 않고 코드를 보고 작업해야 할 사람만 볼 수 있는 내용들을 작성합니다.
이렇게 HTML이 무엇인지와 역사를 알아보았고, HTML이 어떻게 구성되는지 아주 기본적인 부분을 알아보았습니다.