HTML 문서에 나오는 많은 태그들 중에 body 영역에 쓰이는 태그들은 크게 두가지 성격으로 나눌 수 있습니다. 바로 블록과 인라인이라는 속성인데, 아래 예시를 한 번 보겠습니다.

See the Pen
블록과 인라인 차이
by 배현기 (@illustudio)
on CodePen.

일부러 눈에 잘띄게 블록 속성의 태그에는 빨간테두리를, 인라인 속성의 태그에는 초록색 테두리를 둘러주었습니다. 별다른 설정을 하지 않아도, 블록(block) 속성을 가진 태그는 무조건 욕심껏 가로로 100%의 공간을 다 차지합니다. 하지만 인라인(inline) 속성을 가진 태그는 딱 내용이 필요한만큼만 영역을 차지하고, 옆 공간을 다른 태그에게 양보해줍니다.

여기서 착각해서는 안되는 점이 있습니다. inline 속성의 태그를 block 속성의 태그 옆에 붙여주면, inline은 양보를 잘하니까 그대로 옆에 붙어있지 않을까? 라고 생각 할 수 있는데, 절대 그렇지 않습니다. block은 욕심껏 무조건 100%를 차지하기때문에 inline을 무시하고 무조건 100% 다 가로폭을 차지합니다.

블록과 인라인은 레이아웃을 구성할때 무척 중요한 개념입니다.

여기서 재미있는 점이 하나 있는데, CSS를 이용하면 Block의 성격을 inline으로 , inline을 Block으로 바꿔줄 수 있습니다. 사람 성격은 쉽게 못 바꿔도, 태그의 성격은 쉽게 바꿀 수 있습니다. 그렇다면 왜 태그를 굳이 성격을 정해놓고 만들었느냐 싶은 생각도 들 수 있을 겁니다.

각 태그들은 이름에서 의미를 찾아볼 수 있습니다. 위의 예시에서 보여준 div, p, span의 이름은 각각 Division, Paragraph, Span에서 유래됐다고 볼 수도 있는데 – 정확한 네이밍에 대해서는 의견이 분분하더군요. 각각 영역을 분할(division)하고, 문단(Paragraph)으로 나누고, 컨텐츠 내용에 따라서 자유롭게 늘어나고 줄어든다(span)는 의미에서 이름을 지어놓은 것들입니다. 그래서 태그 성격상 100% 다 공간을 차지해야하는 태그와 그렇지 않은 태그로 나누었다고 생각해볼 수 있습니다. 어차피 초창기 HTML문서에 대한 규약은 요즘처럼 화려한 레이아웃을 염두에 두고 만든게 아니었기 때문이죠.

과거 html4 시절만해도 이런 태그 이름의 의미에 대해서 크게 주목받지 못했습니다. 오래전에 html을 배우신 분들은 table로 레이아웃을 잡던 것이 익숙할 겁니다. 하지만 검색엔진이 점점 적절한 의미대로 구조를 갖춰 작성된 웹 문서를 선호하는 알고리즘으로 변화하면서 이런 태그들의 이름과 역할대로 쓰여지는 의미론적 접근이 중요해졌지요.

그러면서 레이아웃을 구성하는 header, aside, section, article, footer 태그들이 새로 나오게 됐습니다. 다음 글에서는 이것들에 대해서 대략적으로 흝어보겠습니다.

HTML의 가장 기본적인 시작 구조

HTML은 기본적으로 이런 모양새를 갖고 있습니다. 가장 눈에 띄는 특징은 <html> </html> 이라는 구조인데요. <html>은 여는 부분 </html>은 닫는 부분입니다. html 문서의 요소들은 보통 “태그”라고 불리는데, 태그는 반드시 열었으면 꼭 닫아줘야합니다.

태그는 마지막에  닫아 주는게 중요합니다.

html문서는 저렇게 <html>로 열어서 </html>로 닫아주는 것이 일반적입니다.  그리고 html 안에는 꼭 들어가야하는 두가지 요소가 또 있습니다.

바로 head와 body인데요. head는 문서의 정보들이 들어갑니다. 누가 작성했으며, 어떤 규칙들을 적용할 것인지 미리 적어주는 곳입니다. SEO(검색엔진최적화)에 필요한 내용들도 대부분 head부분에서 작성되는 것들이 많습니다.

HEAD 태그는 이 문서가 어떤 문서인지 소개합니다

head는 주로 브라우저 화면상에서는 보이지 않지만 이 문서가 동작하거나 수행해야할 역할에 대해서 명시합니다. 그리고 body는 본격적으로 눈에 띄는 부분들을 작성해줍니다.

