CSS(SCSS) - 블록(Box) 요소(width & Height)

1) width & Height

width : 가로너비
height : 세로높이

• CSS(SCSS)에서 Box 요소의 가로/세로 너비는 width, height으로 지정해서 사용할 수 있다.

(1) auto : 브라우저가 자동으로 너비를 계산해서 출력 (기본 값)
(auto는 기본값으로 요소에 이미 들어있는 속성의 값이다)
(2) 단위 : px, em, vw 등 단위로 지정해서 출력
(단위는 주로 가로, 세로 단위를 명확하게 값을 주고 싶을때 사용하며 주로 px을 많이 사용한다.)

참고사항)

• Box 속성은 주로 div 태그의 블록 요소이며 본질적으로 아무것도 나타내지 않고, 콘텐츠 영역을 설정하는 용도이다.

• 블록 요소(div)와 인라인 요소(span)의 큰 특징 인라인 요소(text 제어)는 콘텐츠의 크기만큼 자동으로 가로 너비가 최대한 줄어들려고 하고, 블록요소(레이아웃)는 크기만큼 자동으로 가로 너비가 최대한 늘어나려고 하는 특징이 있기 때문이다.

2) max-width & max-height

max-width : 최대 가로너비
max-height : 최대 세로높이

• 요소가 커질 수 있는 최대의 가로너비와 세로높이를 말한다.

(1) none : 최대 너비 제한 없음 (기본 값)
(2) auto : 브라우저가 너비를 계산
(3) 단위 : px, em, vw 등 단위로 지정

3) min-width & min-height

min-width : 최소 가로너비
min-height : 최소 세로높이

-> 요소가 작아질 수 있는 최소 가로너비와 세로높이를 말한다.

(1) 0 : 최소 너비 제한 없음
(2) auto : 브라우저가 너비를 계산
(3) 단위 : px, em, vw 등 단위로 지정