HTML5 요소 스타일 지정

Question

<section> 태그의 스타일을 지정하는 것이 맞지만 <header> 및 <footer> 태그는 어떨까요? 이러한 태그를 사용하면 의미 론적 마크 업이 더 많이 사용되지만 스타일을 지정할 수없는 경우에는 <div>을 태그 안에 삽입하여 내용을 래핑하고 스타일을 지정해야합니다.

나는 <header>을 스타일링 할 수 있다고 알고 있지만 그렇게 할 만한지 확실하지 않습니다.

그래서 질문 : html5 태그의 스타일을 지정해야합니까? 아니면 <div>의 스타일을 처리해야합니까?

Answer 1

<section> 또는 <article>과 같이 HTML5 요소의 스타일을 지정하거나 지정할 수 없습니다.을 위해 뭔가 의미있는 HTML5 요소를 ''에 배치하면 안됩니다. 대신 <div>을 사용하십시오. 당신이 추가 할 수있는 의미 론적 이유가있는 경우

는 그래서 <section> 또는 <article> 어딘가에, 모든 수단으로는 및 또한뿐만 아니라 그 스타일을 자유롭게 추가 할 수 있습니다. 그러나 스타일을 지정하기 위해 마크 업 부분을 감싸 야 할 경우 (예 : 경계선을 추가하거나 왼쪽으로 띄우는 등) 마크 업에서 의미 론적 의미가없는 섹션은 <div>을 사용하십시오 . 예를 들어

:

<div class="mainBox"> 
    <nav class="breadcrumbs"> 
     <ol> 
      <li>...list of links (snip)....</li> 
     </ol> 
    </nav> 

    <section> 
     <h1>Latest Tweets From Twitter</h1> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     //... lots more Twitter posts (snip)... // 

    </section> 

</div> 

<section> 요소는 페이지 (. 즉, 트윗의 목록)의 주요 부분이며이 필요 시작할 때 제목을 가지고있다. 그러나 div.mainBox 엘리먼트에 싸여 있습니다. breadcrumbs와 섹션 파트 둘레에 테두리를 감싸기를 원하기 때문입니다. 그것은 스타일링을위한 것입니다. 그러나 <section> 및 <article> 요소를 스타일링하는 것을 막을 수있는 방법은 없습니다.

Answer 2

이러한 태그의 스타일을 잘못 지정하지는 않지만 의미 론적 기능을 제공하기 때문에 스타일을 지정하는 것이 아닙니다. 꼭 필요한 요소에 스타일을 지정하고 스타일을 달성하기 위해 요소를 추가하지 않아도되므로 의미를 망칠 수 있습니다.

당신은 또한 모든 브라우저에서 인식되지 않기 때문에 스타일을 지정해야한다고 말한 적이 있습니다. 예를 들어 IE6과 7은 요소 이름을 인식하지 못하기 때문에 스타일을 적용하지 않습니다. ARIA 태그를 사용하여 IE7에서이 기능을 사용하면 스타일을 제어 할 수 있습니다.