얼마 전에 저는 CSS 팁 몇 가지에 관한 글을 썼습니다. 이제 HTML 차례입니다! 이번에 저는 HTML 에 대한 팁 몇 가지를 공유할 것입니다. 패러그래프를 나누는 방법, 헤딩(heading)을 쓰는 방법, 폼(form)을 개선하는 방법 등은 초보자들에게 적합할 것입니다. SVG 스프라이트를 아이콘으로 쓰는 방법처럼 꽤 난이도 있는 팁도 있습니다.

Text

Paragraph

우리가 만드는 HTML 코드는 대부분 패러그래프로 구성됩니다. HTML 엘리먼트 중에는 패러그래프 태그 (<p> 태그)가 존재합니다. 패러그래프를 나누는 용도로 줄바꾸기 태그 (<br> 태그)를 쓰지 마세요. 줄바꾸기와 패러그래프는 의미가 다르기 때문입니다.

이렇게 쓰지 마세요:

Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly
beans muffin donut marzipan oat cake.

<br>

Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding
chocolate cake cheesecake toffee.

이렇게 쓰세요:

<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream
pie jelly beans muffin donut marzipan oat cake.</p>

<p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes
pudding chocolate cake cheesecake toffee.</p>

줄바꾸기 태그의 적합한 용도는, 시 또는 노래 가사의 줄을 나누는 것입니다.

<p>So close, no matter how far<br>
Couldn’t be much more from the hearth<br>
Forever trusting who we are<br>
And nothing else matters</p>

Heading

<h1> 부터 <h6> 에 이르는 헤딩 태그들은 암묵적으로 중요도의 순위를 나타냅니다. 1 이 가장 중요하고 6 이 가장 덜 중요합니다.

이런 의미를 적절히 처리하려면, 헤딩 순위를 브라우저가 표시하는 헤딩 문자의 크기를 기준으로 정하지 말고, 중요도를 기준으로 정하세요. 헤딩의 크기는 CSS 를 이용해서 조정할 수 있으며, 반드시 CSS 를 이용해서 조정해야 합니다! 의미적으로 적절한 순위의 헤딩을 선택하세요.

이렇게 쓰지 마세요:

<article>
    <h1>Monkey Island</h1>
    <h4>Look behind you! A three-headed monkey!</h4>
    <!-- ... -->
</article>

이렇게 쓰세요:

<article>
    <h1>Monkey Island</h1>
    <h2>Look behind you! A three-headed monkey!</h2>
    <!-- ... -->
</article>

한가지 더 고려해야 할 것은 헤딩과 함께 쓸 하위 헤딩 또는 태그 줄을 생성하는 방법입니다. W3C 방식은 순위가 낮은 헤딩을 쓰는 것보다 일반적인 텍스트 마크업을 쓰는 것을 추천합니다.

이렇게 쓰지 마세요:

<header>
    <h1>Star Wars VII</h1>
    <h2>The Force Awakens</h2>
</header>

이렇게 쓰세요:

<header>
    <h1>Star Wars VII</h1>
    <p>The Force Awakens</p>
</header>

Form

Placeholder

<input> 엘리먼트의 placeholder 속성은 사용자에게 입력 값 샘플을 보여줍니다. 그리고 사용자가 해당 필드에 값을 입력하는 순간 자동으로 지워집니다. placeholder 는 적합한 입력 필드 값의 형태를 본보기로 보여주기 위한 수단입니다.

불행히도, 개발 현장에서는 placeholder 를 <label> 엘리먼트의 역할로 쓰는 경우가 굉장히 많습니다. 유효한 입력 값의 본보기를 보여주는 역할이 아니라 필드의 목적을 알려주는 역할 말입니다. 이렇게 쓰는 것은 장애인을 위한 웹 접근성 측면에서 좋지 않기 때문에 피해야 합니다.

이렇게 쓰지 마세요:

<input type="email" placeholder="Your e-mail" name="mail">

이렇게 쓰세요:

<label>
    Your e-mail:
    <input type="email" placeholder="darth.vader@empire.gov" name="mail">
</label>

모바일 기기의 키보드 처리

모바일 기기에서 브라우징 하는 사람들을 위해 타이핑 힌트를 제공하는 것이 중요합니다. <input> 엘리먼트에 적절한 type 속성을 지정하면 됩니다.

예를 들어, type="number" 라고 지정하면 모바일 폰(phone)은 통상적인 알파벳 키보드 대신 숫자 키패드를 표시할 것입니다. 필요에 따라 type="email", type="tel" 등을 지정하세요.

