지난 글에서도 이야기했듯이 이번에는 레이아웃에 대한 태그 – header, aside, footer, section, article에 대해서 살펴보겠습니다. 백문이 불여일견이니 일단 아래에 있는 코드를 봅시다.

좌측은 html 소스 내용이고, 우측은 브라우저에 보여지는 모습입니다. 태그가 들어가고 내용이 들어가니 조금 복잡해보일 수 있지만, 이것을 계층 구조로 정리하면 아래와 같은 모습입니다.

  • header
  • div
    • section
      • h1
      • p
    • article
      • h2
      • p
  • aside
  • footer

꼭 문서 개요를 짜놓은것 같죠? 지난 번에도 이야기했지만 다시 한 번 강조하자면, html은 ‘웹 문서’를 작성하는 마크업 언어입니다. 브라우저에서 읽기 좋도록 문서를 작성하는 방법이죠.

재미있는 점은 h1이나 h2 태그는 글자가 다른 글자보다 굵고 크게 써있다는걸 알 수 있습니다. 기본적으로 제목으로 쓰이는 태그이기 때문이죠. 이렇게 태그마다 기본적으로 설정되어 있는 값들이 있지만, 우리는 이걸 CSS(Cascading Style Sheet)라는 것을 이용해서 변경해줄 수 있습니다.

이제는 CSS를 추가한 모습을 보여드리겠습니다. CSS에 h1 태그에 대해서 빨간색으로 칠하라고 써놓은 것 보이시나요? h1 { color: red; } 이런 식으로 대괄호로 묶은 곳 안에다가 color는 red(빨간색)이야 하고 정의해주는겁니다. 서술한 내용이 한줄이거나 여러줄로 작성할 경우 마지막 내용에는 ;(세미콜론)을 생략해도 되지만, 개인적으로는 가능하면 모두 적어주는 습관이 좋다고 생각합니다.

See the Pen
layout
by 배현기 (@illustudio)
on CodePen.

위의 태그는 header, section, article, aside, footer 태그를 각각 백그라운드 컬러를 지정해서 구분이 되도록 나눠준 상태입니다. 지난 번에 이야기했던 것처럼 위의 태그들 모두 block 속성을 기본적으로 갖고 있기때문에 가로폭을 100%씩 차지하고 있습니다.

그래서 층층히 쌓인 상태로 웹브라우저에 보여지는 것입니다. 우리가 원하는 웹 사이트의 모습은 컨텐츠가 무조건 아래로 나열되야할 경우도 있지만, 좌우로 나열되야 하는 경우도 있습니다. 이럴때도 역시 CSS를 이용해서 배치를 해줄 수 있는데, 이럴때는 좀 복잡한 문제들이 발생합니다. 보통 float를 이용해서 배치하는 경우가 많았지만, 요즘은 flex도 구형브라우저가 아니라면 사용할 수 있기때문에 점차 사용이 늘어나고 있습니다.

좀 더 진화한 방식의 grid라는 속성도 생겼지만, 익스플로러에서 지원하지 않는 문제로 우리나라에서는 모바일웹이 아니고서야 사용할 방법이 없습니다.  좋은 기능이 나와도 쓸 수 없다는건  무척 아쉬운 부분이죠.

이번 글에서는 대략적으로 레이아웃에 대한 태그 – main이라던지 nav와 같은 태그들도 있지만, 문서의 얼개를 구현해 줄 수 있는 태그들을 이야기하며 css에 대한 간단한 소개도 선보였습니다.

 

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/CSS도 사실 원해서 했다기보다 자연스럽게 제가 떠맡게 된 경우인데, 생각보다 재미있어서 계속 공부하게 되었습니다.

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

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

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

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

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

학습목표 

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

준비물 

관련글

카페24 모바일 스킨에서 상품상세 기본적으로 소비자가가 표시되지 않고 판매가만 표시됩니다. 아래 이미지처럼 소비자가에 취소선이 들어가고, 판매가를 표시함으로써 정가에 비해서 할인되고 있다는 것을 보여주고 싶은데, 불가능한 상태입니다.

