[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)

[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자)Web_Frontend/HTML & CSS2021. 11. 18. 11:43@Yanako

Table of Contents

1. 선택자란?

- 특정 항목(HTML)을 선택하여, 해당 항목의 속성을 변경.

1) tag 선택자 : 특정 태그(HTML)를 선택하여, 해당 태그의 속성을 변경.

선택자(특정 태그 명) + { 설정 }

    <style>
        div {
            background-color: yellow; border: 5px solid rebeccapurple;
        }
        h1 {
            background-color: sandybrown ;
        }
    </style>
    </head>
    
	<body>
    <h1> 제목입니다 </h1>
    <p>본문입니다</p>

    <div>
        <h1> 제목입니다 </h1>
        <p>본문입니다</p>
    </div>

    <br /><br />
    <div>
        또 하나의 DIV 입니다
    </div>
    </body>

2) 다중 태그 선택 : 여러 태그를 선택하여, 해당 태그의 속성을 변경

선택자,선택자,선택자 + { 설정 }

cf) 특정 태그에 다중 설정시 가장 마지막으로 설정된 값으로 홈페이지 반영됨.

<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        header,nav,section {
            color: yellow;
        }

        h1,p {
            background-color:turquoise;
        }

        p{
            background-color: thistle;
        }
    </style>

</head>
<body>
    <header>
        <h1>MY HOMEPAGE</h1>
        <hr />
    </header>

    <nav>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
        <hr />
    </nav>

    <section>
        <h1>What is HTML5?</h1>
        <p>HTML5 is goooooooooooooooooooooooooooooooooooooooooooooooooooooooood!</p>
        <hr />
    </section>

    <footer>
        <p>xxx주식회사 서울시 00구00동</p>
    </footer>
</body>

**3) 전체 선택자(*)** : 전체 설정

* + { 설정 }

- 전체선택자도 태그선택자 혹은 다중태그선택자과 혼합해서 사용 가능.

- 특정 태그에 마지막으로 설정된 형태로 화면에 표시됨.

    <style>
        * {
            font-weight: 500;
        }
    </style>

저작자표시

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

[html,css] HTML & CSS 자세히 알아보기 (0)	2023.12.14
[html,css] 웹개발 기본과 HTML & CSS (0)	2023.12.13
[HTML] 레이아웃 구성 태그(div, span) (0)	2021.11.18
[HTML] 폼 태그(form) (0)	2021.11.18
[HTML] 동영상을 출력하는 태그(video) (0)	2021.11.18