의미론적 HTML

docs.scrimba.com

두 페이지는 똑같이 보일 수 있지만 내부적으로는 완전히 다르게 만들어질 수 있습니다. 하나는 요소를 담은 내용에 따라 이름을 붙인 요소들을 사용합니다: 헤더, 네비게이션, 메인 영역. 다른 하나는 모든 것을 같은 익명의 박스로 감싸고 클래스 이름에 의존합니다. 화면에 표시되는 방식은 동일하지만, 다른 모든 측면에서는 완전히 다른 페이지입니다. 요소를 의미에 따라 선택하는 것이 의미론적 HTML의 핵심입니다.

의미론적이란 무엇인가

**의미론적**은 "의미와 관련된"을 뜻합니다. 의미론적 요소는 그 이름이 담은 내용을 설명하는 요소입니다. 문단은 <p>에 들어갑니다. 네비게이션 메뉴는 <nav>에 들어갑니다. 태그 이름이 그것이 무엇인지를 나타냅니다.

거의 모든 페이지를 하나의 다목적 박스로 만들고 스타일링으로 올바르게 보이게 할 수 있습니다. 하지만 그렇게 하면 페이지의 어떤 것도 그것이 무엇인지 알려주지 않습니다. 내용에 이름을 붙이는 요소를 선택하는 것은 이사할 때 상자에 라벨을 붙이는 것과 같습니다. 모든 것이 라벨이 없는 평범한 상자에 들어갈 수 있지만, 라벨이 있어야 다른 사람이나 브라우저가 모든 상자를 열어보지 않고도 안에 무엇이 들어있는지 이해할 수 있습니다.

요소는 그 내용이 어떻게 보이는지가 아니라 무엇을 의미하는지를 설명할 때 **의미론적**입니다. <nav>, <article>, <button>은 의미론적입니다: 내용이 무엇을 위한 것인지 알려줍니다. <div>와 <span>은 그렇지 않습니다: 그들 자체로는 아무것도 의미하지 않는 일반적인 컨테이너입니다.

장점은 의미가 마크업에 남아있어서 다른 도구들이 읽을 수 있다는 것입니다. 브라우저는 <button>이 클릭 가능하고 키보드로 포커스될 수 있다는 것을 당신이 아무것도 추가하지 않아도 알고 있습니다. 스크린 리더는 <nav>를 네비게이션 영역으로 알려줄 수 있습니다. 검색 엔진은 <article>을 자체 포함된 내용의 일부로 취급합니다. 스타일이 지정된 <div>는 이 중 어느 것도 작동하지 않습니다. 왜냐하면 <div>는 그것이 담은 내용에 대해 어떤 약속도 하지 않기 때문입니다.

의미론은 의미를 담는 요소와 픽셀만 담는 요소의 차이입니다. <nav>를 쓸 때, 당신은 단지 박스를 그리는 것이 아니라 문서에 대한 사실을 진술하는 것입니다: 이 영역은 네비게이션입니다. 그 사실은 접근성 트리(브라우저가 DOM 옆에 구축하는 평행 구조로, 각 요소의 역할과 상태를 보조 기술을 위해 설명)에 기록되고, 시각적 마우스 사용자 이외의 도구들이 작용하는 것은 이것입니다.

실용적인 테스트는 대체입니다. 요소를 맨 <div>로 바꾸고 동일하게 스타일링했다면, 무엇을 잃을까요? <p> 또는 장식적인 래퍼의 경우, 의미 있는 것은 없습니다. <button>의 경우, 키보드 포커스, Enter와 Space 키 처리, 스크린 리더에 대한 "button" 알림을 잃을 것이고, 이 모든 것을 손으로 다시 만들어야 합니다. 그 차이가 바로 의미론입니다: 브라우저가 요소의 이름이 내용이 무엇인지 알려줌으로써 무료로 제공하는 동작과 의미입니다. 이름이 지정된 요소를 선택하는 것은 스타일 선호도가 아니라 올바른 동작을 얻는 가장 저렴한 방법입니다.

Juno의미론적이란 무엇인가 의미론적은 태그가 담은 내용의 이름을 따른다는 뜻입니다: 문단은 <p>에, 메뉴는 <nav>에. 모든 것을 평범한 박스에 넣고 동일하게 보이도록 스타일링할 수 있지만, 그렇게 하면 그것이 무엇인지 아무것도 말해주지 않습니다. 이사할 때 박스에 라벨을 붙여서 누구나 안에 무엇이 있는지 알 수 있도록 하는 것 같습니다.

