>

div에 스타일을 추가하는 것처럼 HTML 5 시맨틱 (탐색, 머리글, 바닥 글 등)에 스타일을 추가하는 것이 옳습니까? 일반 div 대신 사용 하시겠습니까?

한번 내가 존경하는 누군가로부터 소식을 들었을 때, HTML 5 의미 요소에 어떤 스타일도 추가해서는 안된다. 단지 필요한 경우에만이 요소에 많은 스타일을 추가하지 말아야한다. 그가 맞습니까?

예를 들어

<nav>
    <ul>
        ................
    <ul>
</nav>

nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

대신

<nav>
    <div id="nav">
        <ul>
            ................
        <ul>
    </div>
</nav>

#nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

어떻게해야합니까? 이것을 코딩하는 올바른 방법은 무엇입니까? 그것을 처리하는 완벽한 방법은 무엇입니까?

  • 답변 # 1

    동의합니다. 시맨틱 요소에 스타일을 추가하지 마십시오. 이것은 우리가 사물이 어떻게 보이는지에 대해 말할 때 이러한 요소가 새로운 것을 추가하지 않기 때문입니다.

    중복을 피하고 싶다는 것을 기억하십시오. 블록 요소가 필요한 경우 '모양'에 대해 생각하고 있으므로 div를 사용하고 스타일을 지정하십시오. 그런 다음 해당 div 안에 즉시 원하는 의미 요소를 추가하십시오. 의미 요소를 CSS와 CSS에서 또는 자바 스크립트에서 가능한 한 숨겨 두십시오. 그러나 이러한 의미 요소를 표시하는 사용자 정의 클래스를 추가하는 것이 명확합니다.

    대신

    div > * h1,
    
    

    당신은 다음과 같이 쓸 것입니다 :

    div > .semanticElement h1.
    
    

    시맨틱 요소를 참조하지 않으면 서 명확성을 위해 더 좋을 것입니다.

    위의 일부에 대한 이유가 명확하지 않다면, 이런 식으로 생각하십시오. 하나의 요소에 대한 의미 론적 변경으로 인해 갑자기 CSS와 자바 스크립트도 변경해야합니다. 이는 터무니없는 것입니다.

  • 답변 # 2

    구조/콘텐츠 (html 코드)를 스타일은 정확하게이 능력을 제공하고 실제로이 방향으로 당신을 운전합니다.

    이 구조는 여러 장치가 사용자에게 더 나은 경험을 제공하기 위해 콘텐츠를 더 잘 이해할 수있는 기능을 제공합니다. 예를 들어- ul > li 를 사용하는 경우  메뉴 구조, 일반 브라우저가 아닌 일부 장치는 nav > ul > li 를 사용하는 동안 웹 사이트의 메뉴임을 완전히 이해할 수 없습니다.  정확하게 알려줍니다.

    스타일은 기기에 표시 방법 만 알려주므로 사용자에게 더 나은 경험을 제공하기 위해 사용해야합니다.

    의미 적 요소는 다음과 같이 페이지 구조를 분리하는 데 도움이됩니다.

  • 답변 # 3

    글쎄, HTML5 시맨틱 (탐색, 헤더, 바닥 글 등은 웹 페이지의 섹션에 의미 있고 자기 설명적인 이름을 제공 할 수 있도록 만들어졌습니다. 그들은 독특 할 것으로 예상된다.

    이러한 의미론이 도입되기 전에 섹션은 다음과 같이 수행되었습니다 :

    <div id="main-section">
      your content
    </div>
    <div id="sidebar">
      your sidebar content
    </div>
    
    

    HTML5 시맨틱은 위와 같은 상황에서 우리를 구해 주면서도 설명해 주어야했습니다.

    위와 같은 섹션에 스타일이 추가되었는데 왜 지금 같은 작업을 수행 할 수 없는지 모르겠습니다. HTML5 시맨틱에 스타일을 추가하는 것에 대한 규칙은 없지만 HTML5 시맨틱이 처음에 고유 한 요소에 사용되도록해야합니다.

  • 이전 html - 자바 스크립트 아코디언 - 하나를 선택하면 다른 섹션 축소
  • 다음 java - 최종 클래스의 Powermock 정적 최종 방법