๐Ÿ“– Coding Study/์›น ๋””์ž์ธ

2023.05.01 ์›” (์„ ํƒ์ž)

๋นต๋ชจ๋ฃจ 2023. 5. 1. 22:10 

<!doctype html>
<html>

<head>
    <title>CSS Selector</title>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nanum Pen Script', cursive;
        }

        h1 {
            font-family: 'Black Han Sans', sans-serif;
        }

        /* ์—ฐ๊ฒฐ(๋ณตํ•ฉ)์„ ํƒ์ž */
        img+p {
            font-style: italic;
        }

        /* img์˜ ์ฒซ์งธ๋™์ƒ p ์„ ํƒ */
        p~span {
            color: red;
        }

        /*p์˜ ๋™์ƒ์ธ span๋“ค์„ ๋ชจ๋‘ ์„ ํƒ*/

        /* ์†์„ฑ ์„ ํƒ์ž */
        a[href] {
            color: red;
        }

        /* ๊ฐ’์ด ์ผ์น˜ํ•˜๋Š” ์š”์†Œ ์„ ํƒ */
        a[href="http://example.com"] {
            color: orange;
        }

        /* ๊ณผ ์†์„ฑ๊ฐ’์ด ์ผ์น˜ํ•˜๋Š” ์š”์†Œ ์„ ํƒ */
        a[href ^="#"] {
            color: green;
        }

        /* ๊ฐ’์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์š”์†Œ ์„ ํƒ */
        a[href $=".org"] {
            color: orchid;
        }

        /* ๊ฐ’์œผ๋กœ ๋๋‚˜๋Š” ์š”์†Œ ์„ ํƒ */
        a[href *="example"] {
            color: blueviolet;
        }

        /* ๊ฐ’์ด ๋“ค์–ด์žˆ๋Š” ์š”์†Œ ์„ ํƒ */
        a[href~="example"] {
            color: darkcyan;
        }

        /* ๊ฐ’์˜ ์•ž ๋’ค์— ๊ณต๋ฐฑ์ด ์žˆ๋Š” ํ˜•ํƒœ์˜ ์š”์†Œ ์„ ํƒ */

        /* ์ž…๋ ฅ์–‘์‹ ๋งŒ๋“ค ๋•Œ ์ž์ฃผ ์”€ */
        input[type="text"] {
            /* input ์–‘์‹ ์ค‘์— text ํƒ€์ž…์ธ ๊ฒƒ */
            background-color: skyblue;
        }

        /* ๊ฐ€์ƒ ํด๋ž˜์Šค ์„ ํƒ์ž */
        a:hover {
            background-color: orange;
        }

        a:link {
            color: red;
        }

        a:visited {
            color: darkgoldenrod;
        }

        a:active {
            color: darkgreen;
        }

        input:focus {
            /* ์ž…๋ ฅ๋ฐ•์Šค์ค‘์— ํ˜„์žฌ ๋งˆ์šฐ์Šค๋กœ ์„ ํƒ๋œ ๊ฒƒ ์ง€์ • */
            background-color: beige;
            border: 3px solid blue;
        }

        p:first-of-type {
            /*  */
            border-bottom: 2px dotted red;
        }

        li:first-child {
            background-color: aqua;
        }

        li:last-child {
            background-color: violet;
        }

        li:nth-child(2) {
            /* ๋‘ ๋ฒˆ์งธ ๊ฒƒ ์„ ํƒ. 2 ์ž๋ฆฌ์— ์ˆซ์ž๋ฅผ ๋„ฃ์–ด์„œ ์›ํ•˜๋Š” ๊ฒƒ ์„ ํƒ ๊ฐ€๋Šฅ. 2 ๋’ค์— n์„ ๋ถ™์ด๋ฉด ์ง์ˆ˜๋ฒˆ์งธ ์„ ํƒ 2n+1์€ ํ™€์ˆ˜๋ฒˆ์งธ
            or
            even ์ง์ˆ˜
            odd ํ™€์ˆ˜๋„ ๊ฐ€๋Šฅ*/
            background-color: olivedrab;
        }

        /* ๊ฐ€์ƒ ์š”์†Œ ์„ ํƒ์ž */
        h1::first-letter {
            font-size: 1.5em;
        }

        p::first-line {
            background-color: bisque;
        }

        p>a::after {
            content: "!!!!";
            border: 1px dotted red;
        }

        span[data-descr] {
            position: relative;
            text-decoration: underline;
            color: #00f;
            cursor: pointer;
        }

        span[data-descr]:focus::after {
            content: attr(data-descr);
            /* attr()ํ•จ์ˆ˜๋Š” ์†์„ฑ๊ฐ’์„ ์ฝ์–ด์˜ด */
            position: absolute;
            left: 0;
            top: 24px;
            min-width: 200px;
            border: 1px solid #aaa;
            border-radius: 10px;
            background-color: #ffffcc;
            padding: 12px;
            font-size: 14px;
            z-index: 1;
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        table {
            width: 50%;
            margin: 0 auto;
            height: 300px;
        }

        td {
            text-align: center;
            vertical-align: center;
        }

        tr:nth-child(even) {
            background-color: skyblue;
        }

    </style>
</head>

<body>
    <h1>CSS combinators(์กฐํ•ฉ์„ ํƒ์ž)</h1>
    <div>
        <img src="">
        <p>Empty Image<br>Image2</p>
        <span>This is not red.</span>
        <p>Here is a paragraph.</p>
        <code>Here is some code.</code>
        <pre></pre>
        <span>And here is a red span!</span>
        <code>More code...</code>
        <span>And this is a red span!</span>
    </div>
    <h1>CSS attribute selector(์†์„ฑ์„ ํƒ์ž)</h1>
    <ul>
        <li><a href="#internal">Internal link</a></li>
        <li><a href="http://example.com">Example link</a></li>
        <li><a href="#InSensitive">Insensitive internal link</a></li>
        <li><a href="http://example.org example">Example org link</a></li>
    </ul>
    <div lang="en-us en-gb en-au en-nz">Hello World!</div>
    <div lang="pt">Olรก Mundo!</div>
    <div lang="zh-CN">ไธ–็•Œๆ‚จๅฅฝ๏ผ</div>
    <div lang="zh-TW">ไธ–็•Œๆ‚จๅฅฝ๏ผ</div>
    <div data-lang="zh-TW">?ไธ–็•Œๆ‚จๅฅฝ๏ผ</div>
    <ul>
        <li class="number">One</li>
        <li class="number">Two!</li>
        <li class="number">Three</li>
        <li class="number">Four</li>
    </ul>
    <h1>CSS pseudo-classes(๊ฐ€์ƒํด๋ž˜์Šค)</h1>
    <p>๊ฐ€์ƒ ํด๋ž˜์Šค๋Š” ์š”์†Œ์˜ ํŠน์ • ์ƒํƒœ์— ๋”ฐ๋ผ ์Šคํƒ€์ผ์„ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค. ํŠน์ • ์ƒํƒœ๋ž€ ์˜ˆ๋ฅผ ๋“ค์–ด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.</p>
    <p>Mouse over and click the link: <a href="https://www.google.com">Google.com</a></p>
    <p>์ด ์˜ˆ์ œ๋Š”
        <span tabindex="0" data-descr="๋‹จ์–ด์™€ ๋ฌธ์žฅ ๋ถ€ํ˜ธ์˜ ์ง‘ํ•ฉ">ํ…์ŠคํŠธ</span>์™€ ํ•จ๊ป˜ ์•ฝ๊ฐ„์˜
        <span tabindex="0" data-descr="ํ˜ธ๋ฒ„ ์‹œ ๋ณด์—ฌ์ง€๋Š” ์ž‘์€ ํŒ์—…">ํˆดํŒ</span>์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
    </p>
    <input type="text" placeholder="Your name...">
    <hr>
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
        <tr>
            <td>Jessy</td>
            <td>White</td>
            <td>$270</td>
        </tr>
        <tr>
            <td>Harry</td>
            <td>Hunt</td>
            <td>$330</td>
        </tr>
    </table>
</body>

</html>
LIST

'๐Ÿ“– Coding Study > ์›น ๋””์ž์ธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

2023.04.05 ์ˆ˜ (HTML ๋ฐ•์Šค๋ชจ๋ธ, ๋ฐ•์Šค์‚ฌ์ด์ง•, *์„ ํƒ์ž ๋“ฑ)  (0) 2023.04.05
2023.04.03 ์›” (HTML position)  (0) 2023.04.03
2023.03.29 ์ˆ˜ (CSS ์‹ค์Šต)  (0) 2023.03.29
2023.03.27 ์›” (CSS)  (0) 2023.03.27
2023.03.22 ์ˆ˜ (HTML ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ž๋ฃŒ ํƒœ๊ทธ)  (0) 2023.03.22

'๐Ÿ“– Coding Study/์›น ๋””์ž์ธ'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€2023.05.01 ์›” (์„ ํƒ์ž)

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”