Juno의미론적이란 무엇인가 의미론적 요소는 의미를 이름 지으면, <div>는 아무것도 이름 짓지 않습니다. 이점은 브라우저, 스크린 리더, 검색 엔진이 모두 의미를 마크업에서 직접 읽을 수 있다는 것입니다. 내용을 설명하는 요소를 사용하고, 정말로 설명할 것이 없을 때만 <div>를 사용하세요.

Juno의미론적이란 무엇인가 치환 테스트를 실행하세요: 요소를 스타일이 지정된 <div>로 바꾸고 무엇을 잃었는지 묻습니다. 대답이 키보드 포커스, 접근성 트리의 역할, 또는 스크린 리더 알림이라면, 그것이 당신이 무료로 받았던 의미론입니다. 손으로 다시 만드는 것은 항상 이름이 지정된 요소를 사용하는 것보다 더 많은 작업입니다.

랜드마크 요소

소수의 요소들은 페이지의 큰 영역을 표시하기 위해 존재합니다. 이것들이 당신이 처음 선택하는 요소들입니다:

• <header>는 페이지 또는 섹션의 상단입니다: 로고, 제목, 소개.
• <nav>는 네비게이션 링크의 집합입니다, 예를 들어 메인 메뉴.
• <main>은 메인 콘텐츠이고, 페이지가 존재하는 이유입니다.
• <section>은 관련된 내용의 그룹화된 덩어리입니다, 보통 자신의 제목이 있습니다.
• <article>은 자체 포함된 조각이며, 혼자 있어도 여전히 의미가 있을 것입니다, 블로그 게시물이나 뉴스 기사처럼.
• <aside>는 옆에 있는 콘텐츠입니다: 관련 링크, 메모, 광고.
• <footer>는 페이지 또는 섹션의 하단입니다: 저작권, 연락처, 작은 글씨.

규칙은 매번 동일합니다. 영역이 네비게이션이면 <div>가 아닌 <nav>에 들어갑니다. 푸터이면 <footer>에 들어갑니다. 요소를 영역과 일치하는 것으로 이름 지으세요.

<header>
  <h1>민준의 주방</h1>
  <nav>
    <a href="/recipes">레시피</a>
    <a href="/about">소개</a>
  </nav>
</header>
<main>
  <h2>평일 저녁</h2>
  <p>퇴근 후 할 수 있는 빠른 식사.</p>
</main>
<footer>
  <p>서울에서 만들어졌습니다.</p>
</footer>

일곱 개의 요소가 페이지를 주요 영역으로 나누고, 함께 **랜드마크 요소**라고 불립니다. 각각이 독자나 도구가 탐색할 수 있는 영역을 표시하기 때문입니다:

• <header>는 가장 가까운 컨테이너를 소개합니다: 페이지 상단에서 사이트 브랜딩을 담고, <article> 내부에서는 그 기사의 제목과 부제를 담습니다.
• <nav>는 네비게이션 링크의 블록을 감싼다. 중요한 것들, 메인 메뉴나 목차를 위해 사용하고, 페이지의 모든 흩어진 링크를 위해 사용하지 마세요.
• <main>은 문서의 주요 콘텐츠를 담고, 사이트 전체에서 반복되는 부분이 아닌 이 페이지만의 고유한 부분입니다.
• <section>은 함께 속하는 관련된 내용을 그룹화하고, 보통 제목으로 소개됩니다.
• <article>은 완전하고 독립적인 단위입니다: 게시물, 댓글, 상품 카드. 테스트는 그것이 뽑아서 혼자 표시되어도 여전히 의미가 있을 것인지입니다.
• <aside>는 주변 내용에 접선적인 콘텐츠를 담습니다: 사이드바, 풀 인용, 관련 링크.
• <footer>는 가장 가까운 컨테이너를 마무리 자료로 닫습니다: 저자권, 링크, 법적 텍스트.

핵심 아이디어는 대부분이 상황에 맞다는 것입니다. <header>와 <footer>는 그들이 들어있는 것을 설명하므로, 단일 페이지는 여러 개씩 담을 수 있습니다. 페이지와 각 <article>을 위해 한 쌍씩. <main>은 예외이며, 다음 섹션에서 다룹니다.