<!DOCTYPE html>이란 부분은 이 문서가  html5로 작성되었다는 것을 알려주는 부분입니다. html4 문법을 사용할때는 좀 더 많은 내용이 필요하지만 최근은 거의 대부분 html5를 사용하기 때문에 여기서는 가볍게 넘어가겠습니다.

태그에는 속성이란게 존재합니다

다른 태그들과 다르게 html 태그를 보면 lang=”ko”라는 부분이 보입니다. 이것을 속성이라고 부르는데, html 태그 속성 중에는 lang이라는 속성이 있습니다. 이름에서도 유추할 수 있듯이 language(언어) 속성인데, 이 문서가 “ko” 즉 한국어로 작성되었다는 이야기입니다. 영어권 문서로 작성할 경우엔 “en”이라고 작성해줍니다.

태그는 중복해서 여러번 쓰일 수 있습니다

이번엔 head부분에 더 많은 내용이 들어가 있죠? 먼저 meta 태그를 보겠습니다. 현재는 3번에 걸쳐서 쓰이고 있습니다만 더 내용이 필요하면 반복해서 쓸 수 있습니다. 그리고 다른 태그와 달리 meta 태그의 특징은 닫는 태그가 없습니다! 아까 강조하기를 반드시 태그는 닫는 태그가 필요하다고해놓고 처음 소개하는 태그부터 닫질 않는 태그를 소개하게 됐네요. 세상엔 항상 이렇게 예외라는게 존재합니다.

하지만 반드시 꼭 지켜줘야하는 것은 html, head, body 이 세가지 태그는 딱 한번씩만 쓰여야합니다. 중복해서 쓰면 안되요!

meta 태그에 대한 것은 처음 익히는 현재는 중요하지 않으니 그냥 넘어가도 되는 부분입니다. 나중에 알아도 되는 부분들이니 차츰 다음에 알아보도록 하죠.

title 태그는 문서의 타이틀을 알려줍니다

title 태그는 말 그대로 문서의 타이틀이 보여지는 부분입니다.

title 태그에 입력한 내용은 위의 이미지에서 보이듯 탭에 쓰여집니다. 문서 자체에는 아무 내용이 보이지 않지만, 맨 상단에 쓰여진 “Document”라는 내용이 바로 title에 입력된 내용입니다.

이렇게 title 태그 안에 내용을 문서 타이틀이라고 바꿔 적으면 브라우저에서도 아래와 같이 변합니다.

사실 title 태그는 사용자 입장에서 눈에 잘 띄는 곳이 아니다보니 보통 상호명을 적는 경우가 많은데, html 문서가 “웹문서”라는 것을 생각해보면 문서의 제목이 달려야하는 것이 맞습니다. title은 문서의 타이틀이 이런거다 하고 알려주는 역할을 합니다. 누구에게? 바로 검색엔진입니다.

검색엔진이 문서를 수집해갈 때 문서의 제목을 바로 이 부분에서 가져가기 때문이죠. 그렇다고 너무 욕심내서 많은 내용을 넣어선 안됩니다. 대략 40자 이하로 작성하는 것이 가장 좋습니다.

오늘은 이쯤 하고 다음엔 body 태그에 들어갈 내용들을 본격적으로 작성해보겠습니다.

관련글

HTML은 Hyper Text Markup Language의 약자로 혹자는 HTML도 언어라고 이야기하지만, 개발자들은 HTML은 언어가 아니라고 강력히 주장합니다.

HTMLHTML을 언어취급 할 수 없다는 직업의식이 부른 재앙… 출처 : 제타위키

각설하고, 일단 HTML은 기본적으로 ‘웹문서’를 작성하기 위해 필요합니다. 초기의 웹은 지금처럼 화려하고 다양한 기능을 갖춘 모습이 아니라 그저 말 그대로 정보를 공유하기 위한 ‘문서’였습니다. 파란 밑줄이 그어진 하이퍼 텍스트를 이용해 문서와 문서간에 이동을 하게 할 수 있는 기능이 부여된 그런 ‘웹 문서’ 말이죠.

그래서 HTML을 문서 자체로서 검색엔진이 읽기에 좋은 상태로 작성해주면 그것을 바로 검색엔진 최적화(SEO – Search Engine Optimization)라고 합니다. 때문에 HTML을 잘 이해하고 SEO에 맞춰서 작성하면 비지니스에도 큰 도움이 되는 셈입니다.

요즘은 누구보다 더 자신의 컨텐츠나 서비스를 알리고 싶어하는 세상입니다. 그것이 비지니스와 직결되기 때문이죠. SEO는 이제 필수가 자리잡은 세상입니다. SEO 조건에 충족시킨 문서라고 무조건 상위 노출이 되는 것은 아니지만, 그 조건을 무시한 문서보다는 상위 노출될 확률이 크죠.

