HTML로 웹페이지 개발에 입문하다.
HTML(Hyper Text Markup Language)은 웹에서 소통하기 위해 사용되는 언어입니다. 웹페이지에 대한 정보를 담거나 웹페이지에 출력할 내용을 담기도 하고 서버와 소통하기도 합니다. 인터넷에 있는 모든 웹페이지들은 다 HTML로 작성되었습니다. 이렇듯 HTML은 웹문서를 작성할 때 쓰이는 언어입니다. 우리가 웹페이지를 하나 방문할 때에는 서버에 그 페이지를 방문하겠다는 요청을 보내고 서버는 요청을 받은 후 그 페이지에 해당하는 HTML 파일을 사용자에게 보냅니다. 아까 HTML은 언어라고 했는데요. HTML은 언어이고 HTML언어로 쓰인 파일을 HTML 파일이라고 합니다. 확장자명은 .html 이죠.
→ HTML로 쓰여진 HTML 파일이 웹페이지가 된다.
그런데 실제로 웹페이지를 방문해보면 html 파일만 받는 경우는 거의 없습니다. 여러 이미지 파일들을 받아오기도 하고, css나 javascript 파일을 받아오기도 하죠. css나 javascript는 html 파일만으로 만들면 밋밋한 웹페이지를 조금 더 생동감 있게 만들어주기도 하고, 예쁘게 꾸며주기도 하고, 사용자와 상호작용할 수 있게 해 줍니다. 웹페이지를 만들기 위해서 HTML을 공부한다면 그다음 차례는 CSS와 Javascript인 것이죠.
멋있고 세련된 웹페이지를 만드려면 CSS와 Javascript도 사용해야 하지만 웹페이지로서 기능을 하는 것 그 본질 자체는 HTML입니다. 따라서 웹의 기초는 HTML부터 시작하고 가장 중요한 것도 HTML입니다.
→ 웹페이지 개발을 위한 공부의 시작은 HTML, 그다음 순서는 CSS, Javascript
웹페이지의 개발과 웹서버의 개발은 조금 다른 영역입니다. 웹서버 개발을 공부하기 위해서는 css, javascript가 아닌 다른 서버 언어를 공부해야 합니다. 이것을 현업에서는 프론트엔드 개발과 백엔드 개발로 나뉘어서 부릅니다. html, css, javascript를 이용한 웹페이지의 개발을 프론트엔드 개발, 백엔드 언어로 개발하는 웹서버 개발을 백엔드 개발이라고 부르죠. 지금부터 시작할 HTML로 웹페이지 만들기 포스팅 내용은 세부적으로 얘기하면 프론트엔드 개발에 속하게 되겠습니다.
HTML로 첫 웹페이지를 만들다.
HTML 실습환경으로는 brackets이라는 코드편집기를 추천합니다.
아직 brackets을 비롯한 코드편집기를 설치하는 것이 부담스럽다면 메모장을 켜서 사용하셔도 상관없습니다.
자 이제 파일을 하나 만듭니다. 파일명은 HelloWorld 확장자는 html로 저장합니다.
파일명은 마음대로 지으셔도 되지만 확장자는 반드시 html로 하셔야 html파일이 됩니다.
html 파일은 웹페이지로서 기능을 할 수 있는 파일입니다.
html 파일을 만들었으면 이제 내용물을 작성합니다.
Hello WorldHello World는 컴퓨터 언어를 처음 접할 때 관용적으로 작성하는 문구, 그냥 의미 없는 임의로 정한 텍스트입니다^^
다른 문구를 작성해보셔도 됩니다.
내용물을 작성했으면 저장을 합니다.
이제 html파일이 웹페이지로서 기능을 할 수 있는지 확인해봐야겠죠?
아직 웹서버를 구축하지 않았으니 로컬 환경에서 실행해봅니다.
당연히 웹브라우저로 실행을 해봐야겠지요? 저는 크롬으로 실행해보겠습니다.
웹페이지가 열리고 내용이 출력되는 것을 확인했습니다. 여러분도 잘 되셨나요?
축하합니다. 이렇게 웹페이지를 하나 만드신 겁니다.
HTML 문서의 올바른 구조 잡기
웹페이지를 만들고 여는 것까지 해봤습니다. 그런데 실제 인터넷에서 우리가 볼 수 있는 모든 웹페이지들은 다 동일한 규격을 따르고 있습니다. 이것을 웹 표준이라고 하는데요. HTML 문서를 인터넷에서 사용하기 위해 정해진 규격을 따르는 것을 약속이라고 생각하시면 됩니다.
모든 것에는 뼈대가 있고 그릇이 있죠. HTML파일의 코드 구조도 마찬가지입니다. HTML 코드를 작성할 때 그냥 두서없이 막 작성하는 것이 아니라, 어떤 작성 형식과 틀이 있습니다. 그에 맞게 코드를 작성해줘야 HTML 문서로서 올바르게 기능을 할 수 있습니다. 그렇다면 HTML 문서의 코드는 어떤 구조로 이루어졌는지 숲을 먼저 보도록 하겠습니다.
1. DOCTYPE html
DOCTYPE은 Document type declaration에서 Document type을 줄인 말입니다.
문서의 타입을 선언한다는 의미인데 html파일의 코드 맨 윗줄에는 관용적으로 <!doctype html>이라고 적습니다.
이것은 "이 문서의 타입이 html이다." 라고 선언하는 것입니다.
이렇게 선언하면 웹브라우저는 해당 html파일을 읽을 때, 코드가 html로 작성되었다는 것을 인지하고 올바르게 코드를 해석할 수 있게 됩니다.
(참고: html 버전 별로 선언방식이 다릅니다. 해당 방식은 가장 최신 버전인 html5의 선언방식입니다. 이 버전 외에는 사용할 일이 없으니 그냥 저 선언방식만 알고 계시면 됩니다.)
2. 태그(tag)의 의미
html의 모든 태그는 각각 담고있는 내용이 어떤 내용인지를 알려주는 지표의 역할을 합니다. 즉, 담고 있는 내용에 대한 정보를 나타내는 기능을 합니다. 담고 있는 내용에 대한 정보가 없다면 그 태그는 html태그로서의 의미가 없다고 볼 수 있습니다. 아주 옛날에 css라는 디자인을 담당하는 언어가 생기기 전에는 font태그나 b태그 같이 단순히 텍스트를 꾸며주는 기능을 하는 태그들이 있었는데 이런 태그들은 태그가 담고 있는 내용에 대한 정보를 나타내는 게 아니라 단순히 디자인을 담당하는 태그입니다. 반면에 h태그 같은 경우는 담고 있는 내용이 제목이라는 정보를 담고 있죠. css가 있는 지금은 이렇게 태그가 담고 있는 내용에 대한 정보를 나타내는 태그들만 사용되고, 디자인만을 위한 태그들은 필요성이 없어졌기 때문에 html에서 퇴출되었거나 혹은 남아있어도 잘 사용하지 않습니다. html와 css는 이렇게 각각 기능이 분화되었습니다.
3. 태그(tag)의 문법
html은 기본적으로 <>기호로된 태그로 작성하는 언어입니다. 그리고 이것은 다른 컴퓨터 언어에 비해 매우 간결하고 쉬운 문법입니다. html태그의 문법은 딱 두 가지만 기억하면 됩니다.
1) 스스로 닫지 않는 태그와 2) 스스로 닫는 태그
스스로 닫지 않는 태그는 태그로 열어주고 내용을 작성한 후 태그로 닫아줍니다. 열 때에는 <태그명> 을 적어주고 안에 내용을 작성한 후 닫을 때에는 태그명 앞에 /가 붙은 </태그명>을 적어줍니다.
예를 들어 p 태그는 스스로 닫지 않는 태그입니다. 기능은 '이 태그 안에 담긴 내용은 한 문단입니다.'라고 정보를 표시하는 것입니다. p 태그의 예시 코드를 작성해보면 다음과 같습니다.
<p>이것은 한 문단입니다.</p>
이렇게 적으면 html파일은 이것을 한 문단으로 인식합니다.
스스로 닫는 태그는 태그하나로 열고 닫습니다. 그리고 태그가 담을 내용은 위의 예시처럼 텍스트가 아니라 속성과 속성값으로 작성됩니다.
갑자기 나타난 속성(Attribute)은 무엇인가요?
html 태그가 담고 있는 내용에 대한 정보를 담고 있다고 했는데 그 태그가 가지고 있는 속성은 해당 태그의 기능을 풍부하게 만들어줍니다.
사용 문법은 다음과 같습니다.
<tag명 속성명1=속성값 속성명2=속성값 ... 속성명n=속성값></tag>각 태그마다 사용 가능한 속성들은 따로 정해져 있기 때문에, 태그에 알맞은 속성을 사용해줘야 합니다.
어떤 태그에 어떤 속성이 있는지 어떤 상황에 뭐가 필요한지 이런 것들을 처음부터 다 외울 수는 없습니다. 따라서 이런 것들은 필요할 때마다 레퍼런스를 찾아보거나 구글링을 하면서 익히면 됩니다. 사실 html은 사용하는 태그들이 거의 정해져 있기 때문에 몇 번 코딩하다 보면 금세 외워집니다. 그럼 태그마다 그들만의 속성이 있다는 사실을 인지한 채 다음 진도로 넘어가 보겠습니다. 이번 포스팅에서 각 태그의 속성을 자세하게 파헤치기에는 글이 너무 길어질 테니까요. 그런 건 기회가 된다면 차근차근 다음 포스팅에서 이어나가도록 하죠.
다음은 스스로 닫는 태그의 예시입니다.
예를 들어 br태그는 스스로 닫는 태그이고 줄바꿈의 기능을 합니다.
첫째줄<br/>
둘째줄참고로 html 코드 편집기에서 줄 바꿈을 한다고 출력되는 내용도 줄 바꿈이 되지는 않습니다.
편집기 내에서의 줄 바꿈은 그저 개발자의 시각적인 가독성을 위해서만 존재하는 것입니다.
| 잠깐,,, p태그도 문단 구분을 위해 줄 바꿈을 하지만 이때의 문단 간의 간격은 br태그로 줄 바꿈 하는 간격보다 더 넓습니다. 그리고 이 줄 간격이나 문단 간격은 나중에 CSS언어를 이용해 수정하고 디자인할 수 있습니다. |
또 하나 스스로 닫는 태그의 예시로 img태그가 있습니다. img태그는 이미지를 불러서 출력하는 태그인데 이미지의 경로를 속성 값으로 지정하기 때문에 태그를 두 번 써서 열고 닫을 필요가 없습니다.
<img src="이미지경로">/
4. html 태그
html태그는 안에 있는 내용이 html 코드임을 의미하는 태그입니다.
모든 html 파일 안의 내용은 html태그로 감싸져있습니다.
5. head 태그
head태그는 브라우저 화면에 직접 출력되는 내용이 아닌, html문서의 제목, 폰트, 성격, 설명 등을 작성하거나 body태그 안에 있는 코드들을 도와주는 stylesheet나 script가 작성되는 곳입니다. script는 물론 body태그 안에서 쓰이기도 합니다.
안에 주로 작성되는 내용들에 대해서는 다음 포스팅들에서 계속 나올 테니 궁금증을 지금 바로 못 푸셔도 걱정 안 하셔도 될 것 같습니다.
6. body 태그
body태그는 브라우저 화면에 직접 출력되는 내용을 작성하는 곳입니다. 사용자가 웹에서 직접 조작할 수 있는 부분 또한 body태그 안에 작성됩니다. 왜냐하면 사용자는 화면에 출력된 내용을 통해 브라우저와 소통하기 때문입니다. 가령 로그인할 때 아이디, 비밀번호 입력이나 스크롤, 버튼 클릭 같은 것들은 사용자가 사용하는 기능들이기 때문에 브라우저에 직접 출력되는 body태그 내에 작성되는 것이지, head태그에 작성되지 않습니다.
7. style 태그
css코드가 작성되는 곳입니다. css는 html의 밋밋하고 딱딱한 디자인을 예쁘게 꾸며주기 위해 사용되는 언어입니다.
8. script 태그
javascript코드가 작성되는 곳입니다. javascript는 html으로만 작성된다면 정적이고 딱딱한 웹페이지를 동적인 웹페이지로 만들어줄 수 있고 html문서를 쉽게 작성할 수 있도록 도와줄 수 있는 언어입니다. 또한 서버와 상호작용할 때 사용되기도 합니다.
html, head, body태그는 html의 가장 골격을 이루는 핵심 태그들입니다. 지금까지 배운 내용을 이용해 만든 html 파일의 코드는 대략 다음과 같은 구조일 것입니다.
<!doctype html>
<html>
<head>
<style>css코드</style>
<script>javascript코드</script>
</head>
<body>
html코드
<script>javascript코드</script>
</body>
</html>
필수불가결은 아니지만 웹페이지라면 거의 반드시 쓰이는 h 태그에 대해서 알아봅시다.
h 태그는 제목을 나타내는 태그입니다. 제목이긴 한데 html문서 자체의 제목은 아닙니다. 그것은 title태그라는 다른 태그를 사용합니다.
그러면 h태그는 무슨 제목을 정하는 것이냐? 바로 body태그 안에 있는 콘텐츠들에 대한 제목을 정하는 것입니다.
h태그는 h1~h6까지 총 6개의 제목 태그가 있고 숫자가 낮을수록 대제목, 클수록 소제목을 나타냅니다.
이 중 가장 큰 제목은 h1태그인데 이 태그는 1개의 html문서에 반드시 1개 존재해야 합니다. 0개여도안되고 2개이상이여도 안됩니다. 반드시 1개만 존재해야합니다. 이렇게 해야 하는 이유는 h1태그가 2개 이상 존재하면 웹 표준에 맞지 않고 검색엔진 최적화(SEO)에 좋지 않기 때문입니다. 검색엔진최적화는 내 웹페이지를 검색엔진에서 검색했을 때 노출이 잘되게끔 최적화시키는 작업을 의미하는데 이것도 공부하려면 하나의 테마입니다. h1이 0개인 것도 마찬가지로 검색엔진최적화(SEO)에 좋지 않습니다. 검색엔진 최적화에 좋지 않다는 말은 내가 만든 웹페이지가 검색엔진에서 잘 노출되지 않음을 의미합니다.
h태그는 h1부터 h2, h3, ... 숫자 순서대로 사용하면 되고 h2부터 h6까지는 같은 태그를 여러 번 사용해도 문제가 없습니다. SEO와 관련해서 h태그에 대해 할 얘기는 상당히 많지만 나중에 SEO에 대해서만 따로 다룰 기회가 있을 거라고 생각합니다.
또한 대제목일수록 텍스트의 크기가 커집니다. h1이 가장 사이즈가 크고 h6으로 갈수록 텍스트 사이즈는 점점 작아집니다. 이 텍스트의 크기를 바꾸고 싶으면 디자인만을 위한 언어인 CSS를 사용하면 됩니다.
그래서 지금까지 배운 내용을 바탕으로 HTML 문서의 코드 골격을 대략적으로 잡아보면 다음과 같습니다.
직접 작성해서 실행시키고 싶으면 밑에 있는 예시 코드에서 style태그와 script태그는 제거해주는 것이 좋겠습니다. 왜냐하면 해당 태그안에 작성해야할 내용들을 아직 알려드리지 않았거든요.
* 예시코드
<!doctype html>
<html>
<head>
<style>css코드</style>
<script>javascript코드</script>
</head>
<body>
<h1>큰 제목</h1>
내용
<h2>중간 제목</h2>
내용
<h3>작은 제목</h3>
내용
<h3>작은 제목</h3>
내용
<script>javascript코드</script>
</body>
</html>
위 코드에서 style태그와 script태그를 제거한 다음 실행시키면 다음과 같이 브라우저에 출력될 것입니다.
* 출력 결과
큰 제목
내용
중간 제목
내용
작은 제목
내용
작은 제목
내용
최근댓글