시맨틱하게 HTML을 짠다는 것.
웹 프론트엔드 직군으로 전향하면서 가장 부족함을 느끼는 것 중 하나가 HTML과 CSS작업이 아닐까 합니다. 물론 Javascript 코드를 짜면서도 부족함을 느끼지만 이전에 별로 신경을 쓰지 않았던 HTML과 CSS가 성큼성큼 저에게 다가와서 그런걸까요? 부족한 HTML, CSS를 채우기 위해 온라인 강의나 오프라인 강의를 듣고, 시니어 개발자님께 코드리뷰를 받다 보니 “와 내가 그동안 시맨틱한 HTML을 고려하지 않고 코드를 x나 막 짰구나” 라는 것을 느끼게 되었습니다.
Semantic HTML을 직역하면 의미론적 HTML입니다. 문서의 의미에 맞게, 어플리케이션의 의미에 맞게 HTML을 작성할 수 있도록 하는 것을 의미하는데요. HTML에는 마땅한 정답이 없기 때문에, HTML 각 요소의 의미에 맞게 HTML을 작성하는 것이 중요합니다. 예를 하나 들어볼까요? 아래와 같은 예가 있다고 가정을 해봅시다.
ex)
구현1) <div>내가 만약 달이 된다면 지금 그 사람의 창가에도 아마 몇줄기는 내리겠지.</div>
구현2) <p>내가 만약 달이 된다면 지금 그 사람의 창가에도 아마 몇줄기는 내리겠지.</p>
의미가 없는 DIV태그와 Paragraph를 나타내는 p태그 중 어떤 것이 여러분에게 더 의미가 전달 되는 것 같나요?
기계에게는 명확한 의미를 부여해줘야할 필요가 있습니다. 스크린리더는 의미에 따라 요소를 다르게 읽고 검색 로봇은 의미에 따라 요소를 이해하여 콘텐츠를 보여주고 브라우저는 특정한 의미를 가진 요소에 스타일을 다르게 보여주곤 합니다. 그렇기 때문에 시맨틱하게 HTML을 짜는 것이 중요합니다.이러한 중요성을 알기때문에 그렇게 코드를 작성하려 노력하고 고민하고 있습니다. 물론 HTML에 부족함이 없다면 많이 고민하지 않았겠지만요.
HTML에는 여러가지 태그들이 존재하지만 실제 실무에서 코드를 작성하면서 동료개발자와 고민했던 태그들과 저의 무식으로 놓치고 있던 태그들의 특성에 대해 이야기를 해보고자 합니다.
첫번째. <main>태그
- 해당 페이지의 main 콘텐츠를 나타냅니다.
- main 요소는 한 페이지에서 한번만 사용 가능합니다.
- IE7까지 지원을 하려면 다음과 같이 써줘야 되요
<div class="main> </div>
사실 서비스에서는 main이라는 태그를 써본 적이 없는데요. 서비스내 집단지성 홈 페이지에 이 태그를 써보면 좋지 않았을까 생각합니다.
해당 페이지의 메인 컨텐츠는 번역 요청 피드들이라고 생각하기 때문이에요.
두번째. <section>태그
- 관심사 그룹에 따라 구획을 구분하기 위해 사용하는 요소입니다.
- section 요소는 문법상 ‘반드시’ 제목 요소(h1 ~ h6)을 가져야 합니다.
- 이 섹션의 관심사가 무엇인지 검색 로봇에 알려줍니다.
- IE7까지 지원을 하려면 다음과 같이 써줘야 되요
<div class="section"></div>
실제로 section 태그는 서비스 내에서 번역 요청 피드그룹에 사용하고 있습니다. 하지만 h1 ~ h6 제목 요소들을 쓰지 않았더군요. 이부분은 보완해야 할 것 같습니다.
또한 다른 페이지에서는 section 태그안에 제목 요소를 썼지만 한가지 오류를 범하고 있었습니다. 해당페이지의 대표적인 소개 문구로서 h1태그를 써야 하는 것인데 단순히 폰트 사이즈를 줄이기 해서 h1태그가 아닌 h2태그를 쓰고 있더군요. 코드를 다시 보니 너무 부끄러웠습니다;;
세번째. <article> 태그
- 관심사에 따라 글을 작성하기 위해 사용하는 요소입니다.
- article 태그로 감싼 부분이 `독립적`으로 존재해도 되는 경우에 쓰입니다. ex ) 블로그 글,날씨 위젯
- article 요소는 문법상 ‘반드시’ 제목 요소(h1 ~ h6)을 가져야 합니다.
- 이 섹션의 관심사가 무엇인지 검색 로봇에 알려주는 것입니다.
- article태그 안에 section태그가 있어도 되고, section 태그 안에 article태그가 있어도 됩니다.
- IE7까지 지원을 하려면 다음과 같이 써줘야 되요
<div class="article"> </div>
해당 태그는 번역 피드를 나타내기 위해 쓰이고 있습니다. 독립적으로 분리 할 수 있는 부분이라 생각하기 때문이에요
특히 이부분 작업을 할때 번역 요청 피드들의 그룹을 section이라 해야할지 article이라 해야 할지, 각각의 요청 피드들을 section이라 할지 article이라 할지 동료개발자 분들과 의논을 많이했었습니다. 결국에는 각각의 번역 요청 피드들은 독립적으로 존재 할 수 있는 부분이라 생각해서 article태그를 사용했고 그 피드들을 하나의 관심사 그룹으로 묶었으니 section태그를 사용했습니다.
다른 태그들도 많이 있지만..
시니어 개발자님께 들었던 것 중 하나는 HTML 코드를 작성할 때는 정답이 없다는 점입니다. 하지만 가장 최선이라고 생각하면서 코드를 작성해야 한다는 점입니다. 또한 시멘틱하게 짜는 것도 중요하지만 디자인시안 처럼 똑같이 구현하는 것도 무척 중요합니다.
이글에서는 시맨틱 HTML과 관련해서 다루고 있지만(시맨틱의 ‘시’자도 제대로 했을까 싶지만;;) HTML과 CSS, 그리고 Javascript는 모두 조화롭게 이루어져야 합니다. HTML과 CSS로 마크업하고, Javascript 로 기능을 구현하다 보면 Javascript코드가 방대해지는 느낌을 받을 때가 있고 먼가 찜찜한 상태에서 구현한 코드를 리뷰를 받을 때 어김없이 듣는 말이 있습니다.
Javascript가 방대해지면, Javascript,HTML 그리고 CSS가 조화롭게 이루어이지 않았기 때문이에요. HTML과 CSS를 다시 살펴보고 모두 지우고 처음부터 다시 짜보세요.
이전에 짰던 코드에 집착이 생겨 모두 지우고 다시 짜는것에 머뭇거리긴 하지만 확실히 전에 짰던 코드보다는 나아지긴 하더 군요.
Javascript가 부족한 거 같아 학습하면, HTML,CSS가 뒤쳐지는 것 같고, 그래서 HTML,CSS가 부족한 것 같아 학습을 하면 Javascript가 부족한 거 같아 학습하고 이렇게 매번 반복되는 것 같습니다. 물론 그 과정에서 내가 놓치고 있는 부분을 발견하기도 합니다.
결론은 이전보다 코드가 더 나아졌으면 하는 바람입니다.언젠가 이글을 다시 보고 이불킥을 하고 있을 지도 모르겠지만요;;
Reference: HTML&CSS와 관련 하여 강의해주신 시니어 개발자님 , 회사 프론트엔드 개발자 동료분들.
