[ex34~37] CSS(selector-nth:child,접은글,::before)

대장쿵야 2023. 4. 18. 09:51

ex34

가상 클래스
1. :first-child > 자신이 자신의 그룹에서 첫번째 자식인지?
2. :last-child > 자신이 자신의 그룹에서 마지막 자식인지?
3. :nth-child() > 1부터 시작
4. :nth-last-child() > 뒤에서부터

n
1. 숫자: index(위치) > 1부터 시작
2. 수열: 2n, 2n+1 (0부터 시작)
3. 수열: even, odd

코드

    <style>

        li:nth-child(odd) {
            color: orange;
        }




        /* 
        li:first-child {
            color: orange;
        }

        li:last-child {
            color: coral;
        }

        li:nth-child(3) {
            color: blue;
        }

        li:nth-last-child(3) {
            color: gold;
        } 
        */

        .tbl {
            border: 1px solid black;
            border-collapse: collapse;
        }

        .tbl td {
            border: 1px solid black;
            padding: 5px;
        }

        /* .tbl tr:first-child {
            background-color: gold;
        } */

        /* 모든 td들의 첫째들 > 첫번째열 */
        /* .tbl td:first-child {
            background-color: tomato;
        } */
        
        /* 다섯번째열 */
        /* .tbl td:nth-child(5) {
            background-color: tomato;
        } */

        /* 짝수행 */
        /* .tbl tr:nth-child(even) {
            background-color: #DDD;
        } */

        /* 짝수행이면서 홀수열 */
        .tbl tr:nth-child(even) td:nth-child(odd) {
            background-color: gold;
        }
        
        /* 홀수행이면서 짝수열 */
        .tbl tr:nth-child(odd) td:nth-child(even) {
            background-color: gold;
        }

        
    </style>
</head>
<body>
    <!-- ex34_selector.html -->

    <h1>목록</h1>

    <ul class="list1">
        <li>강아지</li>
        <li>고양이</li>
        <li>다람쥐</li>
        <li>소</li>
        <li>돼지</li>
        <li>말</li>
        <li>코끼리</li>
        <li>사자</li>
        <li>호랑이</li>
        <li>늑대</li>
    </ul>

    <h1>테이블</h1>

    <!-- table.tbl>tr*20>td{item}*10 -->
    <table class="tbl">
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
    </table>

</body>
</html>

화면

강아지
고양이
다람쥐
소
돼지
말
코끼리
사자
호랑이
늑대

테이블

item	item	item	item	item	item	item	item	item	item
item	item	item	item	item	item	item	item	item	item
item	item	item	item	item	item	item	item	item	item
item	item	item	item	item	item	item	item	item	item

ex35

속성 선택자
1. 선택자[속성명] : 해당 속성을 명시했는지?
2. 선택자[속성명=값] : 해당 속성과 값을 명시했는지?
3. 선택자[속성명^=값] : 속성값이 값으로 시작하는지?
4. 선택자[속성명$=값] : 속성값이 값으로 끝나는지?
5. 선택자[속성명*=값] : 속성값이 포함되는지?

/* target 속성을 가지고있는 a 태그 */
.list a[target] { background-color: gold;}
/* 속성값 조건  */
.list a[target=_blank] { background-color: gold;}
/* 속성값이 ~로 시작하는지 */
.list a[href^=https] { background-color: gold;}
/* 속성값이 ~로 끝나는지 */
.list a[href$='.com'] { background-color: gold;}
/* 속성값에 ~값이 포함되는지 */
.list a[href*=m] { background-color: gold;}

ex36

접기

코드

<!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>Document</title>
    <style>
        .list input[type=text] {
            display: block;
            border: 1px solid #555;
            padding: 3px;
            margin-bottom: 3px;
            background-color: white;
            color: #444;
            outline: none;
        }

        /* optional : required가 아닌것 */
        /* .list input[type=text]:required { background-color: gold; } */
        /* .list input[type=text]:optional { background-color: #CCC; } */

        /* .list input[type=text]:disabled { background-color: #999; }
        .list input[type=text]:enabled { background-color: gold; } */

        /* .list input[type=text]:read-only { cursor: not-allowed; }
        .list input[type=text]:read-write { background-color: gold; } */
        

        input[type=checkbox] {
            /* 거의 안됨 */
            /* border: 1px solid black; */
            /* background-color: blue; */

            /* width: 200px; */

            /* 불투명도(0~1) */
            /* opacity: 0.2; */
        }

        input[type=checkbox]:checked {
            opacity: 1;
        }

        .cb-cat + .cat {
            visibility: hidden;
        }
        
        .cb-cat:checked + .cat {
            visibility: visible;
        }

        .cb1 + div {
            /* visibility: hidden; */

            /* 안보일때 공간 차지x */
            display: none;
        }
        
        .cb1:checked + div {
            /* visibility: visible; */
            display: block;
        }


        .item {
            border: 1px solid #555;
            width: 200px;
        }

        .item #cb2 {
            display: none;
        }

        .item label {
            font-size: 1.5rem;
            font-family: Arial;
            font-variant: small-caps;
            display: block;
            padding: 10px;
            background-color: greenyellow;
            cursor: pointer;
        }

        .item div {
            padding: 12px;
            border-top: 1px solid #555;
            display: none;
        }

        .item #cb2:checked + label {
            background-color: gold;
        }

        /* cb2가 체크되면 형제인 label의 형제인 div가 보인게 */
        .item #cb2:checked + label + div {
            display: block;
        }


        
    </style>