취소선이 들어간 소비자가, 강조된 판매가

이 부분을 따로 소스를 작성해줘야하는데요. 목록 화면에서는 적용되어있기때문에 목록화면에서 쓰이는 소스를 활용해서 적용해야합니다.

위의 소스를 원하는 부분에 삽입함으로써 간단하게 해결이 가능한데, 카페24에서 제공하는 $product_custom변수는 기본적으로 소수점 아래 2자리까지 표현하기때문에 천단위로 구분지어주는 모디파이어(modifier)기능을 활용해서 숫자 표현을 변경해줘야합니다.

“소비자가”를 추가하기 전

“소비자가”를 추가한 모습

위와같이 간단하게 소비자가와 판매가를 표현해줄 수 있습니다. 그리고 아래 사진과 같이 변경하기 위해서 CSS 코드를 이용하면 더욱 눈에 두드러지게 차이를 줄 수 있습니다.

CSS 적용

위와 같이 간단한 방법으로 소비자가를 삽입해줄 수 있습니다. 카페24에서도 할인율을 표시하는 방법이 있지만, 개인적으로 모든 제품 가격이 자동으로 할인율이 적용되도록 하고 싶습니다. 그래서 다음 포스팅에서는 소비자가와 판매가를 계산하여 할인율을 표시하는 자바스크립트를 작성해보도록하겠습니다.

 

카페24 쇼핑몰을 운영하시는 분들 중에 웹디자이너 혹은 웹퍼블리셔의 도움 없이 혼자서 해결해나가는 분들이 있습니다. 간혹 이런 부분에 대해서 쇼핑몰 운영자들이 모여있는 커뮤니티에서 질문글이 올라오곤 하는데요.

아무래도 전문적으로 카페24 스킨을 수정해 온 사람들이라면 모를까 임시방편으로 해결해오던 습관 혹은 누군가 귀찮아서 대충 알려준 방법을 공유하는 모습들이 보입니다. 아마도 카페24 스킨을 수정할때 가장 빈번한 내용이 “배너”를 교체하거나 추가할때 필요한 내용들일 것입니다.

좀 과격하게 말씀드리자면 일단 과거에 table로 레이아웃을 잡던 방식으로 html을 배우신 분들은 ‘나도 html을 할 줄 안다’ 라고 생각하시지 않았으면 좋겠습니다. 그때와는 웹 문서를 만드는 방식이 너무 달라져버렸습니다. html 문서 안에서 스타일과 크기 등 모든 것을 해결하던 방식에서 이제는 html은 문서의 구조만 담당하고 css가 스타일과 색상, 배치, 크기 등을 담당하고 자바스크립트로 동적인 모션이나 데이터를 제어해주는 세상이 됐습니다. 역할이 분담이 된 셈인데, 이렇게 된 데는 다 이유가 있습니다.

예를 하나 들어볼께요.

이를테면 가로로 2단 그리드로 배치되는 이미지를 만드는 방식입니다.  간략하게 보자면 과거의 테이블로 레이아웃을 잡던 방식이라면 아래와 같은 방식을 취했겠죠.

테이블 코드에 대해서 잘 이해하고 다루는 사람이라면 한 눈에 “아 전체 가로폭은 1200픽셀이고 600픽셀씩 이미지를 배치해주는 코드구나” 이렇게 이해할 수 있을겁니다. 하지만 테이블 태그의 특성을 보면 일단 table > tbody > tr > td 이렇게 총 4번이나 안으로 들어가서 구조를 파악해야하므로 브라우저에서 그만큼 많은 단계를 거쳐야하고, 이런 부분이 많아질 수록 브라우저에서 이미지를 표현하는데 많은 시간이 걸립니다.

그래서 거기서 조금 더 나아간 방식이 style을 활용한 방식입니다.

