VSCode_basic.7

dwanGim·2022년 2월 23일
0

vscode_basic

목록 보기
7/55
css selet

id 선택자는 태그명과 상관 없이
특정태그에 부여된 id="값"을 고려해서
css를 적용하는 선택자입니다.
이 때, 특정 id를 부여하는 경우
같은 이름을 2개 이상의 태그에 동시에
부여하지 않는 것이 원칙입니다.


<style>
        /*id와 달리 class는 같은 이름으로
        여러 요소에 동시에 지정할 수 있습니다.*/

        /* id big-title은 배경색 indigo, 글씨색은 whitesmoke*/
        #big-title {background-color: indigo; color: whitesmoke;}
        #content {background-color: aqua;}
        
        .title {color: darkgoldenrod;}
        .item {color: yellow; background-color: blue;}
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="big-title">
        <h1>css 선택자</h1>
    </div>
    <div id="content">
        <p class="title">현재가지 익힌 것</p>
        <p class="item">1. 태그선택자</p>
        <p class="item">2. id선택자</p>
        <p class="item">3. class선택자</p>
        <hr/>
        <p class="title">앞으로 익힐 것</p>
        <p class="item">4.자식선택자</p>
        <p class="item">5.이외 여러가지</p>
    </div>
</body>
</html>

타입 선택자는 태그이름을 그대로 써주면 됩니다.
이 선택자는 이름만 일치하면 다른 조건은 고려하지 않고
전부 적용 대상으로 삼습니다.

클래스 선택자는
.클래스명 {css구문;}
을 사용합니다.
아이디는 #,클래스는 .을 이용해 저장할 수 있습니다.

profile
배울 게 참 많네요.

0개의 댓글