Puppy's paw

after도 안먹는다.

focus, placeholder는 되는데

before, after는 왜 수도 코드가 안먹을까....

CSS도 분명히 프로그래밍 되어있을 텐데

작성하다보면 이렇게 되야 하는게 맞는데 예상하지 않은 결과가 나올 때가 많다.

우리가 잘 모르는 요소들이 많기 때문인데 이런 원리를 잘 설명해논 글을 찾기가 쉽지 않다.

css문서를 직접 찾아서 자세히 읽어보면 나와있겠지만 언어의 압박과 그 분량이 너무 많다.

시간나면 읽어보는게 좋지만 css를 깊이 이해하는 것은 항상 우선 순위에 밀려나 있다.

그 동안 이상하게 생각해왔던 것들 중 원리를 이해하고 풀린것 중 하나가 마진의 작동 방식이다.

1. 마진은 마진끼리 영향을 주지 않는다.

2. inline 타입은 마진이 적용되지 않는다.

3. inline-block은 부모 태그를 마진으로 밀어낼 수 있다.

4. block타입은 부모 태그 자체를 마진으로 밀어내지 않는다.

   하지만 마진이 부모에 포함된 solid한 객체를 만나면 밀어낸다.

   border나 padding이 solid한 것에 포함된다. 

5. overflow: hidden 인 부모도 margin collapsed 가 안된다.

아직 그런 적이 없지만 5번때문에 왜 안되는 지 몰라서 개고생하면 참 억울 할 것 같다.

solid하다는 개념도 참 애매하다.

단순히 W3로 css를 공부했다면 이런 개념을 알기 어렵다.

왜 이렇게 직관적으로 파악하기 힘든 개념이 만들어졌는지 모르겠다.