CSS와 HTML 사용에 대한 일반적인 오해

이번에는 CSS와 HTML을 사용할 때 흔히 발생하는 오해에 대해 알려드리겠습니다. CSS와 HTML을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

신화 1. 폴립 증후군

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

위에서 언급한 중복된 p 태그 사용을 "폴립 증후군"이라고 하며 다음과 같이 단순화해야 합니다.

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

신화 2. 다중 클래스 증후군 참고 해당 클래스는 페이지의 여러 요소에 적용될 수 있으며 이는 콘텐츠 유형 또는 기타 유사한 항목을 식별하는 데 매우 적합합니다

뉴스(뉴스 제목, 뉴스 세부정보)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

news-head 및 news- 사용 위의 클래스 이름에 대한 텍스트입니다. "polyclassism" 성능이므로 요소 스타일을 구별하기 위해 너무 많은 클래스가 필요하지 않습니다.

의미가 없는 것보다 부분을 나타내는 데 p(pision)를 사용하는 것이 좋습니다. (대부분의 사람들은 p가 의미가 없는 것으로 오해합니다!!!) 실제로 p는 문서를 여러 의미 있는 영역으로 나눌 수 있습니다.

클래스 이름 news 전체 뉴스 항목을 식별합니다. 그런 다음 캐스케이드 스타일을 사용하여 뉴스 제목과 텍스트를 식별할 수 있으며, 다음과 같이 수정해야 합니다

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

span to group또는 인라인 요소

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

오해 3. ID 사용에 대한 오해 페이지 요소(예: 사이트 탐색, 머리글, 바닥글)에서 특정 항목을 식별하는 데 사용되며 고유해야 하며 지속적인 구조 요소(예: 기본 탐색, 콘텐츠 영역)를 식별하는 데에도 사용할 수 있습니다. 페이지의 특정 요소(예: 사이트 탐색, 머리글, 바닥글)를 식별하는 데 사용되며 고유해야 하며 지속적인 구조 요소(예: 기본 탐색, 콘텐츠 영역)를 식별하는 데에도 사용할 수 있습니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨습니다. 더 흥미로운 정보를 보려면 오셔서 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

바이두 티에바

css3의 3D 뒤집기 효과로 애니메이션 자전거 효과

구현

위 내용은 CSS와 HTML 사용에 대한 일반적인 오해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!