한눈에 보기에도 훨씬 간결해졌죠? 하지만 이런 방식으로 코딩을 하면, 가로폭이 1200픽셀에서 1100픽셀로 바뀌거나 1400픽셀로 바뀌는 상황에서 또 저걸 찾아서 바꿔줘야한다는 문제가 있습니다. 물론 저 배너 하나뿐이라면 가서 바꾸면 되지만, 배너를 보통 하나만 쓰는 경우가 없죠.

그래서 아래와 같은 방식으로 개선해서 쓰게 됩니다.

조금 생소할 수 있지만, 여기서 처음 보이는 부분이 바로 class라는 부분입니다. class는 한번 지정해놓으면 얼마던지 쓸 수 있기 때문에 무척 편리합니다. 이를테면 아래와 같은 방법도 가능해요.

보시다시피 클래스가 3번이나 쓰였죠? 그래도 모두 같은 내용으로 1200픽셀이라는 폭이 허용됩니다. 그럼 나중에 1100으로 줄어들거나 1400으로 늘어나더라도 우리는 style 태그 안에 width:1200px이라는 값만 수정해주면 됩니다. 관리가 굉장히 편하겠죠? 여러번 반복해서 수정해야할 부분을 딱 한줄만 고쳐주면 전부 수정되니까요.

위의 방식도 문제가 되는 점이 있는데, style 태그가 작성된 html 문서 안에서만 저 내용이 적용된다는 점입니다. 보통 웹사이트는 html 문서 하나로만 구성되지 않습니다. 여러 페이지에 걸쳐서 width:1200px이라는 값이 필요할 수 있겠죠? 그래서 css 파일이 필요한겁니다.

어떤 문서건 head 태그 안에 <link rel=”stylesheet”  type=”text/css” href=”스타일 시트가 위치한 경로와 파일명”> 이 한줄만 넣어주면 공통적으로 스타일 시트를 재활용할 수 있습니다. html과 css 부분을 분리한 예제가 바로 아래와 같은 경우입니다.

See the Pen 스타일 시트를 활용하는 방법 by 배현기 (@illustudio) on CodePen.0

 

내용을 무척 길게 작성하게 되었는데, 이렇게 이야기하는 이유는 좀 더 미래를 보고 작업해야할 필요가 있다는 이야기를 하고 싶었습니다. ‘지금 당장 급하니까’라는 이유로 맨 처음에 설명한 inline 방식 – html 태그 안에 직접적으로 스타일을 정의하는 방식으로 style 적용한다던지, 아니면 html 문서 안에 style 태그로 적용 하는 방식으로 하면, 나중에 쌓아둔 숙제처럼 밀려오는 수많은 수정사항에 못이겨 관리하던 직원이 나가버리거나 사이트를 새로 만들거나 하는 사태가 벌어질겁니다.

이런 문제를 사전에 방지하려면 사실 처음부터 이런 부분에 잘 알고 있는 사람에게 일을 맡기는것이 좋겠죠. 그래서 혼자 운영하는 부분에서 정말 공부해야할 것이 많을겁니다. 그래서 사실 커뮤니티에서 알려주시는 분들도 좋은 의미에서 공유하시는거겠지만, 인라인 방식과 스타일 태그로 알려주는 방식은 차라리 알려주지 않느니만 못하다는것을 알았으면 좋겠습니다.

결국 이런 방식으로 html, css 파일로 나누어서 작성하게 된 이유는 모두 관리면에서 이점이 크기 때문입니다. 불필요한 작업은 최소화해야된다는거죠. 이런 방식을 따르지 않고 그저 작성한 사람 ‘혼자서만 알아보면 된다’, ‘나 당장 급한데로 해버릴꺼다’ 이런 식으로 일처리를 하기보단, 관리가 편한 방식을 따라서 작성하는 것이 좋습니다. 일단 다음에 관리해야할 사람이 망연자실할 정도로 후환(?)을 만들어 놓아서는 안되겠죠 ㅎㅎ