CSS 복합 선택자로 HTML 꾸미기 (class, id 사용하지 않기)

날짜 : 2017. 6. 13()

목표 : CSS 복합 선택자로 HTML 꾸미기 (class 사용하지 않기)

• class를 사용하면 원하는 tag에 속성을 꾸밀수 있다.
• 하지만 홈페이지가 복잡하면 class가 많아지기 시작한다. (CSS 코드가 길어진다.)
• 여러명이 작업을 할 때 클래스명이 중복되는 경우가 발생한다.

- 그래서 class로 선택을 하는 것이 아닌 복합선택자로 CSS를 작성해 보자.

수행결과 : 단순히 div를 여러번 반복을 하면 문제가 발생한다. 자연스러운 시멘틱 웹을 작성 해야 한다.

최초 작성한 HTML 코드

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

변경한 HTML 코드

<section>
    <article>
        <p></p>
        <h1></h1>
        <h2></h2>
        <h3></h3>
    </article>
</section>
<section>
    <article>
        <p></p>
        <h1></h1>
        <h2></h2>
        <h3></h3>
    </article>
</section>

CSS : div div:nth-child(1) div:nth-child(1)

이렇게 선택자를 작성하는 경우 원하지 않는 TAG가 선택을 된다.

이를 해결하기 위하여 각 div를 다른 태그로 작성을 한다.

참고사이트

• NEXTREE 블로그