[HTML/CSS] 디자인이 적용되는 우선순위

css 덮어쓰기의 조건은 우선순위 크기가 같거나 클 때이다.

예를 들어,
id : 100
class : 10
tag : 1

이라는 우선순위를 갖고 있다고 치자

.box06 ~ div{ height: 300px; }
.box07{
	width: 50%; height: 200px;
    margin-right: 10px; margin-bottom: 10px;
    background-color: red;
}
.box08{
	width: 25%; height: 200px;
    margin-bottom: 10px;
    background-color: blue;
}

.box06 ~ div{}의 우선순위는 .box06(class) + div(tag) = 10 + 1 = 11이다.
.box07{}, .box08{}의 우선순위는 .box07(class) = 10 이다.

따라서, .box06 ~ div{} > .box07{}, .box08{}이기 때문에 height: 200px;의 코드가 먹히지 않는 것이다.

이 때 우선순위를 같게 만들고 싶으면, .box07{}, .box08{} 앞에 div라는 tag를 넣어서 우선순위를 같게 만들어준다
(꼭 div를 안넣더라도 .box06 ~ div{}의 우선순위보다 높게만 해주면 됨)

.box06 ~ div{ height: 300px; }
div.box07{	/* .box07 */
	width: 50%; height: 200px;
    margin-right: 10px; margin-bottom: 10px;
    background-color: red;
}
div.box08{	/* .box08 */
	width: 25%; height: 200px;
    margin-bottom: 10px;
    background-color: blue;
}

이렇게 되면 div(tag) + .box07(class) = 10 + 1 = 11이 되므로, .box06 ~ div{}와 우선순위가 같아진다.
따라서, .box07과 .box08의 height가 200으로 설정된다.