부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

3. CSS - FE

2) 상속과 우선순위 결정-1

 

[2] 개념 정리

상위에서 적용한 스타일은 하위에도 반영됩니다.
이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다.
하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다.
예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다.
이런 것은 원하는 것이 아니죠.
그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.
이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다.  
아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면 좋습니다.

 

[3] 강의 정리

  CSS 상속을 알아보자. 프로그래밍에는 상속이라는 개념이 있다. CSS에도 상속이 있다. 상위에 설정된 스타일을 하위에서도 쓴다. 이게 재사용 측면에서는 좋다. 만약 상속이 없다면 엘리먼트마다 다양한 많은 속성을 필요로 하는데 그거를 매번 정의를 해준다는 거는 불편한 일이다. 이렇게 CSS 속성을 부모와의 설정으로 두고 그냥 자식도 똑같다고 한다. 이렇게 상속을 받을 수 있다. 엘리먼트를 만들어 보자. div 하위에 ul 있고 li가 2개가 있다. 그런데 그 하나의 li 안에 div가 있고 p가 있다. div가 있고 p 태그가 있다. 이렇게 했다. li에 하위에 span으로 my text is dummy 이런 걸 표현했다. span 태그 아래 어떤 내용이 있고 div 아래, p 아래 뭐가 또 있을 수 있고 이렇게 구성이 되어 있다.

  우리가 div 하위에 span이 있고 여기에서 my text is. 이쪽에 있다. 이렇게 했다. 스타일을 한번 줘보자. div ul li div p 이렇게 자손 관계로 표현을 해본다. font-size를 color로 한다. color를 20 픽셀이다. 이 해당하는 걸 제가 찾았다. div 아래 ul 아래 li 아래 div 이 정보가 green이 놔았다. 이렇게 표시하니까 당연히 green이 나왔다. 그런데 만약에 우리가 상위에 그냥 div 아래 ul이다. 그냥 div는 다 color : green으로 한다. 이게 color 폰트 색깔을 이야기하는 건데 모두 다 green이 됐다. 자식의 자식 또는 자손 아래 아래 아래 있는 자손에도 역시 color 값이 반영된 걸 확인할 수 있다. div는 얘일 수도 있지만 얘일 수도 있다. 정확히는 body 아래 div, 아래 div인 경우를 지정을 해도 이렇게 green이 되고 가끔 이 자식들에게도 똑같이 반영이 된다.

  그러면 font-size 이런 것도 될까 30픽셀로 설정을 해주면 반영이 된 것을 확인 할 수가 있다. 실제로 얘를 클릭을 해보면 여기에 설정된 정보는 없지만 여기 보면 body, ingerited from div가 하위에 보인다. 이건 따라서 올라가지 않는다. ingerited from div, div로부터 상속받은 거다. body 아래 div가 color가 green이고 font가 30이다. 그런데 우리가 박스 모델인 margin이나 padding 이런 걸 줄 수가 있다. 이번에 예를 들어서 body 아래 바로 div. 이 큰 감싸고 있는 div에 border:2px solid 이런 걸 줬다. 딱 주면 바깥 테두리가 됐다. 하지만 하위 자식들에는 다 border가 설정된 게 아니다. 즉 얘만 설정이 됬고 간격을 나타내는 padding도 한번 해본다. 예를 들어서 5, 30 픽셀. 픽셀 단위로 해본다. 그러면 얘만 또 padding 값을 먹은 걸 알 수 있다. 예를 들어서 이 div에만 padding이라는 속성이 먹은 걸 알 수 있다. 이 하위에 있는 노드들은 padding 값이 없다. 여기 보면 padding 값이 없다. 즉 padding과 border와 같은 그 배치와 관련된 속성은 상속을 받지 않는구나 라는 걸 알 수 있다. 그 나머지 속성들은 대부분다 상속을 받아서 효율적으로 CSS를 만들 수 있다. 상속에 대해서 알아봤다.