<article>
  <header>
    <h2>로스트 토마토 수프</h2>
    <p>민준 작성, 20분</p>
  </header>
  <p>토마토를 반으로 자르고 부드러워질 때까지 로스팅합니다.</p>
  <footer>
    <p>4인분.</p>
  </footer>
</article>

일곱 개의 영역 요소는 HTML **랜드마크**입니다: 접근성 트리에서 탐색 가능한 영역을 노출하는 요소들. 각각은 보조 기술이 나열하고 이동할 수 있는 역할에 매핑되고, 이것이 정렬된 소스를 보는 것 이상으로 중요한 전부입니다.

• <header>는 페이지 수준에서 banner 역할에 매핑되지만, <article>, <aside>, <main>, <nav>, 또는 <section> 내부에 중첩되어 있을 때는 단지 소개 그룹이며 랜드마크 역할은 없습니다.
• <footer>는 그것을 반영합니다: 페이지 수준에서는 contentinfo, 그 섹션 요소 중 하나 내부에 중첩되어 있을 때는 평범한 그룹입니다.
• <nav>는 navigation 역할입니다. 페이지는 일반적으로 하나 이상을 가지고 있습니다, 기본 메뉴와 페이지 내 목차, 여기서 라벨링이 중요해집니다.
• <main>은 main 역할이며 주요 콘텐츠를 표시합니다. 페이지당 하나입니다.
• <aside>는 complementary 역할입니다: 주요 콘텐츠를 지원하지만 그것과 분리되어 있는 콘텐츠.
• <section>은 접근 가능한 이름을 가질 때만 region 랜드마크가 되고, 보통 제목과 묶여있습니다; 이름 없는 <section>은 랜드마크를 노출하지 않으며, 접근성 트리에 대해 <div>에 가깝습니다.
• <article>은 article 역할을 수행하고, 자체 포함된 구성으로, 도구는 나열할 수 있지만 다른 것들과 같은 의미에서 탐색 랜드마크는 아닙니다.

설계 목표는 시각적이지 않은 사용자가 시력이 있는 사용자가 레이아웃을 스캔하는 것과 같은 속도로 문서를 조사할 수 있는 것입니다. 스크린 리더는 모든 랜드마크의 목록을 생성하고 사용자가 중간 콘텐츠를 듣지 않고 "main" 또는 "navigation"으로 직접 이동할 수 있게 합니다. 이것은 영역이 실제 랜드마크 요소로 표시될 때만 작동합니다. 벽에서 벽으로의 <div>는 랜드마크가 전혀 없는 문서를 생성하므로, 그것을 통과하는 유일한 방법은 처음부터 끝까지입니다.

<body>
  <header>            <!-- banner: 페이지 수준 -->
    <nav>...</nav>    <!-- navigation -->
  </header>
  <main>              <!-- main: 유일한 주요 영역 -->
    <article>...</article>
    <aside>...</aside> <!-- complementary -->
  </main>
  <footer>...</footer> <!-- contentinfo: 페이지 수준 -->
</body>

Juno랜드마크 요소 알아야 할 일곱 개의 영역 태그가 있습니다: <header>, <nav>, <main>, <section>, <article>, <aside>, 그리고 <footer>. 각각은 페이지의 일부를 이름 지으면, 당신이 만들고 있는 영역과 일치하는 것을 선택합니다. 오늘 그들을 암기할 필요는 없습니다, 그들은 계속 나타나고 익숙해질 때까지 반복됩니다.

Juno랜드마크 요소 일곱 개의 요소가 페이지를 영역으로 분할하고, 대부분은 그들이 들어있는 것을 설명하므로, <header>와 <footer>는 여러 번 나타날 수 있습니다. <article> 테스트는 많은 의구심을 없애줍니다: 이것이 뽑아서 혼자 설 수 있을까요? 예라면 article이고; 제목이 있는 그룹화된 덩어리라면, section입니다.

Juno랜드마크 요소 이것들이 랜드마크이고, 각각은 스크린 리더가 이동할 수 있는 역할에 매핑되고, 이것이 <div> 더미를 이기는 이유입니다. 기억할 가치가 있는 두 가지 포착: <header>와 <footer>는 최상위 수준에서만 banner와 contentinfo 랜드마크가 되고, <section>은 접근 가능한 이름을 갖게 되면 랜드마크입니다. 이름 없는 section은 기본적으로 보조 기술에 대한 div입니다.

