Box Model 속성- 너비 ( width, height )

너비 ( Width, Heigth )

• 박스 모델 속성( Box Model Properties )

 

width( 가로 너비 )

- width : 해당 속성은 요소의 가로 너비를 의미

•  Initial Value( default value, 초기 값, 기본값 ) : auto

       - auto :  자동으로 브라우저가 너비를 계산 

           => 브라우저는 해당 HTML 요소 block(블록) 요소인지 inline(요소) 기타 어떤 특성에 따라 그 요소가 가지고 있는

             가로 너비를 다르게 화면에 출력하는 개념을 가진다

       - 기본값 : 요소에 이미 들어가 있는 속성의 값

• 단위 : px, em, vw등 단위로 지정 

 

heigth( 세로 너비 )

- height: 해당 속성은 요소의 세로 너비를 의미 

•  Initial Value( default value, 초기 값, 기본값 ) : auto

       - auto :  자동으로 브라우저가 너비를 계산

       - 기본값 : 요소에 이미 들어가 있는 속성의 값

• 단위 : px, em, vw 등 단위로 지정 

 

Inline 요소 vs block 요소

inline 요소

• span : 대표적인 인라인 요소, 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 
•      HTML 인라인 요소는 브라우저가 가로 너비와 세로 너비를 계산할 때 포함한 콘텐츠 크기만큼 자동으로 줄어듦 (Width, Heigth가 값이 auto일 때 기본값 설정 안 할 시).
• 가로사이즈와 세로사이즈를 명시할 수 없음(사용할  수 없음)
• 글자(혹은 콘텐츠)를 제어하는 용도로 만들어짐

block 요소 

• div : 대표적인 블록 요소, 본질적으로 아무것도 나타내지 않은 콘텐츠 영역을 설정하는 용도.
• HTML 블록요소는 브라우저가 자동으로 가로너비  계산 할 때 가로 부모요소 크기만 자동으로 늘어남(화면에 왼쪽부터 오른쪽까지 늘어남), 세로너비 계산 할 때 포함한 콘텐츠 크기만 자동으로 줄어듦 (Width, Heigth가 값이 auto일 때 기본값 설정 안 할 시).

코드펜 예제

 

See the Pen Box Model by 김선미 (@tjsalsun) on CodePen.

max-width

- max-width : 요소가 커질 수 있는 최대 가로 너비  

•  Initial Value( default value, 초기 값, 기본값 ) : none

      - none : 최대 너비 제한 없음 

• auto : 브라우저가 너비를 계산함
• 단위 : px, em, vw 등 단위로 지정 

max-height

- max-height : 요소가 커질 수 있는 최대 세로 너비 

•  Initial Value( default value, 초기 값, 기본값 ) : none
• auto : 브라우저가 너비를 계산함
• 단위 : px, em, vw 등 단위로 지정 

min-width

- min-width : 요소가 작아질 수 있는 최소 가로 너비  

•  Initial Value( default value, 초기 값, 기본값 ) :  0 

      - 0 : 최소 너비 제한 없음 

      - 요소의 크기는 음수를 사용할 수 없음 양수 중 제일 작은 값 0이다 

• auto : 브라우저가 너비를 계산함
• 단위 : px, em, vw 등 단위로 지정 

min-height

- min-height : 요소가 커질 수 있는 최대 세로 너비 

•  Initial Value( default value, 초기 값, 기본값 ) :  0 

       - 0 :최소 너비 제한 없음 

• auto : 브라우저가 너비를 계산함
• 단위 : px, em, vw 등 단위로 지정 

코드펜 예제

 

See the Pen max-width, max-height, min-width, min-height by 김선미 (@tjsalsun) on CodePen.

- 해당 html 자식요소는 부모요소만큼 가로 너비를 갖으며, 가로 너비는 기본값 auto로 설정되어 있다

- 주석을 풀 경우 /*   width: 100px; */ ( ctrl + / )할 경우 자식요소는 가로 너비 크기가 100px로 하면 작아진다(width:auto 부분 주석해 주세요)

 max-width 일 경우 

- parent width 부분  /*   width: 300px; */ 주석을 푼다음 

 - child  width 부분  auto 명시 후 /*   max-width: 200px; */ 주석 풀면 최대 가로 너비를 200px 설정 그 이상 커질 수 없다 

min-width 일 경우 

 -(/*   min-width: 400px; */ 주석 풀어주세요) 최소 가로 너비를 400px 설정하면 400px 보다는 줄어들 수 없다

 

---

TIL

key point 

min과 max를 어디서 사용하기 좋을까? 

 

느낀점

 

미디어 쿼리랑 사용하면 반응형을 만들수 있을 거 같아 유용했다

오늘의 학습 만족도 
⭐⭐⭐⭐⭐