Frontend 에 익숙하지않은 많은 개발자들이 과제 이상의 어느정도 규모있는 Frontend 를 작업하게 되면 HTML 과 CSS 의 구조에 대해 놀라는 경향이 있다.
HTML 과 CSS 는 생각보다 정교한 구조를 이루고 있고, 초보 수준 이상의 Frontend 실력을 갖기 위해서는 필수적으로 구조에 대해 이해하고 어떻게 브라우저가 웹(Web)을 스타일링하는 지 알아야 한다.
이해해야할 잘 갖춰진 Frontend 의 특징 중 하나로, "HTML 문서의 모든 프로퍼티(properties) 들은 상속가능하다" 는 점이 있다.
계층적으로 구조화된 DOM 모델에서 한 Element 는 Parent Element 의 속성을 지니며, 모든 element 들의 root parent 는 <html> 이 된다.
HTML 태그의 DOM 모델들 간 상속은 다른 포스팅에서 다루도록 하고, 본 포스팅에서는 CSS 의 상속에 대해 다루기로 한다.
복잡한 종류의 UI 를 구조할 때, 비슷한 CSS 스타일링을 중복해서 사용하게 되는 경우가 많이 있다.
가령, 웹페이지 전체의 UI 는 어느정도 일관성이 있어야 하기 때문에, 검색을 위한 검색바(Bar)와 검색 추천을 위한 표시바(Bar) 가 있는데 이 둘의 스타일을 비슷하게 가져가되 하이라이트 컬러 정도만 바꾸고자 한다고 해보자.
이 때, 세세하게 작업된 모든 디자인 스타일을 복사해서 사용하는 것은 비효율적인 일이다.
이럴 때에는 다음과 같이 CSS 상속을 이용해 쉽게 해결할 수 있다.
위의 코드에서 bar-focus 라는 CSS 스타일은 bar 스타일을 차용하되 background-color 에 특징을 입힌다.
위의 마크업은 다음과 같은 페이지를 나타내게 된다.
색배합이 끔찍하지만, 스타일을 재활용할 수 있다는 점정도는 쉽게 알 수 있다.
쉽지않은가? 이런식으로 스타일의 재활용을 통해 노가다로 여겨질 수 있는 Frontend 의 디자인 코드를 확연하게 정리할 수 있다.
하지만 CSS 의 상속과 관련되어 알아야할 성질들은 조금 더 있다.
먼저 브라우저가 상속을 처리하는 순서이다.
브라우저는 CSS 상속을 Inline > Internal > External 순서로 처리한다.
여기서 Inline, Internal, External 은 CSS를 정의하는 방법에 대한 분류를 말하며, 다음과 같다.
- Inline : 해당 태그 안에 style=”” 속성을 통해 정의
- Internal : 해당 파일 안에 <css> </css> 태그를 작성하고 해당 Scope 내에 정의
- External : 별도의 파일로 CSS 를 분리하고 해당 파일을 HTML 에서 import
즉, CSS를 적용할 때에 위의 순서를 유의해야 해당 스타일이 반영될 수 있다.
또 당신이 프론트엔드 개발자라면 주의해야할 사항으로 태그의 속성 관리 부분이 있다.
만약, CSS 가 적용된 태그의 속성이 "float" 을 가지고 있는 경우 해당 DOM 은 상속관계 및 레이아웃에 영향을 받지않는 붕-뜬 상태가 된다.
해당 요소에 상속성을 적용시키기 위해서는 overflow 속성의 적용이 필요하다.
'Programming Language > Javascript + HTML' 카테고리의 다른 글
| 자바스크립트의 Closure 에 대한 이해 (0) | 2019.05.11 |
|---|---|
| 자바스크립트의 Scope 에 대한 이해 (0) | 2019.05.11 |
| 웹프론트엔드에서의 이벤트 버블링 & 캡쳐링에 대한 정리 (0) | 2019.02.13 |
| 웹프론트엔드에서 쓰로틀링(Throttling)과 디바운싱(Debouncing)의 개념 (0) | 2019.02.09 |
| AngularJS 에서의 Scope 의 개념 (0) | 2018.10.31 |