HTML&CSS 10일차 (정리x)

💜 HTML,CSS
HTML&CSS 10일차 (정리x)

Genie_. 2024. 3. 23. 21:57
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>연결선택자+속성선택자</title>
</head>

<style>
    /* 하위 선택자. */
    section div{ /* section 안에 있는 모든 div 선택해라(자식+후손) */
        color: darkred;
    }
    /* 자식 선택자. */
    section > span{ /* section 바로 하위(자식)인 span만 선택해라 */
        color: blue;
    }

    article > span {} /*  >는 상황에 맞게 넣고,빼고 가능 */
    section > article > span { /* 이렇게도 가능 */
        color: orange;
    }

    /* 속성 선택자 => 해당 태그의 해당 속성을 가진 요소만 선택 */
    /* a, input은 부모의 (대부분의)스타일을 안따른다 */
    input[type=text]{
        color: lightcoral;
    }
    input[required]{ /* input이면서 required 속성이 있는 요소를 선택해라 */
        background-color: pink;
    }
    input[checked] { /* input이면서 checked 속성이 있다 */
        width: 100px;
        height: 100px;
    }
    a{
        color: black;
        text-decoration: none; /* 밑줄 없애라 */
    }
    input[href ~="naver"] {
        font-size: 100px;
    }

    /*!* 인접 형재 선택자 (자식, 후손보다 잘 쓰이지 않음, 잘 몰라도 괜찮) *!*/
    /*p + div{ !* p 바로 다음에 있는 div선택해라 *!*/
    /*    color: green;*/
    /*}*/
    /*!* 형제 선택자 (자식, 후손보다 잘 쓰이지 않음, 잘 몰라도 괜찮) *!*/
    /*div ~ div { !* div하고 형제인 (자식도 아니고 부모도 아닌 같은 라인 친구들) *!*/
    /*    color: darkgoldenrod;*/
    /*}*/

</style>

<body>
    <section>
        SECTION 글자
        <span>SECTION-SPAN</span>
        <div>SECTION-DIV</div>
        <article>
            <span>SECTION-ARTICLE-SPAN</span>
            <div>SECTION-ARTICLE-DIV</div>
        </article>
        <button>버튼!</button>
    </section>

    <section>
      <div>SECTION-DIV2</div>
    </section>

    <div>DIV1</div>
    <p>DIV2</p>
    <div>DIV3</div>
    <br>

    <form>
      TEXT1<input type="text" value="1"><br>
      TEXT2<input type="text" value="2"><br>
      EMAIL<input type="email" value="3" required><br>
      <!-- required : 입력을 해야, 전송해야함  -->
      PW<input type="password" value="4"><br>
      CH1<input type="checkbox" value="5" checked><br>
      CH2<input type="checkbox" value="6"><br>
      <a href="https://www.naver.com">네이버로 이동</a>
      <a href="https://www.google.com">구글로 이동</a>
      <button>전송</button> <!-- 자동 submit 됨 -->
    </form>



</body>
</html>
728x90
저작자표시 비영리 변경금지