조건이 충족된 문서는 가치있는 컨텐츠로 판단되어 검색엔진에서도 비교적 첫페이지에 노출시킬 확률이 크다는 이야기입니다.

때문에 HTML을 그저 div로 층층히 쌓아가기보다 header, section, article, nav와 같은 목적에 맞는 태그로 적절히 작성해주는 시맨틱( semantic, 의미론적)한 접근이 중요합니다.

이러한 부분은 직접 html 문서를 작성해가며 하나하나 짚어보도록 하겠습니다.

 

웹디자이너로써 코딩을 전혀 하지 않고 오로지 디자인에만 집중할 수 있는 환경에서 일하는 분들이 무척  부럽습니다. 그 분야에서 스페셜리스트로 인정받은 분들이라고 볼 수 있는지라, 저는 가볍게 겉만 핥으며 다니는 – 아주 라이트한 제네럴리스트로 늘 스페셜리스트에 대한 부러움을 갖고 있죠.

저는 주로 중소기업, 그것도 쇼핑몰에서 근무한 경력이 많다보니 자연스럽게 오만걸 다 하는 경우가 많았습니다. HTML/CSS도 사실 원해서 했다기보다 자연스럽게 제가 떠맡게 된 경우인데, 생각보다 재미있어서 계속 공부하게 되었습니다.

요즘은 UI프레임워크들이 많이 등장하면서 웹디자이너의 자리가 더더욱 좁아지고 있는데요. 개발자들이 디자이너 밥줄을 끊네 꼭 그런 이유가 아니어도, HTML/CSS로 자신의 디자인을 어떻게 구현하는지 이해하면 도움이 많이 됩니다. 

포토샵에서 디자인한 결과물이 웹브라우저로 올라가면 어떻게 되는지 이해한다는 것은 그것을 모르고 할 때와는 차원이 다른 경험이 될 것입니다. 포토샵에서 그려보기만 한 디자인은 디바이스의 크기에 따라 달라짐을 쉽게 예측하기 어렵습니다. 

마치 전단지와 리플렛이 홍보물이라는 큰 맥락은 같을지 몰라도 전단지와 달리 리플렛은 어떻게 접을 것인가에 따라서 보는 사람의 행동도 예측해야하듯 모바일과 태블릿 데스크탑 등 다양한 디바이스에 따라 변화가 필요합니다.

윈도우7의 서비스 지원이 종료되면서 구형브라우저도 함께 자취를 감추기를 기대하지만, 아직까지 익스플로러가 웹 레이아웃 구현의 발목을 잡고 있습니다. 레이아웃을 구현하는 기술은 flexbox를 넘어 grid-layout으로 진보해도 국내 환경상 여전히 float를 이용해야하는 경우가 많지요. 일단은 익스플로러에 대한 대응을 고려하지 않고 크롬 웹브라우저를 기준으로 학습을 진행할 예정입니다. 일단은 크롬으로 제작한 뒤 익스플로러 11을 기준으로 필요한 부분을 수정하거나 추가하는 방식으로 크로스 브라우징에 대응할 예정입니다.

그 동안 실무에서 사용했던 기억들을 되살려 조금씩 정리하며 공부한 것들을 다시 확인하는 기회를 가질겸 연재를 시작해봅니다.

학습목표 

  • HTML과 CSS의 차이와 용도 이해
  • 직접 디자인한 것들을 html/css로 구현해보기

준비물 

관련글

이전 포스팅 – 카페24 모바일에서 소비자가를 표시하는 방법에서 카페24에서 소비자가와 판매가를 구분하는 작업을 하고난 뒤에 자동으로 두 값을 이용해서 할인율을 표시하는 자바스크립트입니다.

See the Pen
소비자가,판매가 퍼센티지 계산
by 배현기 (@illustudio)
on CodePen.

스크립트는 단순합니다. 두 값을 변수에 저장한다음 정규표현식을 이용해 한글을 제외한 숫자만 추출한 뒤 퍼센티지 계산을 합니다. 그리고 새로운 엘리먼트를 만들어서 해당 내용을 담아서 원하는 위치에 삽입하는 방식으로 구성된 스크립트입니다.

해당 내용을 운영중인 카페24 쇼핑몰에 적용하고 싶으시면 연락주세요. 해당 내용을 바로 적용할 수 있는 경우도 있지만 소스의 가공이 필요해지는 경우도 있습니다. 작업 난이도에 따라 소정의 작업료(5~10만)만  받고 진행해드리도록 하겠습니다.