</head>
<body>
    <!-- ex36_selector.html -->

    <div class="item">
        <input type="checkbox" class="cb2" id="cb2">
        <label for="cb2">Html</label>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur architecto et magni dolores eligendi harum ducimus odio quos sed quod dolorum error consectetur rem, libero cupiditate repellendus rerum voluptatem vero!</div>
    </div>



    <hr>

    제목 <input type="checkbox" class="cb1">
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, commodi ab! Molestias tempora tenetur nesciunt quod numquam recusandae quibusdam, dolore perferendis maxime esse quisquam dignissimos quos ipsa odit optio delectus.</div>

    <details>
        <summary>제목</summary>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita neque deleniti impedit! Vel voluptatibus quo magnam in, nobis, quod ex culpa, error asperiores odio ut voluptatum exercitationem nesciunt. Delectus, ad.</p>
    </details>

    <div>
        <input type="checkbox" class="cb-cat">
        <img src="images/catty01.png" class="cat">
    </div>

    <div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>

    <div class="list">
            <input type="text" value="1" required>
            <input type="text" value="2" readonly>
            <input type="text" value="3" readonly>
            <input type="text" value="4">
            <input type="text" value="5" required>
            <input type="text" value="6" disabled>
            <input type="text" value="7" disabled>
            <input type="text" value="8">
            <input type="text" value="9">
            <input type="text" value="10" required>
    </div>
</body>
</html>

화면

Document

Html

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur architecto et magni dolores eligendi harum ducimus odio quos sed quod dolorum error consectetur rem, libero cupiditate repellendus rerum voluptatem vero!

제목

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, commodi ab! Molestias tempora tenetur nesciunt quod numquam recusandae quibusdam, dolore perferendis maxime esse quisquam dignissimos quos ipsa odit optio delectus.

제목

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita neque deleniti impedit! Vel voluptatibus quo magnam in, nobis, quod ex culpa, error asperiores odio ut voluptatum exercitationem nesciunt. Delectus, ad.

ex37

CSS 선택자(가상 클래스)
1. :first-child
    - 가상 클래스
    - 검색된 태그 자체를 조작
2. ::before
    - 가상 요소(Element)
    - 검색된 태그 주변을 조작

전후 선택자
1. ::before(:before)
2. ::after(:after)

전체코드

<!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>Document</title>
    <style>

        span {
            color: blue;
        }

        span::before {
            content: '[';
        }
        span::after {
            content: ']';
        }

        /* 앞에 삽입 */
        /* span::before {
            content: '홍길동';
            color: orange;
            font-weight: bold;
            font-size: 1.5rem;
        }
        /* 뒤에 삽입 */
        /* span::after {
            content: '아무개';
            color: pink;
        } */ 

        /* 공백제거 방법1 > font-size: 0; */
        /* #list {
            font-size: 0;
        }
        
        #list div {
            width: 100px;
            height: 100px;
            display: inline-block;
            font-size: 1rem;
        } */
        
        
        /* 공백제거 방법2 > float */
        #list .item {
            width: 100px;
            height: 100px;
            float: left;
        }

        /* float 뒷처리 용도 */
        #list::after {
            content: '';
            display: block; /* clear는 블럭태그에만 붙일 수 있음*/
            clear: left;
        }


        #list div:nth-child(1) { background-color: tomato;}
        #list div:nth-child(2) { background-color: gold;}
        #list div:nth-child(3) { background-color: cornflowerblue;}
        #list div:nth-child(4) { background-color: greenyellow;}
        #list div:nth-child(5) { background-color: plum;}



    </style>
</head>
<body>
    <!-- ex37_selector.html -->
    <p>Lorem <span>ipsum</span> dolor sit amet consectetur, adipisicing elit. Eaque assumenda eligendi <span>porro</span> rerum consequuntur? Dolor, nihil <span>doloribus</span>. Dolore culpa error cum unde amet voluptas atque libero, eius qui in eveniet!</p>

    <hr>

    <div id="list">
        <div class="item">빨강</div>
        <div class="item">노랑</div>
        <div class="item">파랑</div>
        <div class="item">초록</div>
        <div class="item">보라</div>
        <!-- <div style="clear:left;"></div> -->
    </div>

    <div>다른 내용들..</div>

</body>
</html>