Part 7. 웹 - 프런트엔드 (1) - HTML의 규칙

콘텐츠(Contents)라고 불리는(콩글리쉬랍니다) 데이터 또는 정보를 말합니다.

우리가 계산기로 계산을 하기 위해서는 계산 대상을 집어넣어야 되죠? 그건 결과가 궁금한 사람인 본인이 알고 있고요. 계산기는 우리들이 어떤 정보를 알고 싶은지 모르죠. 일단 입력하는 대로 받아들이죠. 시작을 "0"으로 하는 숫자는 조금 스마트하게(?) 0을 지워주는 정도는 알아서 해줄려나요? 어쨌든, 계산기 스스로가 해야 할 일을 할 뿐입니다.

웹개발 입문 때 많이 듣게되는 용어, 크게 두 가지 분야로 나누어지는데 바로 프런트엔드(Front End) 또는 백엔드(Back End)입니다. 프런트엔드는 계산기로 따지면 입력기인 각종 버튼들, 그리고 상단의 숫자가 찍히는 액정이라고 할 수가 있겠네요. 정보를 얻고자 하는 사람이 입력하거나, 그리고 정보 입력에 대한 과정이나 결과 등, 눈으로 보이는 출력을 프런트엔드가 맡고 있습니다. 복잡한가요?

간단하게 정리하면 웹에서의 프런트엔드는 두 가지로 나누어집니다. "ML"(Markup Language) 이거나, 아니거나. 

HTML을 포함해서 XML, WML, XHTML, SGML, VML,... 등이 있구요. 현재는 HTML을 쓴다고 보면 됩니다.

웹브라우저는 클라이언트 도구입니다. 사용자가 클라이언트 도구로 쉽고 편하게 요청한 자료를 서버로 보내주고, 그리고 서버에서 보낸 자료를 받아서  표현하는데요. 앞의 글에서 웹은 HTTP라는 규약을 쓴다고 했죠. HTTP를 잘 알고 있다면 누구나 웹브라우저(클라이언트)를 만들거나 웹서버를 구현할 수 있겠고요.

웹프로그래머의 역할은 이런 웹브라우저, 웹서버를 만드는 것이 아니라 "프런트엔드의 컨텐츠"를 만들어주는 기능을 하는 룰(Rule)을 만드는 것입니다. 이것은 HTML이 될 수도 있고, (쉽게 네이버 메인페이지를 생각하세요) 그 이외의 자료도 될 수 있다는 것입니다.

HTML은 페이스북 등에서 보듯 이미지, 동영상, 오디오 등의 자료를 표현할 수 있습니다. 이런 자료는 (거의 대부분)HTML안에 품고 있는게 아니라 "하이퍼링크"를 통해 제공합니다. (퍼가기 많이 해보셨죠?)

이전 시간에 만들었던 Hello world 를 담은 hello.htm 파일을 만들었었죠. 이 파일은 HTML에서 표현하는 태그(Tag)가 아직 없는데요. 태그라는 것은 꺽쇠라고 불리는 "<", ">" 로 감싼 이미 정해진 영문자로 지정할 수 있습니다.

<a>, <b>, <i>, <img> ... 와 같습니다.

 

지루하실테니, hello.htm 파일을 열어서 태그를 줘봅시다.

아직은 태그의 종류를 잘 모르시겠죠. 외우지 않으셔도 됩니다. 

 

저는 오래 다루어봐서 HTML에는 어떤 태그가 있는지 대략 알고 있어요.

앞으로 알려드릴 태그의 종류보다는 사용법에 집중하세요. 종류는 책이나 인터넷에서 찾으시면 됩니다만, 어떻게 사용하는지 모르면 아무 쓸모가 없는 것입니다. (마치 슈퍼에서 어떤 자료든 살 수 있어도 요리를 할 수 없으면 무용지물인 것처럼 말이죠)

태그는 크게 스스로 작동하는 태그와 그렇지 않는 태그로 나누어집니다. 우리는 "Hello world, 홍길동"이라는 텍스트를 입력했고, 여기에 이름인 "홍길동"을 강조하고 싶은데, 네이버 등에서 봤겠지만 텍스트를 진하게 하거나, 밑줄을 주거나, 크기를 바꾸거나, 색을 지정할 수가 있습니다. 그 중에 "<b>"태그를 감싸줌으로 해서 굵게 표시를 한 것입니다. 이렇게 감싸는 태그는 범위 시작은 "<태그명>"이고, 끝은 "</태그명>"으로 끝 태그에는 슬래시(/)문자를 붙여주게 됩니다. 

굵게 보이시나요?

 

다시 말하지만, "글자를 굵게하는 태그는 <b>입니다"를 알려드리려는 것이 아닙니다. 

이 예제처럼, 글자에 효과를 주기 위해 태그로 감쌌죠. 이것이 바로 스스로 작동하지 않는 태그라고 말할 수 있겠습니다. 대상 컨텐츠를 어떻게 하겠다는 의미입니다.

그럼 스스로 작동하는 태그 중 하나인 "<img>"를 연습해보겠습니다. 태그명에서 보듯이 이미지를 표시하는 것 같네요.

다음 파일을 다운로드 받아서 c:\webstudy 에 "img"폴더를 만들고 아래의 파일을 다운받아서 넣어줍니다.

star.png

0.00MB

 

