🔵CSS - hier selector

jea_i·2022년 2월 7일

목록 보기

5/19

<body>
    <h2>계층선택자 알아보기</h2>
    <p>
        트리구조 형태의 문서구조에서 특정요소를 선택할 떄 사용하는 선택자입니다.
    </p>
    <ul>
        <li>
            <h3>자식선택자 : 부모요소&gt;자식요소{}</h3>
            <p>
                부모요소를 기준으로 특정되는 자식요소를 선택합니다.
                <br>초급수업에서는 자식선택자를 우선으로 사용합니다.
            </p>
            <h3>ul&gt;li{}</h3>
        </li>
        <li>
            <!-- 조상 후손 사이의 띄어쓰기 꼭 하기!!-->
            <h3>후손선택자 : 조상요소 후손요소{}</h3>
            <p>
                조상요소를 기준으로 특정되는 후손요소를 선택합니다.
                <br>실제 업무에서 가장 많이 사용하는 선택자입니다.
            </p>
            <!--&nbsp; 공백표기, ul&gt;li{} 와 같은표현-->
            <h3>ul&nbsp;li{}</h3>
        </li>
    </ul>
    <ol>
        <li>
            <h4>동생(다음)선택자 : 형요소+동생(다음)요소{}</h4>
            <h3>h4+*{}</h3>
            <p>
                어느 요소를 기준으로 바로 다음에 오는 요소를 선택합니다.
            </p>
            <h3>h4+p{}</h3>
        </li>
        <li>
            <h4>형제선택자 : 형요소~동생들요소{}</h4>
            <p>
                어느 요소를 기준으로 그 이후에 오는 요소들 중에서 특정요소(들)를 선택합니다.
            </p>
            <h3>h4~p{}</h3>
            <h3>h4~h3{}</h3>
            <!--h4이후에오는 모든태그들; p,h3-->
            <h3>h4~*{}</h3>
        </li>
    </ol>
</body>

순서는 가장 큰 요소순으로 !
body의 자식요소로 크게 사용되는 영역을 wrapper라고 합니다.
wrapper는 종속선택자로 구분하여 표기합니다. ; 앞에 div. 붙임
부모요소와 자식요소의 너비가 같을 때 너비지정을 하지않는다.

jea_i

열정열정열정🔥

이전 포스트

🔵 CSS - text style

다음 포스트

🔵CSS - hier selector

CSS

🔵 CSS - text style

🔵CSS - boxmodel

0개의 댓글

관련 채용 정보