πŸ“– 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 μ›” (μ„ νƒμž)

κ΄€λ ¨κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”