background-image 의 영역에 대해

***

알다시피

background-~ 는

적용이 된 요소의 크기가 정해지지 않으면

안보임. 당연한거임 이건.

그래서

width / height 값을 무조건 줘야하는걸로 착각했었는데 그게 아님.

***

이걸 이해하려면

inline / block 특징을 이해하여야 하는데,

알고있던 그대로 이해하면 됨.

***

inline 에다가 background 주면

텍스트 크기만큼 background 가 보이고

***

(이어서)

block 에다가 background 주면

block 은 가로폭이 한줄 다 잡아먹으니까 

1. 부모의 크기가 정해져있고

2. 요소가 빈 것만 아니면 (대신에 height 값은 어떻게든 맞춰야지)

3. 요소에 width / height 를 주지 않아도

알아서 background 가 알맞게 보임.

정확히는

부모의 크기에 맞게 보임.