develope_kkyu

[CSS] CSS 우선순위 본문

FrontEnd/CSS

[CSS] CSS 우선순위

developekkyu37 2022. 12. 22. 11:39
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 우선순위</title>
    <style>
        #human1 {
            background-color: red;
        }
        .human2{
            background-color: green;
        }
        h1{
            background-color: yellow;
        }
        .c1{
            background-color: blue;
        }
        .c2{
            background-color: orange;
        }
        .c3{
            background-color: purple;
        }
        h2[id]{
            /* h2 tag중 id가 있는 문서만 적용되는 스타일 */
            background-color: brown;
        }
        h2[id="human02"]{
            /* h2 tag중 id가 있는 문서만 적용되는 스타일 */
            background-color: rgb(8, 212, 226);
        }
        h3[dir="a"]{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1> 안녕하세요1 </h1>
    <h1> 안녕하세요2 </h1>
    <h1 id="human1">안녕하세요3</h1>
    <h1 class="human2">안녕하세요4</h1>
    <h1 class="human2">안녕하세요5</h1>
    <h1 id="human1" class="human2">안녕하세요</h1>

    <h1 id="i1" class="c1" >안녕1</h1>
    <h1 id="i2" class="c1" >안녕2</h1>
    <h1 id="i3" class="c1" >안녕3</h1>
    <h1 id="i4" class="c2" >안녕4</h1>
    <h1 id="i5" class="c2" >안녕5</h1>
    <h1 id="i6" class="c2" >안녕6</h1>
    <h1 id="i7" class="c3" >안녕7</h1>

    <ol>
        <li>1순위 : 태그 개별적으로 적용하기 위해서는 id 기준으로 style을 처리</li>
        <li>2순위 : 부분 집학적으로 적용하기 위해서는 class 기준으로 style을 처리</li>
        <li>3순위 : Tag 전체의 내용을 적용하기 위해서는 Tag 기준으로 style을 처리</li>
    </ol>
    <br>
    <br>
    <br>
    <h2> 안녕하세요11</h2>
    <h2 id="human01">안녕하세요12</h2>
    <h2 id="human02">안녕하세요13</h2>
    <h3 dir="a">안녕하세요14</h3>
</body>
</html>

--

728x90

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] 포지션 연습  (0) 2022.12.22
'FrontEnd/CSS' Related Articles more