[HTML+CSS][CSS 박스모델] 01 - CSS와 박스모델

 

 

[HTML+CSS][색상과 배경을 위한 스타일] 03 - 그러데이션 효과로 배경 꾸미기

 

CSS에 사용되는 기본 개념들에 대해서 이해하고

CSS의 실질적인 디자인을 만들어보는 시도를 해보자.

 

 

---

 

 

CSS 박스 모델

 

CSS 박스 모델이란

웹 문서의 내용을 박스 형태로 정의하는 방법으로

여러 개의 박스 모델들이 모여 웹 문서를 이루게 된다.

 

이때, 박스 모델은 요소에 따라서 나열 방식이 달라지며

부르는 명칭도 다르다.

 

 

---

 

 

블록 레벨 요소 & 인라인 레벨 요소

 

- 블록 레벨 요소 -

블록 레벨 요소는

태그를 사용해 요소를 삽입했을 때

혼자 한 줄을 차지하는 요소로 다른 요소가 올 수 없다.

 

 

- 인라인 레벨 요소 -

인라인 라벨 요소는 줄을 차지하지 않는 요소로

화면에 표시되는 콘텐츠만큼만 영역을 차지하고

나머지 공간에는 다른 요소가 올 수 있으며,

한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다.

 

 

 

 

 

 

---

 

 

박스 모델 (box model)

 

간단하게 박스 형태의 콘텐츠라고 말하며

텍스트 단락 앞 뒤에 빈 줄이 생기면서

텍스트 단락이 하나의 박스 형태를 가지는 것이다.

 

박스 모델은 실제로 콘텐츠 영역,

박스와 콘텐츠 영역 사이의 여백인 패딩(padding),

박스의 테두리(border),

그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성된다.

 

 

width, height 속성 : 콘텐츠 영역의 크기

 

콘텐츠 영역의 너비와 높이를 지정할 때 사용한다.

 

 

- 실제 콘텐츠 크기 계산하기 -

모던 브라우저에서의 박스 모델의 전체 너비는

너비 값과 좌우 패딩, 좌우 테두리를 모두 더한 값이지만

인터넷 익스플로러 6에서는 너비 값 안에

콘텐츠 너비와 좌우 패딩, 좌우 테두리를 더한 값이 들어 있다고 보면 된다.

 

 

 

 

---

 

 

display 속성 : 화면 배치 방법 결정하기

 

블록 레벨 요소를 인라인 레벨 요소로 바꾸거나

인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있는 기능이다.

 

 

- block 속성 값 -

display : block; 으로 지정할 시

해당 요소를 블록 레벨로 지정한다.

 

 

 

 

- inline 속성 값 -

display : inline; 으로 지정할 시

블록 레벨 요소를 인라인 레벨로 바꿀 수 있다.

 

 

 

 

- inline-block 속성 값 -

요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정한 것으로

블록 레벨 요소와 인라인 레벨 요소

두 가지 특성을 모두 가지고 있다.

 

 

 

 

- none 속성 값 -

해당 요소를 화면에 아예 표시하지 않으며,

웹 사이트를 반응형 웹 디자인 기법으로 작성할 때 PC용 화면에서는 표시하지만

모바일 화면에서는 보이지 않도록 하고 싶은 부분이 있을 경우에 사용한다고 한다.

 

 

그밖에도 다양한 속성 값들이 존재한다.

 

 

---

 

 

블랙레벨과 인라인 레벨은 전에 찾아본 기억이 있지만

이것들이 모두 박스 모델로부터 온 것이라는 것에 굉장히 신기하다.

 

또한 기존과는 달리 내가 원하는 형식으로 배치할 수 있다는 것에

아주 만족스럽다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※