CSS3 - CSS 스타일 - 박스 모델 (9)

CSS3 - CSS 스타일 - 박스 모델 (9)

오늘은 CSS3의 아홉번째 내용으로 CSS  박스 모델이란 

무엇인지 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

css 스타일 - 박스 모델이란?

먼저 박스 모델이란 웹 브라우저에서 각 HTML (태그)를 사각형으로 간주하는데

이러한 태그를 박스 사각형 형태로 그리는 것을 박스 모델 이라고 부릅니다.

이 때 CSS는 각 박스의 특징 예를 들어 박스의 배치, 박스의 색상, 박스의 경계선

등을 결정하게 되는데 기본적으로 CSS 박스 모델은 HTML (태그)를 감싸는 

가상적인 박스를 생각하는 것이라고 보면 됩니다.

또 웹 브라우저는 각 태그를 박스로 간주한 상태에서 화면에 배치가 되는데

이러한 각 박스는 아래와 같이 컨텐츠, 패딩, 경계선, 마진을 가집니다.

1. 컨텐츠 : 박스의 내용물로 HTML 태그를 이용한 

텍스트 이미지 비디오 같은 내용물을 이야기 합니다.

2. 패딩 : 컨텐츠 주위의 투명한 영역 입니다. 

3. 경계선 : 패딩과 내용물을 감싸는 경계이며 이러한 경계는

박스의 경계색에 의해 색상이 변합니다. (즉 투명 하다는 말)

4. 마진 : 마진은 경계 주위의 영역으로 마진또한 투명 합니다. 

그리고 위와 같은 내용은 

각 HTML 태그(컨텐츠)의, 패딩, 경계, 마진 등을 사용하면 설정값에 따라서

HTML 태그의 모습이 상당히 달라지는 내용인데  이러한 내용은

이 다음 포스팅 부터 하나씩 알아 보도록 하겠습니다.

추가로 위와 같은 개념을 잘 이해해야 박스 모델을 이용한

디자인을 깔끔하게 하실 수 있습니다.

여기까지 텍스트 박스 모델의 개념에 대해서

알아 보았고 이 다음 포스팅 부터는 경계선, 마진, 패딩 순서로

하나하나 자세하게 알아 보도록 하겠습니다.

이상 CSS3 - CSS 스타일 - 박스 모델 (9)에 관련된 포스팅을 마치도록 하겠습니다.