진보호스팅 블로그

4.1. Box Model
CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다.

4.2. 외부여백(Margin) 속성
margin 속성은 문단의 테두리와 외부의 다른 요소와의 간격을 조절할 때 사용되는 속성이다.
margin-left, margin-right, margin-top, margin-bottom을 이용하여 각 요소의 margin 값을 각각 주거나 margin 속성 - 대표속성이다 - 을 이용하여 동시에 줄 수 있다.
속성은 다음과 같다.

속성 속성값 설명 margin-left 길이 | 퍼센트 | auto 왼쪽 margin의 폭을 정한다. margin-right 길이 | 퍼센트 | auto 오른쪽 margin의 폭을 정한다. margin-top 길이 | 퍼센트 | auto 윗쪽 margin의 폭을 정한다. margin-bottom 길이 | 퍼센트 | auto 아래쪽 margin의 폭을 정한다. margin 길이 | 퍼센트 | auto 네 곳의 margin폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다.

   길이 : 상대길이와 절대길이가 있다.
    - 상대길이 : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
    - 절대길이 : in, cm, mm, pt(포인트 : 1pt=1/72in), pc(피카 : 1pc=12pt)
   퍼센트 : 부모가 되는(현재의 요소가 포함된) 요소의 폭을 기준으로 한다.
   auto : 브라우저가 자동으로 정한다.

CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다.

☞ 하나의 요소가 다른 요소를 포함하고 있을 때 부모요소의 특성이 자식 요소에도 똑같이 적용되는 경우가 있다. 이를 상속(Inheritance)라고 한다. margin 속성의 경우 에는 P에 margin 값을 주었어도, P에 포함된 SPAN의 margin값에는 영향을 미치지 않는다는 뜻이다.

☞ margin과 같이 여러 개의 속성을 하나로 묶어서 쓰도록 한 속성을 대표속성(Shorthand property)이라고 한다. 대표속성에는 초기값이 없다.

4.3. 내부여백(Padding) 속성
패딩 속성은 문단의 내용과 문단의 테두리 사이의 간격을 지정할 때 사용되는 속성이다. 폭을 지정하는 속성으로, padding-left, padding-right, padding-top, padding-bottom을 이용하면 4 곳의 패딩 값을 각각 줄 수 있고, padding 속성을 이용하면 4곳의 패딩 값을 동시에 줄 수 있다.

속성 속성값 설명 padding-left 길이 | 퍼센트 왼쪽 padding의 폭을 정한다. padding-right 길이 | 퍼센트 오른쪽 padding의 폭을 정한다. padding-top 길이 | 퍼센트 윗쪽 padding의 폭을 정한다. padding-bottom 길이 | 퍼센트 아래쪽 padding의 폭을 정한다. padding 길이 | 퍼센트 네 곳의padding폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다. 대표속성에는 초기값이 없다.

	H1 { background: lime; padding: 1em 2em; } /*H1의 배경색은 라임색이고, 상하 패딩 폭은 1em, 좌우 패딩 폭은 2em이다.*/

4.4. 테두리(Border) 속성
테두리의 폭, 색, 모양을 지정하는 속성이다.

4.4.1. Border-width 관련 속성

속성 속성값 설명 border-top-width thin | medium | thick | 길이 윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 medium이다. border-right-width thin | medium | thick | 길이 오른쪽 보더의 폭을 정한다. border-bottom-width thin | medium | thick | 길이 아랫쪽 보더의 폭을 정한다. border-left-width thin | medium | thick | 길이 왼쪽 보더의 폭을 정한다. border-width thin | medium | thick | 길이 네 곳의 보더 폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.

	H1 { border-width: thin } /* thin thin thin thin */ H2 { border-width: thin thick } /* thin thick thin thick */ H3 { border-width: thin thick medium } /* thin thick medium thick */

4.4.2. Border-color 관련 속성

속성 속성값 설명 border-top-color 색이름 | RGB code 윗쪽 보더의 색을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 자신의 color 속성 또는 부모 요소의 color 속성의 값이다. 윈도우의 기본 16색인 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow는 이름을 그대로 쓸 수 있다. 이상 16색 외에도 orange, pink 등, 색 이름을 쓰면 그대로 나오는 것들이 더 있는데 브라우저에 따라서 지원되지 않을 수도 있으므로 주의해야 한다. RGB 값은 색생을 red, green, blue의 조합으로 나타내는 것으로 #뒤에 6자리의 숫자나 문자의 조합으로 만들어진다. RGB표를 참고한다.   -> RGB값참고페이지 border-right-color 색이름 | RGB code 오른쪽 보더의 색을 정한다. border-bottom-color 색이름 | RGB code 아랫쪽 보더의 색을 정한다. border-left-color 색이름 | RGB code 왼쪽 보더의 색을 정한다. border-color 색이름 | RGB code 네 곳의 보더 색깔을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.

	H1 { border-color : black } /* black black black black */ H2 { border-color : black yellow } /* black yellow black yellow */ H3 { border-color : black yellow red } /* black yellow red yellow */

4.4.3. Border-style 관련 속성

속성 속성값 설명 border-top-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 윗쪽 테두리border의 모양을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 없다. border-right-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 오른쪽 테두리border의 모양을 정한다. border-bottom-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 아랫쪽 테두리border의 모양을 정한다. border-left-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 왼쪽 테두리border의 모양을 정한다. border-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.

	span { border-style : dottted } span.solid { border-style : solid } span.dashed { border-style : dashed } span.double { border-style : double } span.groove { border-style : groove } span.ridge { border-style : ridge } span.inset { border-style : inset } span.outset { border-style : outset }

4.4.4. Border-width 관련 속성

속성 속성값 설명 border-top border-top-width|| border-top-style || color 윗쪽 테두리border의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 각각의 속성의 초기값이다. border-right border-right-width || border-right-style || color 오른쪽 테두리border의 모양을 정한다. border-bottom border-bottom-width || border-bottom-style || color 아랫쪽 테두리border의 모양을 정한다. border-left border-left-width || border-left-style || color 왼쪽 테두리border의 모양을 정한다. border-style border -width | border -style | color 네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.

다응의 그림을 보면서 지금까지 정리한 내용들을 확인해 보도록 하자.