728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .container {
            width: 300px;
            margin: 0 auto;
            border: 1px solid black;
        }

        ul li {
            margin: 15px;
        }

        li.new::after {
            content: 'NEW!';
            font-size: x-small;
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background-color: red;
            color: white;           
            
        }
        

    </style>
</head>
<body>
    <div class="container">
        <h1>제품 목록</h1>
        <ul>
            <li class="new">제품 A</li>
            <li>제품 B</li>
            <li>제품 C</li>
            <li class="new">제품 D</li>
        </ul>    
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

teansform2  (0) 2022.12.29
teansform기본  (1) 2022.12.29
가상선택자2  (0) 2022.12.29
가상 선택자  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        #container {
            text-align: center;
        }

        table, tr, td{
            border: 1px solid black;
        }

        table{
            width: 200px;
            margin: 0 auto;
            border-collapse: collapse;

        }
        /* table 안에 있는 tr 전부 중 2n+1 번째 (-> 홀수 번쨰 ) 요소만 적용해 주세요*/
        table tr:nth-of-type(2n + 1){
            background-color: gray;
        }

        h1::after {
            display: block;
            color: red;
            content: '여기는 테이블 입니다.';
        }



    </style>
</head>
<body>
    <div id="container">
        <h1>웹개발</h1>

        <table>
            <tr><td>HTML</td></tr>
            <tr><td>java</td></tr>
            <tr><td>CSS</td></tr>
            <tr><td>Node</td></tr>
            <tr><td>python</td></tr>
        </table>


    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

teansform기본  (1) 2022.12.29
가상선택자3  (0) 2022.12.29
가상 선택자  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* div {
            background-color: cadetblue;
            
        } */
        
        /* div:hover {
            background-color: aqua;
        } */
        
        body > div > a:nth-child(odd) {
            /* 
                odd : 홀수번째 모두 선택
                even : 짝수번째 모두 선택 
            */
            color: gold;
        }
        body > label:hover {
            color: cornflowerblue;
        }
        /* body 자식 태그 중, agree 라는 클래스를 가지는 요소의 자식 중 input 테그인데, type속성이 checkbox 인거 그리고 그 체크박스가 체크가 되어있을 때, 그 인접 선택자 중 warning 이라는 클래스 속성을 가지는 요소에 적용해라 */
        body > .agree > input[type=checkbox]:checked ~ .warning {
            /* 
                display : none 과 다름
                눈에만 안보이게 하고 공간은 여전히 차지하게 하세요. 
            */
            visibility: hidden;
        }


        /* body 안에 div의 자식에서 a테그 중, 첫번째 자식 요소(첫번째 a태그) 를 선택 */
        body > div > a:first-child {
            color: cadetblue;
        }
        /* body 안에 div의 자식에서 a테그 중, 세번째 자식 요소(두번째 a태그 > br도 포함해야됨) 를 선택 */
        body > div > a:nth-child(3) {
            color: dodgerblue;
        }

        body > div > a:last-child {
            color: red;
        }

        /* div의 자식 중, 홀수 번째 요소중에서 첫번째와 마지막 요소를 제외한 요소에 적용시켜주세요. */
        body > div > a:nth-child(odd):not(:first-child):not(:last-child):hover{
            color: lightpink;
            font-size: 40px;
            text-decoration: dashed;
        }

    </style>
</head>
<body>
    <label class="agree">
        <input type="checkbox">
        <span>위 약관을 읽어보았고 동의합니다.</span><br>
        <span class="warning">위 약관을 읽고 동의해 주세요.</span>
    </label>
    <div>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a><br>
        <a>HELLO</a>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

가상선택자3  (0) 2022.12.29
가상선택자2  (0) 2022.12.29
그라데이션 응용  (0) 2022.12.29
radial그라데이션  (0) 2022.12.29
linear그라데이션  (0) 2022.12.29

+ Recent posts

728x90
반응형
">

티스토리툴바