CSS(Selector)

13259 단어 CSSCSS

CSS Selector

css에는 태그명을 기준으로 element를 선택하는 다양한 selector가 있다.

기본 선택자

  • 태그 선택자
  • 아이디 선택자
  • 클래스 선택자
  • 자식 선택자
  • 후손 선택자
<!DOCTYPE html>
<!--사이의 코드는 생략-->
    <style>
        * { 
            background-color: rgb(196, 255, 223);
            font-size: 40px;
            // 전체 선택자
            // html 전체에 적용
        }
        div {
            text-align: center;
            // 태그 선택자
            // 모든 div 태그에 적용
        }
        #id {
            border: 3px dotted red;
            // id 선택자
            // id 값이 "id"인 태그에 적용
        }
        .class {
            border: 3px dashed rgb(56, 37, 231);
            //클래스 선택자
            // class 값이 "class"인 모든 태그에 적용
        }
    </style>
</head>
<body>
    <div id="id">
        this is ID section
    </div>
    <div class="class">
        this is CLASS section
    </div>
    <div class="class">
        and this is also CLASS section
    </div>
</body>
</html>

복합 선택자

  • 자식 선택자
  • 후손 선택자
  • 형제(동위) 선택자
  • 형제 선택자
<!DOCTYPE html>
<!--사이의 코드는 생략-->
    <style>
        div {
            font-size: 40px;
            text-align: center;
            // 태그 선택자
            // 모든 div 태그에 적용
        }
        #parents>#son {
            color: rgb(226, 43, 43);
            // 자식 선택자
            // id 값이 "parents"인 태그 바로 아래의
            // id 값이 "son"인 태그에만 적용
        }
        #granParents div {
            background-color: orange;
            color:yellow;
            // 후손 선택자
            // id 값이 "grandParents"인 태그 아래의
            // 모든 div 태그에 적용
        }
        #granParents #son {
            font-style: italic;
            // 후손 선택자
            // id 값이 "grandParents"인 태그 아래의
            // id 값이 "son"인 태그에만 적용
        }
        #son + .brother {
            color: green;
            // 형제(동위) 선택자
            // id 값이 "son"인 태그 바로 아래의
            // class 값이 "brother"인 태그 하나에 적용
        }
        #son ~ .brother {
            font-weight: bold;
            // 형제 선택자
            // id 값이 "son"인 태그 바로 아래의
            // class 값이 "brother"인 모든 태그에 적용
        }
    </style>
</head>
<body>
    <div id="granParents">
        저는 조부모입니다.
        <div id="parents">
            저는 부모입니다.
            <div id="son">
                저는 자식이자 후손입니다.
            </div>
            <div class="brother">
                저는 형제입니다.
            </div>
            <div class="brother">
                저도 형제입니다.
            </div>
        </div>
    </div>
</body>
</html>

이외에도 많은 종류의 선택자가 있다.
다른 포스팅에서 정리하도록 하겠다.

programmers - 음양 더하기
[프로그래머스] 소수 만들기 - node.js

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage