[009] 박스모델(block, inline)

콘텐츠 영역의 width(가로 길이), height(세로 길이) 조절하기

• 박스 모델의 콘텐츠 영역의 크기를 지정할 때는 width(가로길이), height(세로길이) 속성을 사용합니다.
• width, height 속성값: px(픽셀), cm(센티미터), 백분율(%), auto 등으로 지정할 수 있습니다.
• width와 height는 좌우 padding과 테두리(border) 두께를 합친 값입니다.

박스 모델의 width, height

[예제1] div박스에 width와 height 적용해보기

• 아래 코드에서, 빨간 div 박스는 px 고정값으로 설정하여 브라우저 창의 크기와 상관없이 크기가 유지된다.
• 반면에 파란 div 박스는 % 값으로 설정하여, 부모요소(body), 즉 웹 문서 창의 크기에 따라 달라진다.

See the Pen 009_예제1 by wootekken (@wootekken) on CodePen.

 

화면에 가로/세로로 배치하는 방법 결정하기

• 블록(block) 요소와 인라인(inline) 요소의 태그는 서로 성격이 변할 수 있다.
• display 명령어를 사용하면 블록 요소를 인라인으로 바꾸거나 인라인 요소를 블록으로 바꿀 수 있다.

 

[예제2-1] inline => block 요소로 바꾸기

See the Pen 009_예제2-1 by wootekken (@wootekken) on CodePen.

 

[예제2-2] block => inline 요소로 바꾸기

See the Pen 009_예제2-2 by wootekken (@wootekken) on CodePen.

 

• inline 요소로 설정하면 한 줄에 배치할 수 있지만 width, height 같은 block 성질의 값이 적용되지 않는다.
• 어떤 요소를 inline 처럼 가로로 배치하면서 width, height 같은 block 성질이 적용되게 하려면 display 명령어에 inline-block 이라는 속성을 주면 된다.
• inline-block 속성은 inline과 block 속성 두 가지를 모두 가진다.

 

[예제2-3] inline-block 요소로 바꾸기

 

See the Pen 009_예제2-3 by wootekken (@wootekken) on CodePen.

 

[예제2-4] none 속성으로 요소를 화면에서 없애기

 

See the Pen 009_예제2-4 by wootekken (@wootekken) on CodePen.

 

[퀴즈1] 다음 조건에 맞는 코딩을 하세요.

그림1

• 아래 코드를 수정하여 위의 "그림1"과 같이 나타나게 하세요.
• div 박스의 width와 height는 각각 70px로 수정하고, 여백 margin은 10px로 하세요.
• block 성질의 박스가 가로로 놓이면서 width와 height 속성을 적용할 수 있게 하세요.

 

See the Pen 009_퀴즈1 by wootekken (@wootekken) on CodePen.

 

퀴즈1정답

See the Pen 009_퀴즈1 by wootekken (@wootekken) on CodePen.