HTML 태그를 직접 만들어 사용할 수 있음

(maurycyz.com)

3P by GN⁺ 11일전 | ★ favorite | 댓글 1개

HTML에서는 인식되지 않는 태그 이름을 사용해도 브라우저가 이를 일반 요소로 처리함
CSS에서 해당 태그 이름을 선택자로 지정하면 스타일 지정과 표시 제어가 가능함
하이픈(-)이 포함된 이름을 쓰면 미래 HTML 표준과의 충돌을 방지할 수 있음
<div>나 <span> 대신 의미 있는 사용자 정의 태그를 쓰면 코드 가독성이 높아짐
복잡한 중첩 구조에서도 태그 이름만으로 구조를 파악하기 쉬워, 유지보수가 용이함

사용자 정의 HTML 태그의 활용

브라우저는 알 수 없는 태그를 일반 블록 요소처럼 렌더링함
- 이는 HTML 표준에 명시된 정상 동작으로, CSS에서 스타일을 지정하면 시각적으로 제어 가능
- 예시로 <cool-thing> 같은 태그를 정의하고 CSS에서 cool-thing { ... } 형태로 꾸밀 수 있음
태그 이름에 하이픈(-) 을 포함하면 향후 HTML 표준에 추가될 가능성이 없어 충돌 위험이 없음
- 예: <main-article>, <quote-body> 등

가독성과 구조 개선

<div>나 <span> 대신 의미 있는 이름의 태그를 사용하면 코드 이해가 쉬워짐
- 예를 들어 <div class="article-header"> 대신 <article-header>를 사용 가능
중첩된 <div> 구조에서는 닫는 태그 위치를 파악하기 어렵지만, 명시적 태그 이름을 쓰면 구조가 명확해짐
- <main-article> 내부에 <article-header>, <article-quote> 등으로 구성하면 DOM 구조 파악이 직관적임

예시 코드

기존 방식

<div class="cool-thing">
  Hello, World!
</div>

사용자 정의 태그 방식
```
<cool-thing>
  Hello, World!
</cool-thing>
```
- CSS에서 cool-thing { display: block; font-weight: bold; text-align: center; ... } 형태로 스타일 지정 가능

결론

HTML 표준이 허용하는 유연한 태그 정의 기능을 활용하면,
가독성 높은 구조적 마크업을 작성할 수 있음
단, 기존에 정의된 의미 있는 태그가 있을 경우에는 기존 태그 사용이 우선임

▲

GN⁺ 11일전 [-]

Hacker News 의견들

<tag-name>은 인식되지 않는 태그가 아님을 강조함
자신의 블로그 글을 소개하며, <tagname>은 WHATWG가 새 요소로 추가하기 전까지 HTMLUnknownElement로 처리되지만, <tag-name>은 유효한 HTMLElement로서 레이아웃과 스타일링에 유용하다고 설명함
JavaScript Custom Elements API로 업그레이드하면 정의된 커스텀 요소가 됨
모든 브라우저에서 표준 동작이며, W3C HTML Validator도 대시가 포함된 커스텀 요소를 HTMLElement로 인정함
다만 기본 UA 스타일시트의 [hidden]{display:none} 규칙은 상속되지 않으므로 직접 지정해야 함
<DIV>가 기본적으로 display:block인 것도 UA 스타일시트 덕분이므로, 커스텀 요소에는 직접 display 속성을 설정해야 함
CSS의 :defined와 :not(:defined) 선택자를 통해 정의된/정의되지 않은 요소를 구분할 수 있음
Declarative Shadow DOM(<template shadowrootmode="open">)도 동일하게 정의되지 않은 커스텀 요소를 생성함
- Chromium 기준으로는 UA 스타일시트의 문제가 아니라, hidden이 HTML 표현 속성(presentation attribute) 이기 때문이라고 반박함
  UA 스타일시트는 커스텀 요소에도 동일하게 적용되며, [hidden] 규칙은 존재하지 않음
  hidden은 align="right"처럼 속성 자체가 스타일로 해석되는 예시임
- 대시(-) 대신 콜론(:) 을 쓸 수 있었다면 XML 네임스페이스를 자연스럽게 통합할 수 있었을 것이라 아쉬움을 표현함
  nginx나 apache에서 콜론을 하이픈으로 변환하는 것도 가능했을 것이라 언급함
  “1999년으로 돌아갈 수는 없지만”이라며 회상적인 어조로 마무리함
- 왜 이런 방식이 기본 관행이 아닌지 의문을 제기함
예시 코드의 <div> 중첩 구조가 과도하다고 지적함
<article>, <header>, <blockquote> 등 의미론적 태그를 쓰는 것이 더 적절하다고 제안함
- 커스텀 태그는 클래스 속성과 달리 하나의 이름만 가질 수 있음을 지적함
  클래스는 여러 개를 가질 수 있고 순서가 없지만, 중첩된 커스텀 요소는 순서를 강제하므로 동일한 표현을 하기 어려움
- “div soup”이 나쁜 게 아니라, HTML이 구조와 스타일을 강하게 결합한 설계 결정의 결과라고 분석함
  1996년에는 타당했지만 지금은 그렇지 않다고 평가함
