CSS의 width , height 속성

요소의 가로 / 세로 너비

기본값(요소에 이미 들어있는 속상이 값), auto : 브라우저가 자동으로 너비를 계산. 이때 브라우저는 해당 요소가 block 요소인지 인라인 요소인지 기타 어떤 특성을 가지고 있는 지에 따라서 그 요소가 가지고 있는 가로 너비를 다르게 화면에 출력

정확하게 크기를 명시, 단위 : px, em, vw 등 단위로 지정

인라인 요소

<span></span>

가로, 세로의 auto 모두 포함한 콘텐츠 크기만큼 자동으로 줄어듬

• <span>태그를 사용하는 경우!

span은 인라인 요소로, 인라인 요소는 본질적으로 가로, 세로 사이즈를 설정할 수 없음! 인라인 요소는 레이아웃을 작업하는 용도가 아니고 글자를 제어하는 용도로 만들어졌기 때문.

<span>Hello</span>

span {
	width: 100px;
    height: 100px;
    background-color: orange;
}

블록 요소

<div> </div>

가로의 auto: 부모 요소의 크기만큼 자동으로 늘어남!

세로의 auto: 포함한 콘텐츠 크기만큼 자동으로 줄어듬!

• 1. 가로, 세로가 100px인 오렌지색 박스가 생성

div {
    width: 100px; 
   	height: 100px;
    background-color: orange;
}
/* 이때 브라우저의 기본 css 초기화해주기 */

• 2. 가로(width)는 기본값, height는 100px 인 오렌지색 박스가 생성

width의 기본값은 무한대이기 때문에 브라우저의 가로길이 만큼의 가로 값이 됨.

div {
/*    width: 100px; 	*/
   	height: 100px;
    background-color: orange;
}

• 3. 가로(width), 세로(height) 모두 기본값크기의 상자

width의 기본값은 무한대인 반면 height의 기본은 값은 0(span과 같음)이기 때문에 상자가 표시되지 않음

div {
/*    width: 100px; 	*/
/*   	height: 100px;`	*/
    background-color: orange;
}

• 4. 가로는 100px, 세로(height)는 기본값인 상자

height는 기본값이 최소값이 되도록 설정되어 있기 때문에 상자는 생성되지 않음

div {
	   width: 100px;
/*   	height: 100px;`	*/
    background-color: orange;
}

max-width, max-height

요소가 커질 수 있는 최대 가로 / 세로 너비, 제한

기본값, none: 최대 너비 제한 없음

단위: px, em, vw 등 단위를 통해서 값을 지정

min-width, min-height

요소가 작아질 수 있는 최소 가로 / 세로 너비, 제한

기본값, 0: 최소 너비 제한 없음

단위: px, em, vw 등 단위를 통해서 값을 지정

<div class="parent">
    <div class="child"></div>
</div>

• child의 width 는 auto, parent의 width는 값이 지정되어 있는 경우 -> child의 width의 max-width 는 parent의 width!

.parent {
    width: 300px;
    height: 200px;
    background-color: royalblue;
}
.child {
    /* width: 100px; */
    height: 100px;
    background-color: orange;
}