[HTML/CSS] 기존 CSS 파일(속성) 수정하기

기존의 레거시 코드를 수정할 때 원본파일을 건들지 못하는 경우

1. 같은 클래스명 하단에 쓰기
2. 우선순위 높이기
3. Specificity(특이성) 

다음과 같은 방법을 택해서 수정하게된다.

 

(1). 같은 클래스 명 하단에 쓰기

 

같은 클래스명이라도 하단에 정의한 클래스 명/스타일을 우선 적용한다.

따라서 하단에 명시해서 수정하도록 한다.

 

See the Pen Untitled by 익명계정 (@puwifgaj-the-vuer) on CodePen.

(2). 우선 순위 높이기

 

해당 순으로 왼쪽부터 제일 우선순위가 낮다.

tag<class<id<inline style (1 < 10 < 100 < 1000)

이 방법은 근본적인 해결법이라고 보기에는 어려운 방식이다.

id같은 경우는 개발에 사용하므로 사용에는 지양하는 것이 좋다.

 

(3) Specificity(특이성) 

div.main-background{
	color:red;
}
.main-background  {
    color: blue;
}

 

div.main-background의 경우는 클래스가 1개, tag가 1개이므로 11점이다.

.main-background는 클래스가 1개 이므로 점수는 10점이다.

 

따라서 div.main-background의 속성이 더 위에 있어도 우선순위가 높아져 최종으로 적용된다.

 

 

추가로 CSS를 나중에 수정할 경우를 생각해서 selector는 여러개 쓰지 않고 클래스 명 하나만 써서 스타일링하는게 좋다.

 

* 부트스트랩 같은 경우 클래스명을 추가하는 형태로 스타일을 수정하게된다. 

 

 

코딩애플 강의를  참고해서 작성.