CSS 기본 9강 - Element별 속성(property) 3 -

본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라

는 특정인물과 상황을 만들었습니다.
 

○ 3단계 DIV를 사용해 명함처럼

 이제 여러분이나 우리의 “최삼순” 인턴사원도 HTML문서의 글꼴과 관련되어서는 자유자재로 바꿀 수 있을 것입니다. 이제는 조금 더 큰물에서 놀아보도록 하겠습니다.

 “최삼순” 인턴사원은 지금까지 사원목록을 조금 더 효율적으로 사용하기위해서 이왕이면 지금의 데이터를 가지고 인터넷 명함을 만들면 어떨까 생각을 하게 되었습니다. 이런 그의 생각을 회사의 “무”대리에게 보고를 하니 “무”대리도 당연하다는 듯이 허락을 했습니다. 그리고 “최삼순” 인턴사원은 작업에 들어가기 시작했습니다.

 지금의 사원목록 데이터를 명함형태로 만들기 위해서는 여러분이 이미 알고 있는 DIV를 사용하는 것이 좋을 것 같습니다.
 

 

 DIV에서 알아보았듯이 DIV는 비슷한 내용이나 기능을 가지는 엘리먼트들을 모아서 관리하기 위해서 사용합니다. “최삼순”이 만드는 사원목록과 같은 경우에는 위와 같이 하나의 사원목록 데이터를 DIV로 관리하는 것이 스타일관리를 위해서도 앞으로 만들 명함형태의 사원목록에서도 큰 힘을 발휘 할 것입니다. 그럼 여기서 DIV에 대하여 조금 더 알아보는 시간을 가지도록 하겠습니다.

 DIV를 포함하여 여러분이 만드는 엘리먼트는 box형태로 구성되어 있습니다. 이런 엘리먼트들은 기본적으로 그 안의 내용을 포함할 수 있는 기본 블록박스를 생성하게 됩니다. 이렇게 만들어진 기본(principal) 블록박스는 그 엘리먼트의 내용과 하위에 생성될 수 있는 엘리먼트트 위하여 용기블록을 만들게 됩니다. 여기서 용기블록은 그동안 여러분에게 설명드린 자식과 부모엘리먼트의 관계와 유사합니다. 즉 하위에 생성되는 내용이나 엘리먼트들의 기준이 되는 것입니다. 여러분이 만드는 HTML문서자체도 하나의 큰 박스모델로 생각하시면 편합니다. 가장 상위에 존재하는 박스 모델(대부분 body)를 루트 엘리먼트로 칭하며 그 하위에 생성되는 엘리먼트를 위하여 최초의 용기블록을 만들게 됩니다. 이 최상위엘리먼트의 용기블록의 width와 height 속성값은 여러분이 직접 지정할 수 있으며, auto로 속성값을 정할 경우 width(넓이)는 웹 브라우저의 넓이에 귀속되며, height(높이)는 하위 내용의 양에 따라 자동적으로 늘어나게 됩니다.

 또한 생성된 엘리먼트안에 새로운 하위 엘리먼트가 생기게 되면 하위 엘리먼트가 포함하지 않는 내용을 위하여 부모엘리먼트는 가명의 블록박스를 만들게 됩니다.

<div>   여기는 p 엘리먼트 이전의 가명 블록박스입니다.   <p> 이것은 p의 내용이며 가명 블록박스가 아닙니다.</p>   여기는 p 엘리먼트 다음의 가명 블록박스입니다.   </div>

 

위에서 여러분에게 설명드린 박스모델은 위와 같은 구조를 가지게 됩니다. box model과 용기블록 그리고 내부의 하위 엘리먼트와 가명 블록박스의 관계입니다. 이런 box model에 대한 내용은 대부분 개념적인 부분이 많으며, 간단하게 여러분이 만드는 엘리먼트가 지배하는 범위라고 생각하시면 쉬울 것입니다.

 이제 box model의 개념적인 부분은 위에서 설명되었습니다. 그럼 box model이 어떠한 구조로 이루어졌는지 알아보도록 하겠습니다.

 

박스모델은 위와 같은 구조를 이루고 있습니다. 각각의 명칭은 여러분이 만든 box model의 속성으로 지정하여 각각 값을 지정해 줄 수 있습니다. 그럼 한번 box model의 속성을 지정해 볼까요?

div.centerbox {   width: 70px;   padding: 5px;   margin: 10px;   border: solid 5px;   }

 

위와 같이 “centerbox"라는 class명을 가진 DIV엘리먼트를 만들었습니다. width에는 70px, padding에는 5px, margin에는 10px, 마지막으로 border에는 solid(직선)으로 5px의 속성값을 정해주었습니다. 위와 같은 엘리먼트는 어떻게 웹 브라우저에 보여질까요?


기대 되시죠?ㅋㅋ 다음 강의에서 계속됩니다... CSS기본 10강을 봐주세요...