[:auto]_Width, height 속성 학습

개요

 

공통 코드를 사용하면서 팝업 생성시

팝업을 감싸는 class에 height : auto 옵션을 부여하는데

이로 인해 팝업 크기가 증가하지 않아 문제가 되고

해결했던 방식 정리 및 개념 학습

 

해결

height : auto 가 걸려있다면 height-min 을 지정하면 해당 높이 이하로 떨어지지 않기 때문에 auto 적용을 무시할 수 있다.

---

:auto 속성 개념

 

auto 속성은

Inline-block 에서의 기능과 

block 에서의 기능이 다릅니다.

 

Inline-Block 요소에서 auto 는 내용물의 크기에 맞춰 자동 크기조절의 의미를 가집니다.

 

block 요소에서의 auto 는

 

• height 의 경우 Inline-block 요소와 마찬가지로 자식의 크기에 맞춰서 조절됩니다.
• width 의 경우 100% 와 비슷하게 부모의 크기에 맞춰서 조절됩니다.

단 width 의 100% 옵션과 다른점은 부모의 크기 - 자신 요소의 margin 값을 뺀 값이 너비가 됩니다.

 

감사합니다.