CSS | Class와 ID의 차이

Ryan·2020년 10월 10일
0

CSS

목록 보기
2/13
post-thumbnail

1. 차이점

: 예를 들어 굵은 헤드라인이 2개 있다고 생각해보자.
그중에 1번 헤드라인은 검정색이어야하고 2번 헤드라인은 노란색이어야한다.

  • 그렇다면 2개의 공통점은 class로 묶을 수 있을 것이다.
  • 그리고 차이점인 색깔이라는 고유 스타일은 ID로 지정할 수 있을 것이다.

: 즉 클래스는 여러 번 사용되는 반면 ID는 하나의 요소만 스타일링하는 것을 의미한다.
물론 고유한 스타일도 클래스로 차이를 둔다고 해도 문제될 것은 없다.

2. 우선순위

h1 {
  color: red;
}

.headline {
  color: firebrick;
}
  • 위와 같이 h1이면서 클래스값을 headline으로 부여한 태그가 있다고 생각해보자.
    두가지 컬러를 부여했다. 이 경우 더 구체적인 headline이 이 태그의 색으로 결정된다.

3. 강제로 우선순위 부여

h1 {
  color : black !important
}
  • !important를 부여하는 것으로 다른 어떠한 것들보다 우선시하게 만들 수 있다.ㅇ
  • 이 우선순위는 클래스, ID보다 더욱 강력한 우선순위를 가진다.

4. class명 만드는 방법

: 위에서처럼 중복되는 코드가 많아질 수록 훌륭하지 못한 코드라 할 수 있다.

.uppercase {
  text-transform: uppercase;
}

.publish-time {
  color: gray;
}

.cursive {
  font-family: cursive;
}

.capitalize {
  text-transform: capitalize;
}
  • CSS에는 자주 사용할 스타일링을 지정해두고
<h1 class="capitalize uppercase cursive">
  • class이름에 띄어쓰기를 활용하여 이름을 지어준다.
profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글