3~4년간 커스텀 요소를 사용해온 경험을 공유함
아이디어는 영리하지만 실무에서는 까다로움
너무 많은 커스텀 태그를 쓰면 가독성이 떨어지고, 블록/인라인 구분이 어려워짐
균형 잡힌 접근법으로, 기본 태그는 그대로 쓰고, <x-card>나 <x-hero>처럼 컴포넌트형 요소에만 커스텀 태그를 사용함
하위 구성요소는 <div slot="hero-blurb">처럼 slot 속성으로 구분함
클래스는 수정·커스터마이징 용도로만 제한하고, 구조는 slot으로 표현하는 방식을 선호함
- 균형 잡힌 웹 컴포넌트 접근법에 관심이 많다며, 예시나 툴셋을 요청함
  자신이 만든 Good.HTML을 소개하며, 자동 훅(autohook) 과 템플릿 리터럴 기반 인터폴레이션, 정렬된 컴포넌트 구조를 지원한다고 설명함
  < !app-header /> 같은 셀프 클로징 커스텀 요소도 주석 노드 트릭으로 구현했다고 덧붙임
- CSS에서 slot 속성을 기준으로 선택하려면 div[slot="hero-blurb"]처럼 쓰면 된다고 질문함
- 이 패턴이 BEM의 block–element 구조를 떠올리게 한다고 언급함
기본적으로 커스텀 태그는 <span>처럼 동작함
필요하면 Custom Element API를 통해 동작을 정의할 수 있음
- 2014년에 커스텀 요소를 광범위하게 사용했으며, React가 대세가 된 것에 아쉬움을 표현함
  대부분의 사용자에게는 SPA보다 HTML+커스텀 요소 조합이 더 나았을 것이라 생각함
- 의미론적 요소를 우선 사용하고, 필요할 때만 커스텀 요소를 쓰는 것이 좋다고 함
  자신이 만든 Hypalink 예시를 공유하며, Web Components의 저평가를 지적함
<yes-script>라는 커스텀 태그를 만들어 <noscript>의 반대 역할을 구현했다고 소개함
JS가 비활성화된 경우 특정 영역을 숨길 수 있음
프로젝트 링크를 공유함
- CSS의 @media (scripting) 기능을 이용하면 순수 CSS만으로도 동일한 효과를 낼 수 있다고 제안함
  MDN 문서 참고 링크를 첨부함
과거 브라우저에서 제거된 <blink> 태그를 직접 재현한 경험을 공유함
jQuery와 visibility 조작으로 구현했으며, 브라우저가 임의 태그를 허용한다는 사실에 놀랐다고 함
코드가 10줄 남짓이라 공개하지는 않았지만, 비슷한 시도가 많을 것이라 추측함
- 실제로 대부분의 브라우저는 <blink>를 구현한 적이 없으며, Firefox와 Opera만 2013년까지 지원했다고 설명함
- Flash가 사라진 것에 여전히 아쉬움을 표함
- CSS만으로도 <blink> 효과를 낼 수 있다며 예시 코드를 공유함
  .blink 대신 blink 선택자를 쓰면 태그에 직접 적용된다고 함
- <blink> 같은 동작은 단순한 HTML 요소로 제공되기엔 너무 큰 의미를 가진 기능이라며, 사라진 것을 반긴다고 밝힘
<main-article>, <article-header> 등의 예시는 실제 HTML 태그로 대체할 수 있다고 지적함
<article>, <header>, <blockquote>를 쓰는 것이 더 적절함
- 미리 정의된 HTML 태그를 쓰면 브라우저의 기본 스타일링 혜택도 함께 얻을 수 있다고 덧붙임
커스텀 태그는 기본적으로 <span>처럼 인라인으로 렌더링되지만, CSS로 기본 display 속성을 지정하면 됨
과거에는 네임스페이스 문제로 피했지만, 표준에서 하이픈(-)을 허용하면서 충돌 위험이 사라짐
CSS 선택자에서도 문제없이 작동하며, querySelector로도 접근 가능함
Vue 같은 프레임워크 없이도 현대 HTML만으로 충분히 표현 가능하다고 느낌
- 하이픈이 포함된 비표준 요소는 HTMLUnknownElement가 아닌 HTMLElement로 처리된다고 보충함
  이는 향후 업그레이드 시 프로토타입 체인이 자연스럽게 확장되도록 하기 위한 설계임
모든 커스텀 요소에 기본 스타일을 지정하려면 다음처럼 하면 됨
```
:where(:not(:defined)) {
  display: block;
}
```
- 이 방법을 찾고 있었다며, 감탄과 감사를 표현함
예전 IE는 HTML5 태그를 인식하지 못했기 때문에, 2010년경 자신이 만든 스크립트로 해결했다고 회상함
JS로 태그를 한 번 생성하면 IE가 인식하게 되었고, 이후 삭제해도 문제없었음
이 방식으로 임의의 태그도 렌더링 가능하다는 걸 깨달았다고 함
당시 블로그 글을 함께 공유함
- 인기 있었던 html5shim도 같은 방식으로 동작했다고 덧붙임

답변달기