상속, 그룹, css 선택자

태그들도 사람과 같이 부모 자식 관계가 존재한다. 어떤 태그가 다른 태그를 감싸고 있을 때 감싸고 있는 태그가 부모태그, 부모태그의 내부에 존재하는 태그가 자식태그가 된다. 우리가 부모님께 재산을 상속받듯 태그들도 부모태그에게 속성이나 성질을 상속받는다. 예를 들면

body {
color: red;
font-size: 14px;
}
이런 코드가 있다고 하면 color와 font-size를 body태그에 줬기 떄문에 body태그의 내부에 있는 태그들은 전부 빨간색과 14px의 폰트 크기를 가지게 된다. 하지만 예외도 있는데 자식태그에 따로 color나 font-size를 지정해 줬다면 자식태그는 body태그의 스타일을 상속받지 않게 된다. 어떤 태그에 내가 지정하지 않은 속성이 부여되어 보인다면 이거를 체크해보면 될 것같다.

그룹

css를 작성할 때 같은 속성을 여러 태그에 줘야할 때 한번에 묶어서 할 수 있다.

• .class, span{ color: green; }

이런식으로 묶어서 주면 된다.

그룹을 하기 위해서는 정확한 선택자를 이용해야 내가 정확히 원하는 내용에 원하는 디자인을 할 수 있을 것이다.

• .class, #id를 이용해 html에서 class나 id값을 가진 태그를 선택
• p.class, p#id 는 p태그이면서 해당 class나 id를 가진 태그
• .class span은 해당 class 내부의 span 태그

선택자 간에 우선순위도 있다.

• tag < class < id < inline css 순

자세히 알아보면 선택자마다 다른 점수를 줘서 계산한다고 하는데 점수 간격이 너무 커서 왠만하면 위 우선순위 순으로 적용된다고 하니 따로 점수까지 외울 필요는 없을 것 같다. 위 우선순위는 하나의 태그에 같은 속성이 중복적으로 여러개 달렸을 때 우선적으로 적용되는 속성을 알 수 있을 것이다.

## 상속 그룹 하니 재벌그룹 생각이 나는데 마침 삼성에서 갤럭시 새로 나왔던데 하나 사고싶다.