div와 span, 의미론적이지 않은 폴백

페이지의 모든 부분이 이름 지을 만한 의미를 가지고 있지 않습니다. 때때로 당신은 스타일링할 수 있도록 것들을 그룹화하거나 몇 글자를 색칠하기 위해 감싸기 위해 박스가 필요합니다. 그를 위해 자신의 의미가 없는 두 개의 평범한 요소가 있습니다.

<div>는 일반적인 블록입니다: 다른 요소가 맞지 않을 때 사용하는 빈 컨테이너. <span>은 행 내의 작은 텍스트에 대한 동일한 개념입니다. 둘 다 내용에 대해 아무것도 말하지 않습니다. 그들은 순전히 스타일링과 그룹화를 위한 훅으로 존재합니다.

<p>오늘 합계는 <span class="price">₩42,000</span>입니다.</p>

<div class="card">
  <h2>특가</h2>
  <p>모든 파스타에서 2개 구입시 1개 무료.</p>
</div>

<span>은 가격을 색칠할 수 있도록 감싼다. <div>는 테두리를 둘 수 있도록 카드를 그룹화합니다. 더 의미 있는 것이 맞지 않을 때만 이것들을 선택하세요. 브라우저에게 안에 무엇이 있는지 아무것도 말해주지 않기 때문입니다.

<div>와 <span>은 아무 의미도 없는 두 개의 요소이고, 그것이 정확히 그들이 하는 일입니다. <div>는 일반적인 블록 수준 컨테이너입니다; <span>은 일반적인 인라인 요소입니다. 당신은 그들을 **스타일링 훅**으로 사용합니다: 내용을 그룹화하거나 대상으로 지정해야 하지만 그것에 대해 의미 있는 것을 말할 것이 없을 때 클래스나 id를 붙일 수 있는 곳.

<div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<div class="grid">는 카드를 그리드로 배치하기 위해서만 존재합니다. 그것은 의미 있는 일이 아닌 표현 작업이므로, <div>가 올바른 선택이고, 느껴야 할 폴백이 아닙니다. 실수는 반대입니다: 의미가 있는 것을 위해 <div>를 사용하는 것. 클릭 가능한 <div>는 <button>이어야 하고, nav 링크로 가득 찬 <div>는 <nav>이어야 하고, 전체 게시물을 감싼 <div>는 <article>이어야 합니다. 의미가 없고 레이아웃이나 스타일링 요구만 있을 때, <div>와 <span>이 올바른 답입니다.

<div>와 <span>은 의미론적으로 빈 요소입니다: 각각 일반적인 블록과 일반적인 인라인 컨테이너이고, 접근성 트리에 역할이 없으며 어떤 도구도 발표해야 할 의미가 없습니다. 그들이 올바른 하나의 작업을 위한 요소는, **표현 훅**입니다: 스타일링을 붙이거나 레이아웃을 위해 자식을 그룹화하기 위해서만 존재하고, 스크린 리더나 검색 엔진이 발표해야 할 정보를 담지 않는 요소.

아무 의미도 없는 요소를 갖는 것의 가치는 의미 있는 요소들을 진실되게 유지한다는 것입니다. 그리드 래퍼, 플렉스박스 행, 포지셔닝 컨텍스트: 이것들은 의미론적 내용이 없는 실제 필요이며, 의미 있는 요소를 강제하는 것은 마크업의 거짓입니다. 순전히 배경 색을 위해 사용되는 <section>은 그것이 아닌 영역이라고 주장합니다. 그래서 규칙은 양쪽으로 실행됩니다. 이름 지어진 요소가 맞을 때 <div>를 선택하지 마세요, 그리고 필요한 모든 것이 박스일 때 이름 지어진 요소를 선택하지 마세요.

주의할 실패 모드는 상호 작용하는 <div>입니다: 버튼이나 링크처럼 작동하도록 JavaScript에서 클릭 핸들러가 주어진 요소. 마우스로 렌더링되고 클릭되므로 완성된 것으로 보이지만, 역할이 없고, 탭 순서에 있지 않고, Enter나 Space에 응답하지 않으며, 스크린 리더는 아무것도 발표하지 않습니다. tabindex, role, 키 핸들러로 모든 것을 다시 만드는 것은 이미 존재하는 <button>의 취약한 재구현입니다. 어떤 것이 컨트롤처럼 작동한다면, 컨트롤 요소를 사용하세요; <div>와 <span>은 픽셀인 부분을 위해 유지하세요.

