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만)만  받고 진행해드리도록 하겠습니다.

Whitespace debugging in DevTools in action

구글 크롬 위주로 사용하다가 파이어폭스로 옮겨타보려고 시도중입니다. 여느때와 다름없이 퍼블리싱을 하던 중 이상한 현상이 나타났습니다. 무슨 짓을 해도 레이아웃이 틀어지는 기이한 상황(?)이었는데, 도대체 무슨 상황인지 파악이 안되서 애꿎은 css만 계속 수정했습니다만 엉뚱하게도 원인은 공백문자 – whitespace text node 문제였습니다.

크롬과 달리 파이어폭스에서는 html 태그에서 한칸 띄어쓰기를 한것 까지 잡아내서 기어코 공백으로 표현하는 과잉 친절을 베푸는데, 바로 이게 원인이었습니다.

위와 같은 문제(?)때문에 약간의 공간을 표시하면서 결과적으로 전체적인 레이아웃이 틀어졌던 것입니다. 보기 좋게 줄바꿈을 한 덕분에 삽질을 하게 됐네요. 일단 이렇게 또 삽질하면서 한 수 배웠습니다.