html은 화면에 어떻게 하면 컨튼츠를 표시할 수 있을까하고 생각해서 만들어진 마크업언어이다.
html은 프로그래밍 언어가 아니기 때문에 사실 프로그래밍 언어탭에 있어선 안되지만
따로 마크업언어탭이라고 분류하기도 그래서 그냥 프로그래밍 언어탭에서 포스팅하려고한다.
html은 주요버전은 html4,html5가 있으며 과거에 html4로 사용했으나 앞으로는 html5가 뜨고있고
비표준이 난립하던 html4와는 달리 html5는 표준화 되어서 점점 보기도 용의해지고 사용하기도 편리해 지고 있다.
따라서 여기서는 html4를 최대한 언급하지 않으려한다. 가끔 언급하는 정도만 볼 수 있겠다.
이번에는 html파일을 만드는 방법과 그걸 웹브라우저에서 확인하는 방법, 또한 기본구조에 대해서 알아보도록 하겠다.
html파일 만들기
사실 html파일을 만들기 되게 쉬운데 그냥 아무 텍스트에디터(메모장같은)를 키고 정해진 형식대로 적기만 하면 되겠다.
그리고 그 파일의 경로를 웹브라우저(인터넷익스플로러나 크롬등의)에서 열어주면 된다.
즉 여는 방법을 설명해줄 필요는 솔직히 말하면 없다. 그래도 한가지 중요한건 있다.
여기 프론트와 백에대한 설명을한 포스팅이 있는데 웹브라우저는 인터프리터라고 생각하는게 중요하다.
물론 이걸 모르고 사용해도 문제는 없는데 결국 웹브라우저는 여러분이 마크업한(여러분이 작성한)파일을 화면에 보여주는 프로그램인 것이다.
그러나 실제로 메모장에서 코딩하는일은 크게 없을 것이다. 물론 뭐, 가볍게 쓴다면 가능은 하겠지만
앞으로 해보면 알겠지만 html코드들은 태그기반으로 사용하므로 굉장히 길다.
아무기능 없는 단순 메모장은 사용하기 힘들며 IDE나 자동완성이 되는 텍스트에디터를 사용해야한다.
수많은 대응 프로그램들이 존재한다. 사실 뭘 써도 상관없긴하다.
텍스트 에디터로는 뭐 플러그인을 사용한 vim,emacs등의 선택지도 있고 그 유명한 sublimetext를 사용하는 방법도 있을 것이다.
IDE를 쓴다면 ASP로 바로연동가능한 비주얼스튜디오, 그리고 괴물 IDE인 eclipse역시 선택지가 될 수 있다.
그러나 이 강의에서는 webstorm을 사용할 생각이다.
webstorm을 쓰는 이유는 굉장히 유용한 IDE기도 하면서 나중에 javascript를 사용하는데 유용하기 때문이다.
물론 다른툴이 안 유용한건 아니지만 javascript를 사용할때 webstorm이 독보적인 감은 있다. 따라서 webstorm을 사용하겠다.
다만 webstorm은 상용 프로그램이므로 돈을 지불해야하는데 이걸보는 사람은 아마 지불할 용의가 별로 없을 것이다.
webstorm은 학생은 공짜다. webstorm을 공짜로 사용하는 방법은 이 포스트를 참조하자.
이 포스트에서는 InteliiJ를 받는데 인증은 똑같이 받고 webstorm을 설치해서 이메일 인증을 받으면 된다.
만약 설치가 끝났다면 프로젝트를 하나 만들어주면된다.
프로젝트가 만들어진 뒤에는 프로젝트의 파일을 우클릭하여 New->HTML file을 눌러주면 위와같이 창이 뜬다.
그 다음 이름과 종류를 선택해준다. 이름은 마음대로 지어도 되지만 종류는 우리는 html5를 할 것이므로 html5를 선택해준다.
그러면 위 처럼 자동으로 코드가 완성된다. 필자는 저기서 단 한줄도 치지 않았다.
만약 여러분이 메모장을 이용한다면 저 코드를 몽땅 다 쳐야한다. 그러나 IDE나 텍스트에디터를 쓴다면 이렇게 자동 완성을 해줄 것이다.
이제 여러분은 가장 간단한 html파일을 작성해 보았다. 그러면 가장 기본적인 html 구조에 대해서 알아보자.
html 기본 구조
html의 디폴트 생성이 위와 같다고 하였다.
디폴트로 저렇게 생성되었다는 말은 거꾸로 말하자면 저건 모든 html문서에 꼭필요하다는 이야기가 된다.
즉 저것들만 이해해도 html의 기본 구성요소는 알고있다고 말할 수 있는 것이다.
하나하나에 대해서 알아가면서 넘어가자.
여기서 <와 >로 이루어진 것을 태그라고 부른다. 태그는 일반적으로 여는 태그가 있으면 닫는 태그</>가 있어야한다.
보통의 경우 다르게 해석할 여지가 없다면, 닫는 태그가 누락되도 렌더링 되는 경우가 있다.
이는 의도된게 아니면 반드시, 반드시 다는 태그를 적어주어야한다.
그러나 일부의 경우 닫는 태그가 필요없는 태그가 있다. 위의경우 DOCTYPE태그와 meta태그의 경우 닫는태그가 존재하지 않아도 된다.
정리하자면 <>로 열었다면 </>로 닫아야한다. 만약 내용이 짧아서 그렇게 길게 할 필요가 없다면 <내용/> 같은 형식으로 한줄에 사용할 수 있다.
이는 앞으로 배워가면서 알아나가자.
!DOCTYPE - 이 페이지의 규격에 대하여 기술
한 때 이게 별로 중요하지 않던 시절이 있었다. 그리고 또 앞으로 미래에 별로 중요하지 않게 될 수 있다.
이 태그는 현재 페이지가 무슨 페이지인지 알려주는 것이다. 이 태그가 누락될경우 웹브라우저가 설정해놓은 디폴트 규격에 맞춘다.
위에는 <!DOCTYPE html>이라 적혀있으며 이는 현재 페이지는 html5규격으로 작성되어있음을 알린다.
그러면 html4는 어떻게 되어있을까?? 한번 확인해보자.
html4를 사용할 경우 위와 같이 적힌다. 즉 웹브라우저는 위의 DOCTYPE태그를 보고 현재페이지가 html4인지 html5인지 확인하는 것이다.
또한 사용자역시 특정페이지의 소스를 보고 html5인지 html4인지 확인할 수 있는 것이다.
지금은 html4에서 html5로 넘어가는 과도기이므로 둘 다 잘 알아둘 필요가있다.
참고로 정말 가뭄에 콩나듯이 html3소스인 경우가 있다. 아마 거의 볼일은 없을거지만 html3의 doctype은 아래와 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
html - 아래의 문서가 html문서임을 알리는 태그
이 태그 이하로 html문서가 시작됨을 알린다.
이제부터 문서의 끝은 </html>이 될 것이다.
이 태그의 속성인 lang은 현재 페이지가 어느나라 문서인지 브라우저에게 알려주는 것이다.
만약 lang속성이 en이라면 영어페이지라는 것을 의미하고 lang속성이 kr이라면 한글페이지라는것을 의미한다.
근데 착각하지 말아야할것은 이게 이 페이지의 인코딩 셋을 의미하는건 아니라는 것이다.
이 속성을 en으로 적어도 문제없이 한글을 쓸수 있고 kr로 적는다고 해서 일본어를 못쓰지 않는다. 그건 하등 상관관계가 없다.
단지 이속성을 이용해서 외부에서는 이 페이지가 어느나라 사람을 타겟으로 했는지 인식할 뿐이다.
예를들어 이 속성이 kr이라면 한국사람을 타겟으로 했다는 것을 알 수 있는 것이다.
head - html문서중 화면은 렌더링 하기전에 하는 작업이 있는 태그
html의 화면은 head와 body로 나눠지며 body는 화면에 표시될 부분이고 head는 화면에 표시되기 전에 선행될 작업들이다.
만약에 body에 표시하기 전에 반드시 해야 할 일이 있다면 head에 기술하면 된다.
head는 크게 두가지 부분으로 나뉘게 되는데 meta와 title로 나눠진다.
meta - 이 화면이 다음과 같은 규격으로 이루어져 있음을 알리는 태그
meta 태그는 화면에 이루어져있는 데이터들이 어떠한 규격인지 알려준다.
예를들자면 위의 경우 charset이 utf-8이라고 알려준다. 즉 브라우저는 이 charset을 보고 아래에 표시될 문자들이 utf-8인지 인지하게 되는 것이다.
그 외에도 여러 속성들이 존재하며 html4와 html5가 굉장히 달라진 부분이기에 추후에 많은 차이점을 알릴 부분이다.
예를 들어 당장 charset속성이 html4에서는 없었고 content라는 속성의 하위속성이였으나 하도 많이 사용되서 따로 속성으로 격상되었다.
title - 이 웹페이지의 제목
간단히 말해서 페이지의 제목이다. 이는 탭에 제목으로 표시가 된다.
이 태그에는 다른 태그가 먹히지 않는다. b태그나 strong태그를 사용할 수 없다.
body - 화면에 표시될 본문이 적히는 태그
이 태그 내의 내용만 화면에 표시된다.
앞으로 body내에서는 수많은 태그가 사용될 것이며 차차 알아나가게 될 것이다.
즉 body = 우리가 보는 화면이라고 보아도 무방하다.
이제 기본 구조를 알았으니 간단하게 아무거나 하나 만들어 보자.
프로그래머들은 처음 접하면 Hello,world를 만드는 관습이 있으므로 우리도 Hello,html을 출력해보자.
위와 같이 작성하면된다. title에 작성한 내용은 제목이 될것이며 body에 작성한 내용은 화면에 표시가 될 것이다.
작성이 끝났으면 실행을 해보자. 웹브라우저를 열고 파일경로를 복사해서 넣을 수 있다.
웹스톰의 경우 화면 상단에 마우스를 대면 브라우저 선택창이 뜨므로 그걸 눌러주면된다.
화면이 정상 출력되는 것을 알 수 있다.
'Programming > HTML' 카테고리의 다른 글
| [html-04]수평선과 특수문자 (0) | 2017.10.10 |
|---|---|
| [html-03]텍스트 강조(b,strong,s,del,i,em,u,sup,sub태그) (0) | 2017.08.23 |
| [html-02]개행(줄바꿈) 만들기(br태그,p태그,pre태그) (0) | 2017.08.15 |