css를 공부하면서 몇가지 정리되지 않은 용어들이 있어서 정리하려 한다.
html 엘리먼트(element) - html 요소라고도 하며 태그를 의미한다. 나중에 다루게 될 박스모델에 대해서 간단히 언급하면, html 요소는 각각 박스(box)로 둘러쌓여져 있음을 말하며 박스의 크기를 결정하는 속성들을 css를 사용해 설정, 변경할 수도 있다. 각 html 요소의 박스 크기에 따라 다른 html 요소와의 상호작용을 통해 문서에 배치되는 모습이 결정된다.
예를들어 html 태그, body 태그, p 태그, div 태그들은 박스로 이루어져 있으며 다른 요소들의 내부에 배치될 수도 있고 다른 요소과 나란히 배치될 수도 있다.
부모, 자식 - html 요소들간에는 부모, 자식관계가 형성되는데 이런 관계는 상대적이다. 예를들어 부모는 포함하는 태그, 자식은 포함되는 태그를 말한다. 따라서 html 태그는 최상위 태그이므로 모든 태그의 부모가 된다. 반면에 body 태그는 html 태그의 자식이지만 body 내부에 있는 태그들에 대해서 부모가 된다.
그리고 부모, 자식관계를 통해 속성값의 상속이 가능하게 된다. 속성값은 부모로 부터 자식으로 전파된다. 속성값이 상속되면 어떤 일이 있어나는지 예제를 통해서 알아보자.
- 부모의 속성값이 자식에게 상속되는 예
html 선택자에 color 속성을 blue로 줬는데 문서의 글씨가 모두 blue로 변했다. 부모의 속성값 blue가 자식에게 상속됐기 때문이다.
이 코드에 li 태그의 색을 바꾸는 코드를 추가해보자.
이렇게 직접 속성값을 주면 부모로 부터 상속된 값은 무시된다. 다시말해 속성값을 따로 주지 않은 경우에만 상속된 값이 적용된다.
이번에는 id 선택자를 사용하여 색을 바꿔보겠다.
id가 test 인 태그의 직계 자식으로 세 개의 li태그가 있다. 문서에 표시된 first, second, third에 해댕한다. css에서는 이 세 개의 li태그에 속성값 red를 적용했는데 보시다시피 (손자?, 증손자?) 태그 까지 속성값이 적용되었다. 왜냐면 li태그에 적용된 속성값이 그 하위 태그까지 상속되기 때문이다.
여기에서 빨간 박스의 코드를 다음과 같이 바꿔보자.
#test > li {
color: red;
}
자식 선택자에 > 를 사용하면 직계 자식만을 뜻한다. 그래서 위 코드는 직계자식 보다 더 아래 자손들에게는 속성값 red가 상속되지 않게된다. 그림을 보면 더 하위 후손은 html 선택자로 지정한 색 blue를 상속받아 파란 색 글씨가 된다.
- 상속이 되지 않는 속성
하지만 모든 속성이 color처럼 상속되는 것은 아니다. 예를들어 border 속성은 상속되지 않는다.
상속되는 속성과 상속되지 않는 속성은
https://www.w3.org/TR/CSS2/propidx.html
위 사이트의 표를 참고하면 된다. (Inherited? 가 yes 면 상속되는 것)
css에는 많은 속성이 있으므로 상속 유무를 외우려 하면 지칠 것이다. 자주 쓰는 몇개의 속성만 알아두고 감각적으로 익히면 된다. 웹 애플리케이션을 만드는 것은 O, X를 맞추는 퀴즈가 아니므로 코드를 작성하고 결과를 확인해 가면서 상속여부를 알아낼 수도 있다.
예를들어 border 속성 의 경우를 살펴보자.
html 태그에 border속성을 줬지만 자식 태그인 body, div, p 에는 적용되지 않았다. 만약 border 속성이 상속된다고 가정해 보면 꽤 골치아플 일이 일어날 것이다. (다음 예제 참고)
다음은 자식 태그에 border 속성을 직접 줘본 것이다.
이렇게 border 속성은 상속이 안되고 직접 지정해야 하는 속성이다. 그리고 이 그림에서 알 수 있는 것은 모든 요소(태그)는 box로 이루어져 있다는 것이다. 박스(box)에 대한 내용은 다음 포스팅으로~~