HTML&CSS 11일차 (정리x)

💜 HTML,CSS
HTML&CSS 11일차 (정리x)

Genie_. 2024. 3. 23. 21:58
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클래스_아이디_여러개</title>
</head>
<style>
    div, section, article{ /* 모두 다 선택할 때
                            주의: ,(콤마) 확인!! 없으면 하위선택자가 되어버림! */
        color: green;

    }
    .num2 { /* num2 클래스 값을 가진 모든 요소를 선택 */
        color: red;
    }
    article.num2{
      /* article이면서 num2 클래스값인 요소 전부 선택
      article.num2 << 띄어쓰기 절대!! 하지않기 조심!! */
        color: darkgoldenrod;
    }
    .bold{
      font-weight: bold;
    }
    /* number4라는 id가 부여된 요소에게 적용해! 난 강력하다(클래스 이름보다 id가 우선적용) */
    /* CSS는 정확하게 표현할 수록 우선이 된다. */
    /* ID는 웹 페이지 하나당 무조건 하나(그 id가 부여된 요소가 하나라는 뜻) */
    #number4{
      font-size: 30px;
    }
    section{
      font-size: 10px;
    }

</style>
<body>
    <div>1</div>
    <div class="num2">2</div>
    <div>3</div>
    <div>4</div>
    <section>1</section>
    <section class="num2 bold">2</section>
    <!--num2 bold는 한개의 클래스가 아니고, 2개의 클래스 -->
    <section>3</section>
    <section id="number4">4</section>
    <article>1</article>
    <article class="num2">2</article>
    <article>3</article>
    <article>4</article>

</body>
</html>
728x90
저작자표시 비영리 변경금지