CSS 적용_ ID, Class, And, Or, Sub

CSS 적용을 하면서 아래와 같은 예제를 많이 봤을 것이다.

div.lnbSpaceList.selected {     //div이면서 lnbSpaceList 클래스 이면서 selected 클래스 인 것
  background-color: #E2E3FB; 
} 

div.lnbSpaceList .thumbPhoto {  //div이면서 lnbSpaceList 클래스안에 thumbPhoto 클래스
flex-shrink:0; 
width:2.13rem; 
height:2.13rem; 
background-color:aqua; 
align-self:center; 
margin-left:0.63rem; 
border-radius:3.12rem; 
}

지금부터 하나씩 보자!

 

오른쪽 화면같이 .top-textview-url에 vertical-align : middle 한개만 추가하고싶은 경우 아래와 같이 추가하면 된다.

top-textview#teeGnbTitleTextview span#teeGnbTitleTextview a{
	vertical-align: middle; 
}

top-textview 태그의 teeGnbTitleTextview ID -> span 태그의 teeGnbTitleTextview ID -> a 태그

 

중복되는 CSS를 적용해야 할 경우 다중 조건 연산자(OR) ','를 사용하면 된다.

button#teeGnbSearchButton.top-button-root,
button#teeGnbAddButton.top-button-root,
button#teeGnbSettingButton.top-button-root,
button#teeProfileButton.top-button-root  {
    display: inline-block;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 2px;
    border: 0px;
    padding: 0px 0px 0px 0px;
    color: #ffffff;
    font-weight: 600;
    min-width: 0px;
    background-color: #4085ee;
}

정리하면

AND 연산은 내용을 이어붙이면 된다.

OR 연산은 ,를 사용한다.

ID를 조건으로 넣고 싶으면 #을 붙이면 되고

Class를 조건으로 붙이고 싶으면 '.'로 나타내면 된다.

 

내부의 tag 또는 class를 참조하고 싶으면 space(' ')를 사용하면 된다.

 

내가 HTML에서 적용한 코드가 먹히지 않는다면, 구글 개발자 도구에 들어가서 CSS가 먹혔는지를 확인해보면 된다.