CSS selector

CSS selector

.profile { font-size : 20px }  /*클래스*/
#special { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/

class selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일 적용 가능

id selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일 적용 가능

tag selector는 p { 스타일- } 이렇게 적을 수 있고 모든 <p> 태그에 스타일 적용 가능

셀렉터의 우선순위

class, id를 동시에 가지는 html에서 스타일이 겹칠 경우 우선순위가 존재한다.

대략 (점수가 높을수록 우선순위)

style="" (1000점)
#id (100점)
.class (10점) 
p (1점)

selector 문법 중 공백

.navbar li {  
}

navbar과 li사이의 띄어쓰기 공백은 ~안에 있는 모든자식 이라는 뜻을 가진다.

.navbar>li {  
}

navbar과 li사이의 띄어쓰기 >은 ~안에 있는 직계자식 이라는 뜻을 가진다.

selector 문법 중 콤마

• selector에서 콤마 쓰면 중복 선택 가능

div, input, textarea, .box {
box-sizing: border-box;
}

• 클래스명도 함께 가능
  
  

코드양이 줄어드는 class 작명법 (OOCSS, BEM)

• 코드 양을 줄이는 CSS 작성하기
  (OOCSS-Object Oriented CSS)라고 부르는 작성 관습
  뼈대와 살을 분리하기

css

예를들어 색이 다른 버튼을 만든다고 할 때 이렇게 각각 따로 만들었다면

.main-btn-red {
  font-size : 20px;
  padding : 15px;
  border : none;
  cursor : pointer;
  background : red;
}

.main-btn-blue {
  font-size : 20px;
  padding : 15px;
  border : none;
  cursor : pointer;
  background : blue;
}

1. 버튼의 기본 스타일인 padding, font-size 이런걸 정의하는 class를 하나 만들고,
2. 버튼에 스킨 색깔놀이 하는 용도의 class를 여러개 만들어 주기.

.main-btn {
  font-size : 20px;
  padding : 15px;
  border : none;
  cursor : pointer;
}

.bg-red {
  background : red;
}
.bg-blue {
  background : blue;
}

html

<button class="main-btn bg-red">빨간버튼</button>
<button class="main-btn bg-blue">파란버튼</button>

이렇게 html에 쓰면 된다.

이렇게 뼈와 살을 각각의 class로 분리하는 방법의 장점은

1. 중복된 스타일을 재사용가능해서 CSS 파일용량도 줄어들고 코딩 시간도 절약된다.

2. 유지보수가 편리해진다.
   (사이트의 모든 버튼의 font-size를 약간 줄여야한다면 이 경우엔 한 곳만 건드리면 모든 버튼이 다 수정되어서 편리)

3. 코드 빨리 짤 수 있다.

utility class

.bg-red 이렇게 색깔놀이용 class들을 전문용어로 utility class라고 부릅니다.
이걸 미리 많이 만들어두면 편함

.bg-red {
  background : red;
}
.bg-green {
  background : green;
}
.bg-blue {
  background : blue;
}

앞으로 버튼만들 때 class명을 두세개 고르기만 하면 되니까 css 파일 열지않고도 다양한 스타일을 빠르게 만들 수 있다. (class명을 미리 외워놓았을때)

심지어 버튼말고도 다른 UI에 색상 줄 때도 적용가능

.font-small {
  font-size : 12px;
}
.font-medium {
  font-size : 16px;
}
.font-lg {
  font-size : 20px;
}

글씨 font-size 변경이 잦다면 이런 식으로 utility class 들을 많이 만들어두고
글자 스타일링할 때 외워서 가져다 쓰면 코드짜는게 매우 빨라질 수 있다.

특히 width, margin, padding, text-align 이런 것들 조정하는 utility class 많이 만들어두면 편리

BEM(Block_Eelement--Modifier)(그냥 알아두기)

• class작명시 창의력이 딸리면..BEM을 따라해보기

class="덩어리이름__역할--세부특징"

<div class="profile">
  <h4 class="profile__title"></h4>
  <img class="profile__img"></img>
  <p class="profile__content"></p>
  <button class="profile__btn--red">버튼1</button>
  <button class="profile__btn--green">버튼2</button>
</div>

하지만

<button class="main-btn bg-red">빨간버튼</button>
<button class="main-btn bg-blue">파란버튼</button>

이것을 더 권장

• React, Vue로 html 만들면 OOCSS, BEM 굳이 안써도 잘 하게 된다고 한다..
  class명이 같아도 각각 class명을 안겹치게 사용 가능