이렇게 쓰지 마세요:

<label>Phone number: <input type="text" name="mobile"></label>

이렇게 쓰세요:

<label>Phone number: <input type="tel" name="mobile"></label>

비교해 봅시다. 왼쪽은 type="text" 라고 지정했을 때 표시되는 키보드입니다. 그리고 오른쪽은 type="tel" 라고 지정했을 때 표시되는 키보드입니다.

Image

SVG 파일을 반갑게 맞아주세요! 우리는 보통 다음 같은 코드로 벡터 그래픽을 사용합니다.

<img src="acolyte_cartoon.svg" alt="acolyte">

그런데 웹사이트의 벡터 아이콘을 구현할 때도 SVG 스프라이트를 이용할 수 있습니다. 벡터 아이콘은 웹 폰트로도 구현할 수 있습니다. 하지만 그건 편법이고 완벽한 품질을 얻지 못할 때가 있습니다. 왜냐하면 브라우저는 웹 폰트를 이미지가 아니라 문자로 취급하기 때문입니다. 그리고 잠재적인 다른 문제가 있습니다. 광고 블록킹 솔루션(content/ad blockers)들이 웹 폰트 다운로드를 막는 문제입니다. 이에 대해 좀 더 알고 싶다면, 아이콘을 그리는 용도로 웹 폰트보다 SVG 가 좋다는 Sarah Semark 의 이야기를 들어보세요. CSS-Tricks 에서도 관련 기사를 읽을 수 있습니다.

SVG 스프라이트는 CSS 스프라이트와 아주 비슷한 아이디어입니다. SVG 스프라이트를 구현하려면 모든 SVG 애셋(asset)들을 한개의 이미지 파일로 병합해야 합니다. SVG 의 모든 애셋들은 다음 코드처럼 <symbol> 태그로 묶입니다.

<svg>
    <symbol id="social-twitter" viewBox="...">
        <!-- actual image data here -->
    </symbol>
</svg>

그다음, 해당 아이콘은 다음 코드처럼 당신의 HTML 안에서 <svg> 태그를 이용해서 쓸 수 있습니다. 즉, 우리는 SVG 파일 안에 있는 symbol ID 를 참조하는 것입니다.

<svg class="social-icon">
    <use xlink:href="icons.svg#social-twitter" />
</svg>

SVG 스프라이트 쉬트(spritesheet)를 작성하는 것이 번거로와 보이나요? 그래서 준비했습니다. 이를 위해 사용할 수 있는 gulp-svgstore 같은 도구가 있습니다. 이 도구는 각각의 애셋 파일들로부터 스프라이트 쉬트를 만드는 과정을 자동화합니다.

그리고 기억하세요. 우리가 그림을 표현하기 위해 <img> 태그 대신 <svg> 태그를 쓰고 있기 때문에 우리는 CSS 를 이용해서 스타일을 적용할 수 있습니다. 따라서 웹 폰트를 이용해서 할 수 있는 모든 멋진 일들을 SVG 아이콘으로도 할 수 있습니다!

.social-icon {
    fill: #000;
    transition: all 0.2s;
}

.social-icon:hover {
    fill: #00f;
}

하지만 CSS 적용에 있어 약간의 제약이 있습니다. SVG 를 이런 용도를 쓸 때, <use> 코드는 <symbol> 태그를 참조합니다. 그러면 이미지는 Shadow DOM 으로 투입되고 우리는 약간의 CSS 기능을 쓸 수 없게 됩니다. 이런 경우, 우리는 SVG 의 특정 엘리먼트를 선택해서 스타일을 적용할 수 없습니다. 또 어떤 속성들 (예를 들어 fill 속성)은 해당 속성이 정의되지 않은 엘리먼트에만 적용 가능합니다. 하지만 보세요. 이런 일은 웹 폰트로도 할 수 없습니다!

아래 데모에서, 우리는 SVG 스프라이트의 실제 예제를 볼 수 있습니다. 당신이 이미지 위로 마우스를 옮기면, CSS 에 의해 횟불의 불꽃 색상이 바뀔 것입니다.

이 팁들이 도움이 되면 좋겠습니다. 조금이라도 질문이 있다면, 또는 조금이라도 나누고 싶은 당신만의 팁이 있다면, 커멘트를 남겨주세요!

이 글은 Belén Albeza 가 쓴 A few HTML tips 의 한국어 번역본입니다.