그리고 이를 표시하기 위해 <img> 태그를 써보도록 하죠. 저는 꽤 많이 써봤기 때문에 손이 기억합니다.  ^^;

따라해보세요.

 

<img src="img/star.png">

 

<img> 태그는 이렇듯 이미지를 표현합니다. 어떤 이미지죠? "img/star.png"입니다.

그런데, 잘 보시면 분명 "홍길동"에 엔터를 쳤지만 실행하면 홍길동 우측에 붙어있는 것으로 나옵니다. 

어떻게 되었는지는 드래그를 해보면 알 수 있겠죠.

홍길동과 별그림 사이의 공백 1개가 보이시나요?

 

이미지로 인해 텍스트들은 이미지와 같이 한 줄로 표현이 된 것입니다. 자세히 보면 "홍길동"과 "이미지"사이에 1개의 space 가 있는데, 이것이 바로 htm 파일에서 엔터를 쳤기 때문입니다.

 

 

 

 

3개의 이어진 이미지 처럼, HTML은 스페이스 또는 개행을 막~ 하더라도 무조건 1개의 스페이스만 표현되는 것을 알 수 있습니다. 태그의 아주 큰 특징입니다.

다시, 우리가 사용한 <img>태그를 볼까요.

<img src="img/star.png">

<b> 태그를 해본 것 처럼, 태그는 꺽쇠(<,>)를 열고 닫음으로 표현됩니다. 

"<태그명" 으로 시작을 하죠. 여기서, 스페이스 또는 개행을 하면 그 태그의 "속성(Attribute)"을 지정합니다. 속성은 태그를 보조하는 역할을 하는 거겠죠? 사진을 표현하는데, 무얼 보여주나? 라는 의미로 "src"로 정해진 속성명을 쓰는 것입니다. 이것도 "이렇게 쓰세요~"라고 정해진 HTML의 <img>태그 규칙으로 정해진 것이니, 외우지마세요. 쓰다보면 자연스럽게 외워질겁니다. (기억이 안나면 찾으면 됩니다.)

속성은 값을 가집니다. src="img/star.png" 구문이겠죠? 여기서, 속성값은 큰따옴표(")로 감싸줍니다. 그러나, 큰따옴표가 없어도 잘 됩니다. 또한 작은따옴표(')로도 작동합니다. 

여기까지 "태그의 속성"에 대해 천천히 정리해보면,

태그의 속성값은 "속성명=속성값"으로 표현하고, "속성값"의 시작과 끝은 큰따옴표 또는 작은따옴표로 감싸거나 생략 가능하다.

이렇게 정리되겠네요.

2개이상의 속성은 역시 마찬가지로 스페이스 또는 개행문자로 구분하고 또 다른 속성을 주면 됩니다.

<img>태그에 있는 "alt"라는 속성을 하나 줘 볼게요.

<img src="img/star.png"

                                     alt="빨간별 그림입니다.">

속성간에 스페이스나 개행을 여러개 하더라도 잘 작동합니다. 그리고 최종으로 더 이상 사용할 속성이 없다면 꺽쇠를 닫아서 태그를 마무리 하면 됩니다. 

태그를 중복으로 사용해야 될 떄도 있겠죠.

"홍길동"에 글자색을 파란색으로 추가로 적용해 봅시다.

"<font>"태그를 줬는데, 이는 더 이상 사용하지 말자라고 정해졌으니 참고합시다. 

예제처럼, 중복으로 태그를 줄 때는 내부에 줘야 합니다.

<b><i>홍길동</b></i>      

위 예는 태그의 잘못된 중첩 사용의 예입니다. </i>가 </b>의 안쪽으로 들어가줘야 됩니다. 다만, 작동은 됩니다.

 

여기까지 직접 같이 해보셨나요? 그렇다면, 하나 경험하신 것이 있을건데요.

HTML은 사람이 태그를 잘못 사용을 할 수는 있어도 잘못되었다고 알려주지 않습니다. 즉, 오타가 나면 나는대로 브라우저가 자기만의 재량으로 결과를 해석하게 됩니다. 정신없이 태그로 도배를 한 후에 실행하면 원하는대로 안될 때가 있겠죠. 웹브라우저는 어디서 꼬였는지, 오타가 났는지 알려주지 않으니 참고하세요.

 

HTML 태그의 종류는 구글링으로 쉽게 찾아보실 수 있습니다. 에제와 함께 나와있으니 눈으로 보고 넘기실 수 있겠지만, 오늘 배운 내용들을 잘 생각해보면서 "이렇게 하면 동작을 할까?" 의문을 던지면서 자유롭게 코딩해보세요. 오류가 발생하지 않으니 신나게 가지고 놀아보고 이 글에서 다루지 않은 특징들을 직접 경험해보세요.

그리고 태그명 또는 속성은 대소문자 구분하지 않으나, 일반적으로 소문자로 코딩합니다. ("속성값"은 대소문자를 구분합니다.)

 

[생각해보기]

1) 속성값은 왜 큰따옴표, 작은따옴표 두가지를 적용했을까? 또한 큰따옴표와 작은따옴표를 혼용하게 되면 어떻게 될까?

2) HTML에서 스페이스 두칸이상 또는 개행문자가 먹히지 않는 이유가 무엇일까?

3) 속성값은 대소문자를 구분한다는 의미는 무엇일까?
 

이번 글은 여기까지입니다.