콘텐츠
HTML 이란?
워드프레스(Wordprss)를 하다보니 오랜만에 HTML을 다룰 일이 많아서 좋습니다. 직업이 개발자 지만 운영업무가 주고 SAP ERP 를 운영해서 웹을 만질일이 없습니다.
그래서 오늘은 HTML 기본을 정리하는 시간을 가져보고자 합니다.
HTML이란 HyperText Markup Language의 약자 입니다. 웹을 처음 시작 하는 사람이라면 알아야 하는 기초중의 기초라 할 수 있죠.
역사적인 내용을 기술 하자면 CERN(유럽 입자 물리 연구서) 에서 물리학자인 티머시 J. 버너리스가 제안 했다 하며 요즘 IT인들이 HTML을 말하면 최신 버전인 HTML5를 이야기 합니다.
과거엔 XHTML, HTML4.01등의 여러 버전이 존재 했으나 2014년 HTML5 가 표준화 되고 그 이후의 5.1 5.2 등의 버전 보단 통합하여 HTML5 라 부르고 있습니다.
HTML의 역할은 웹 브라우저(예: Internet Explorer, Google Chrome 등) 에서 저희가 접속한 웹 사이트, 웹페이지의 의 화면 구성을 정의하는 언어 입니다.
지금 저희가 보는 모든 웹 사이트는 HTML로 이루어져 표현되고 있습니다. 그리고 풀 네임에서 볼 수 있는 것 처럼 Markup Language의 형태를 띄고 있죠.
Markup Language는 쉽게 말해 문서가 <tag></tag> 형태로 이루어진 언어 입니다. 우리가 IT를 하지 않더라도 쉽게 접할 수 있는 xml 파일 등이 이 형태를 띄고 있습니다.
HTML도 모든 콘텐츠가 이 태그와 여러 속성 값들로 작성 됩니다. 예를 들어 웹페이지의 한줄의 글을 넣고 싶다면 ’<p>한줄의 글을 작성해 보았습니다.</p>‘ 라는 형태로 작성 됩니다.
HTML의 관련 기술으론 Javascript, CSS 등이 있습니다. 요즘 웹사이트가 단순히 제목, 글, 이미지 등의 형태만 구현되지 않고 버튼을 눌렀을 때 액션이 이루어 지고 여러 애니메이션 효과, 그리고 같은 글을 보더라도 화려한 강조 표시 등을 구현해야 합니다.
그럴때 HTML 요소의 동적인 이벤트 작용을 구현하게 해주는 Javascript와 HTML의 형태를 정의 할 수 있는 CSS 중 하나라도 빠진 웹사이트는 이제 없다 보시면 됩니다. 이 둘에 대해선 다른 포스팅에서 자세하게 다루겠습니다.
HTML을 작성하기 위한 준비
HTML은 위에서 언급한 것과 같이 브라우저에 접속한 웹의 형태를 표현해줍니다.
그래서 웹페이지를 열 수 있는 클라이언트(컴퓨터, 스마트폰, 노트북 등)을 가지고 있고 기본브라우저가 있다면 HTML을 만들고 실행해 볼 수 있습니다.
현재 PC가 윈도우 기반이라면 훨씬 간단해 집니다. 바탕화면에 텍스트 문서를 만들어 보세요. 그 후 다음과 같은 코드를 입력해 봅니다.
<p> Hello world! </p>간단하죠? 작성 후 저장합니다. 그리고 파일의 확장자를 .txt 에서 .html 로 변경해 봅니다.
그리고 실행해 보시면 기본 브라우저가 열리며 다음과 같이 표시될 겁니다.
HTML은 문법오류에 대해 유한 편이라 제대로 입력되지 않는다 해서 실행이 안된다거나 하지 않습니다.
정상적인 부분은 표기하고 오류가 난 부분 부터 표기되지 않는 느낌이죠.
예를 들어 태그를 닫지 않는다거나 말입니다.
이 이야기를 하는 이유는 기본적으로 HTML을 정상적으로 작성 했을 땐 처렇게 태그를 한줄만 작성하는게 아니라 다음과 같은 형태를 가지게 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>문서제목</title>
</head>
<body>
<h1>hello, World!</h1>
</body>
</html>가볍게 분석해보겠습니다.
HTML 기초 태그
<! DOCTYPE html>
DTD(Document Type Definition) 이라 하여 해당 문서가 뭔지 정의해 줍니다.
사실 많은 개발자 분들이 많이 생략하기도 하고 프로그램이 자체적으로 읽어 내기도 하지만 가끔 정의되어 있지 않으면 에디터에서 평소에 보지도 못한 태그가 출력되기도 합니다.
그리고 브라우저가 구 버전 HTML으로 불러올수도 있구요. 해당 코드는 HTML5에 사용 됩니다.
<html>
한 문서의 HTML 범위 입니다.
페이지 하나당 하나의 태그가 존재한다 보면 되며 모든 HTML 태그는 이 태그 안에 작성 하면 됩니다.
<head>
문서의 속성을 정의하는 곳 입니다. 메타 태그(데이터를 정의 하기 위한 내용)이나 타이틀(문서의 제목) 등을 입력 합니다.
상단에선 title 태그가 안에 입력되어 있는데 이 태그 안의 내용이 웹 브라우저에서 페이지의 이름으로 출력 됩니다.
<body>
문서의 본문 내용이 정의 됩니다. 제가 보기엔 html 하면 생각나는 모든 태그는 이 안에서 작성 된다 생각합니다. 위에 잠깐 사용해본 p 태그, 그리고 예시에 있는 h1 태그 등을 입력 합니다.
h1태그는 본문 내용 중 제목을 입력하는 태그들로 h1 ~ h6 까지 존재하고 해당 포스팅의 소제목들은 h2 부터 이어져 있습니다.
마무리
HTML은 웹을 구성하기 때문에 가장 기초중의 기초, 기본중의 기본 이기 때문에 웹 개발자가 되실꺼면 기본으로 알아야 합니다. 글 봐주셔서 감사하며 다음 글 부턴 여러 태그에 대해 분석해 볼까 합니다.