Junodiv와 span, 의미론적이지 않은 폴백<div>는 평범한 박스이고 <span>은 몇 글자를 위한 평범한 래퍼이며, 둘 다 아무것도 의미하지 않습니다. 어떤 것만 그룹화하거나 스타일링할 필요가 있고 이름 지어진 요소가 맞지 않을 때만 사용하세요. 메뉴나 버튼처럼 의미가 있다면, 대신 그것을 위한 요소를 사용하세요.

Junodiv와 span, 의미론적이지 않은 폴백<div>나 <span>은 의미를 진술할 필요 없이 유일한 작업이 레이아웃이나 스타일링일 때 올바른 선택입니다. 그들에 대해 나쁜 느낌을 가지지 마세요, 반대에 대해 나쁜 느낌을 가지세요: <button>이어야 할 클릭 가능한 <div>, 또는 <article>이어야 할 래퍼 <div>. 빈 요소는 빈 의미, 이름 지어진 요소는 진정한 의미.

Junodiv와 span, 의미론적이지 않은 폴백<div>와 <span>은 접근성 트리에서 역할이 없으며, 이것이 정확히 그들이 순수 스타일링 훅에 올바르고 의미 있는 것에는 잘못된 이유입니다. 당신을 물 것 중 하나는 클릭 핸들러가 있는 상호 작용하는 <div>입니다: 포커스 없음, 키보드 없음, 알림 없음, 그리고 당신이 무료로 제공하는 <button>을 위장하려는 tabindex와 role 패치 더미. 컨트롤처럼 작동한다면, 컨트롤을 만드세요.

올바른 요소 선택하기

어떤 요소를 사용할지 확실하지 않을 때, 하나의 단순한 질문을 하세요: 이것은 무엇인가? 어떻게 보이는지가 아니라, 그것은 무엇인가. 대답은 보통 요소의 이름을 당신에게 말해줍니다. 상단에 걸쳐있는 링크 행은 네비게이션이므로, 그것은 <nav>입니다. 하단의 작은 글씨 블록은 푸터이므로, 그것은 <footer>입니다. 색칠하길 원하는 가격은 정말로 아무것도 아니므로, 그것은 <span>입니다.

의미에서 시작하고, 실제 답변이 "그것은 단지 박스이다"일 때만 <div> 또는 <span>으로 폴백하세요. 이 습관을 일찍부터 들이면 당신의 페이지는 자신을 설명하고, 그것은 당신이나 다른 누구든 다시 마크업을 읽어야 할 순간부터 보상됩니다.

올바른 요소를 선택하는 것은 당신이 매번 실행할 수 있는 짧은 결정입니다. 콘텐츠가 무엇인지 묻고, 대답이 요소를 선택하게 하세요:

• 그것이 혼자 의미가 있을 자체 완전한 것인가? <article>.
• 제목이 있는 관련된 내용의 그룹화된 덩어리인가? <section>.
• 그것이 네비게이션인가? <nav>. 영역에 소개인가? <header>. 마무리인가? <footer>.
• 그것이 주요 콘텐츠를 지원하는 옆 콘텐츠인가? <aside>.
• 의미가 없고, 단지 레이아웃이나 스타일링 필요인가? <div>, 또는 행 내부의 <span>.

가장 까다로운 갈래는 <section>과 <article> 대비 <div>입니다. 순서대로 걸으세요. 블록이 혼자 설 수 있다면, 그것은 <article>입니다. 아니지만 그것이 자신의 제목이 있는 테마 그룹이라면, 그것은 <section>입니다. 제목이 없고 의미가 없으며 스타일링이나 배치만을 위해 존재한다면, 그것은 <div>입니다. <section>은 거의 항상 제목을 가져야 합니다; 그를 위한 것을 생각할 수 없다면, 그것은 당신이 <div>를 원했다는 강한 힌트입니다.

<main>
  <section>
    <h2>최신 게시물</h2>
    <article>
      <h3>왜 나는 순수 HTML로 전환했는가</h3>
      <p>...</p>
    </article>
    <article>
      <h3>무거운 프레임워크에 대한 경우</h3>
      <p>...</p>
    </article>
  </section>
