🔵 CSS - basic selecter

jea_i·2022년 2월 7일

목록 보기

2/19

<body>
    <h2>기본 선택자 알아보기</h2>
    <!-- 첫 문자 사용가능한 특수문자 : _ , $ ; 제이쿼리에 사용함 지금은 안함-->
    <p id="hcopy">
        속성이 적용될 요소를 특정하는 방법입니다.
        <br>이를 선택자라 하고 선택자의 그룹기호 안에 속성며오가 값을 지정하여 속성을 요소에 적용합니다.
    </p>
    <hr>
    <!-- ol>li*5>h4+p -->
    <ol>
        <li class="bcopy01">
            <h4>전체선택자 *{}</h4>
            <p>
                문서에 사용되는 모든 요소를 선택합니다.
            </p>
        </li>
        <li class="bcopy02">
            <!--element 태그이름ㄴ-->
            <h4>태그,요소,타입선택자 element{}</h4>
            <p>
                문서에 사용되는 요소중에서 특정된 요소들만 선택합니다.
            </p>
        </li>
        <li class="bcopy03">
            <h4>아이디선택자 #idName{}</h4>
            <p>
                요소의 id특성의 값으로 사용된 이름으로 선택합니다.
                <br>식별기호로 #(크로스해치, 해시마크, 샵)이 이름앞에 사용되어 아이디를 식별하게 됩니다.
            </p>
        </li>
        <li class="bcopy04">
            <h4>클래스 선택자 .className{}</h4>
            <p>
                요소의 클래스특성의 값으로 사용된 이름으로 요소를 선택합니다.
                <br>식별기호로 .(피리어드, 닷)이 이름 앞에 사용되어 클래스를 식별하게 됩니다.
            </p>
        </li>
        <li class="bcopy05">
            <h4 class="abc">종속선택자 element.className{}</h4>
            <p class="abc">
                서로다른 선택자 두가지 이상을 함께 사용하여 선택된 요소를 좀 더 강하게 선택합니다.
            </p>
        </li>
    </ol>
    <fieldset>
        <h3>적용방식간에 따른 우선순위</h3>
        <!-- 대부분이 외부정의방식만 사용함 -->
        <h4>인라인 적용방식&gt;내부정의방식&gt;외부정의방식</h4>
    </fieldset>
    <fieldset>
        <h5 id="idName" class="clName">선택자에 따른 우선순위</h5>
        <h4><i>아이디선택자&gt;</i>i종속선택자&gt;클래스선택자&gt;태그선택자&gt;전체선택자</h4>
        <p>
            기본선택자 다섯 가지에서는 강하게 적용되거나 약하게 적용되는 우선순위가 있습니다.
            <br>강하게 적용된 속성은 약하게 적용된 속성을 바꿀 수 없습니다.
        </p>
        <ol>
            <li>같은 선택자의 경우 나중에 적용된 선택자에 강한 우선순위가 있습니다.</li>
            <li>클래스선택자는 태그선택자보다 우선순위가 강합니다.</li>
            <li>종속선택자는 클래스선택자보자 우선순위가 강합니다.</li>
            <li>아이디선택자는 종속, 클래스, 태그선택자보다 우선순위가 강합니다.</li>
        </ol>
    </fieldset>
</body>

<style>
*{font-family: 'aNoto sans KR';}
h2{font-family: "Noto serif KR";}
h4{font-family: "Noto sans KR";}
#hcopy{color: #cccccc;}
.bcopy01{background-color:darkgray;}
.bcopy02{background-color:darkgreen;}
.bcopy03{background-color:darkseagreen;}
.bcopy04{background-color: darkgoldenrod;}
.bcopy05{background-color:tan;}
.abc{
    color:steelblue;
}
/* h4요소 중 클래스이름이 abc인 요소를 선택합니다.*/
h4.abc{color: seagreen;}
h5{color: blueviolet;}
#idName{color: darkgray;}
.clName{color: cornflowerblue;}
h5{color: cadetblue;}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵 CSS - summary

다음 포스트

🔵 CSS - basic selecter

CSS

🔵 CSS - summary

🔵 CSS - font style

0개의 댓글

관련 채용 정보