[css] width와 height의 대해서 알아보자

div를 사용하여 기본 샘플을 살펴보자.

See the Pen 너비(width, height) by Myeongjun Go (@junngo) on CodePen.

코드를 보면 div를 선언하고 width와 height가 각각 100px로 설정이 되어있다.

이 2개의 속성의 기본값은 auto(자동)이다. 특별히 px같은 값으로 명시를 하지 않는다면 이 2개의 속성은 브라우저가 자동으로 계산해준다. 이 점을 인지하고 있지 못하다면  width나 height 속성을 제대로 활용할 수가 없다. 하나 지우면 갑자기 넓어지고, 다른걸 지우면 안나고 하는 현상이 발생하기 때문이다.

자동으로 계산이 된다는 이야기는 태그가 블록인지 인라인지에 따라서 달라진다.

 

인라인 요소

대표적인 인라인 태그인 span 태그를 살펴보자.

width: 콘텐츠 크기만큼 늘려준다.

height: 콘텐츠 크기만큼 늘려준다.

 

* 인라인 요소는 width 와 height를 명시해도 효과가 전혀 없다. 인라인은 가로 세로 크기가 명시가 안된다.

 

블록 요소

대표적 블록 태그는 div를 살펴보자.

width: 가로 요소를 부모 크기만큼 최대한 늘려준다.

height: 세로 요소를 컨텐츠 크키만큼 늘려준다.

 

세로 요소는 지정된  값이 없고, 콘텐츠도 없다면 하면에 아예 출력이 되지 않는다. 이점에 대해서는 주의가 필요.

 

추가적 속성 값

max-widht / max-height: 기본 값은 none

min-widht / min-height: 기본 값은 0