</main>

여기서 <section>은 "최신 게시물"이라는 테마 그룹이고, 내부의 각 게시물은 <article>입니다. 왜냐하면 그것이 혼자 있습니다. 중첩은 의미를 반영합니다.

좋게 선택하는 것은 의미를 먼저 읽고 레이아웃은 절대 읽지 않는 것으로 귀결되지만, 몇 가지 규칙은 일반적인 결정을 기계적으로 만듭니다.

페이지당 정확히 하나의 <main>이 있습니다. 그것은 주요 콘텐츠, 사이트 전체에서 반복되는 헤더, nav, 푸터보다는 이 페이지만의 부분을 표시합니다. 접근성 트리에 두 개 이상의 <main>이 있으면 스크린 리더 사용자에게 두 "main" 대상과 어느 것이 진정한 것인지 알 수 없게 합니다, 그래서 그것을 단수로 유지하세요. 모든 사이트 전체 것은 그것 밖에 속합니다.

반복적으로 중요한 다른 규칙은 **반복된 랜드마크 라벨링**입니다. 페이지가 같은 랜드마크 유형의 두 요소를 가질 때, 기본 <nav>와 페이지 내 목차, 둘 다 "navigation"으로 발표되고 사용자가 그들을 구분할 수 없습니다. 당신은 aria-label로 명확히 합니다, 화면에 아무것도 보여주지 않으면서 영역을 위한 짧은 접근 가능한 이름을 제공하는 속성:

<nav aria-label="Primary">
  <a href="/">홈</a>
  <a href="/blog">블로그</a>
</nav>

<nav aria-label="이 페이지에">
  <a href="#intro">소개</a>
  <a href="#setup">설정</a>
</nav>

이제 두 영역은 "Primary navigation"과 "On this page navigation"으로 발표되고, 랜드마크 목록은 사용 가능합니다. 반복된 모든 랜드마크, <aside> 또는 <section>을 포함하여 동일한 라벨링을 적용하세요. <section>의 경우, 연관된 제목이나 aria-label에서든 접근 가능한 이름을 갖게 되면 한 번만 랜드마크가 된다는 것을 기억하세요.

이 모든 것 뒤의 메타 규칙: 마크업은 문서의 기계 가독 설명입니다, 스크린 리더, 검색 크롤러, 리더 모드 도구, 그리고 당신의 미래 자아로 읽혀질. 의미에 의해 요소를 선택하는 것은 그 설명을 진실되게 만드는 것입니다. 레이아웃은 CSS의 일이고, 요소가 어떻게 보이는지 선택할 때마다 당신이 CSS의 차선에 있으려고 하면, 당신이 잘못된 도구를 사용했습니다.

Juno올바른 요소 선택하기 막혔을 때, 그것이 어떻게 보이는지가 아니라 그것이 무엇인지 묻습니다. 네비게이션은 <nav>이고, 작은 글씨는 <footer>이며, 스타일링하길 원하는 평범한 박스는 <div>입니다. 매번 의미에서 시작하고, 당신의 페이지는 자신을 설명하는 것으로 끝납니다.

Juno올바른 요소 선택하기 작은 체크리스트를 실행하세요: 혼자 서 있는 것은 <article>, 제목이 있는 테마 그룹은 <section>, 의미가 없고 스타일링만은 <div>입니다. 대부분의 section-versus-div 논쟁을 해결하는 tie-breaker: 그를 위한 제목을 이름 지을 수 없다면, 당신은 <div>를 원했습니다. 의미가 태그를 선택하게 하고 중첩이 자신을 정렬합니다.

Juno올바른 요소 선택하기 두 규칙이 대부분의 무게를 담습니다: 페이지당 정확히 하나의 <main>, 두 nav가 "navigation"이라고 모두 말하지 않도록 aria-label로 반복된 랜드마크를 라벨합니다. <section>은 접근 가능한 이름을 갖게 되면 랜드마크만이라는 것을 기억하세요. 의미에 의해 요소를 선택하고 모양은 CSS에 남겨두세요, 왜냐하면 태그를 렌더링하는 방식으로 선택하는 순간, 당신은 잘못된 도구로 CSS의 일을 하고 있기 때문입니다.