02. CSS선택자(모든선택자,태그선택자,아이디선택자,클래스선택자)

 

 

CSS선택자란 ?

■ 특정 HTML태그를 선택하여 스타일을 부여할때 사용되는 식별자 (태그,#ID, .Class,부모/후손,이벤트 등등)

 

모든선택자

■ HTML문서 안에 모든 태그를 선택하는 기능 (* 사용)

    <style>
        * {
            font-family: sans-serif;
            color: red;
            font-weight: bold;
        }
    </style>

 

태그선택자

■ 특정 태그를 모두 CSS로 적용하는 방법

    <style>
        ul {
            color: pink;
            font-weight: bold;
        }
    </style>
    <ul> ul태그의 전체가 변경됨</ul>
    <li> 다른태그는 변경되지 않음</li>

ul태그의 전체가 변경됨

다른태그는 변경되지 않음

 

아이디선택자

■ HTML태그의 속성값에 ID를 지정하여 적용하는 방법
■ id와 style이 1:1매핑되는 방법으로 많이 사용됨

    <style>
        #id1 {
            color: seagreen;
            background-color: thistle;
            font-size: large;
        }
        
        #id2 {
            color: darkkhaki;
            background-color: rgb(79, 26, 235);
            font-size: xx-large;
        }
    </style>
    <div id="id1">id1 영역입니다.</div>
    <div id="id2">id2 영역입니다.</div>

id1 영역입니다.

id2 영역입니다.

 

클래스선택자

■ HTML태그의 속성을 class(그룹)으로 적용하여 스타일 적용하는 방법
■ class 와 style 1:N 매핑되는 방법이고, 1:1 매핑가능. css적용시 가장 많이 활용되는 기법

 <style>
        .class1 {
            color: greenyellow;
            background-color: gold;
            font-size: 15px;
            text-align: center;
        }
        
        .class2,
        .class3 {
            /* class2와 class3을 같은 css값으로 설정하는 방법 */
            color: rgb(232, 145, 209);
            background-color: rgba(16, 82, 4, 0.708);
            font-size: 15px;
            text-align: center;
        }
        
        .classP .classC {
            /* classP는 부모, classC는 자손일때 활용하는 기법 */
            color: rgb(247, 254, 146);
            background-color: rgba(210, 101, 0, 0.708);
            font-size: 15px;
            text-align: center;
        }
    </style>

    <div class="class1"> class1영역입니다</div>
    <div class="class2"> class2영역입니다</div>
    <div class="class3"> class3영역입니다</div>

    <div class="class1"> 두번째 class1영역입니다</div>
    <div class="class2"> 두번째 class2영역입니다</div>
    <div class="class3"> 두번째 class3영역입니다</div>

    <div class="classP">
        classp 부모 영역입니다.
        <div class="classC">자식1 영역입니다.</div>
        <div>자식2의 영역입니다</div>
    </div>
    <div class="classC">ClassC영역입니다. 이곳은 안먹힐 예정</div>

class1영역입니다

class2영역입니다

class3영역입니다

두번째 class1영역입니다

두번째 class2영역입니다

두번째 class3영역입니다

classp 부모 영역입니다.

자식1 영역입니다.

자식2의 영역입니다

ClassC영역입니다. 이곳은 안먹힐 예정

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."