6.1. Width 속성
하나의 요소에 의해 그려지는 box의 폭은 width 속성의 값으로 결정된다.

속성 속성값 설명 width 길이 | 퍼센트 | auto Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. max-width 길이 | 퍼센트 Box의 최대폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. min-width 길이 | 퍼센트 Box의 최소폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다.

속성 속성값 설명 height 길이 | 퍼센트 | auto Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. max-height 길이 | 퍼센트 Box의 최대 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. min-height 길이 | 퍼센트 Box의 최소 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다.

• floating 요소이고, 부모 요소 box에 비해 크기가 더 클 때.
• absolute positioning이 적용되었을 때.
• 음수의 margin을 가질 때.

overflow visible | hidden | scroll | auto Position 속성의 값이 absolute인 요소에 적용되며, 상속되지 않는다. 초기값은 visible이다. visible 크기에 관계없이 내용을 모두 보여준다. hidden 해당 요소에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다. Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다. auto 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다. scroll 언제나 스크롤바를 나타낸다.

아래 예를 보면, 주어진 공간의 크기보다 내용이 길지만, 기본값이 visible이 적용되어 내용이 화면에 모두 나타난다.

	가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다.

Overflow 속성의 값을 hidden으로 해 보자.

	가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다.

Overflow 속성의 값을 auto와 scroll로 준 경우이다.

	overflow : auto /*필요한 수직 스크롤바만 나온다.*/

	overflow : scroll /*수평, 수직 스크롤바가 모두 나온다.*/

6.4. 배경색과 이미지
배경이란, Box model에서 content의 배경이 되는 부분과 padding을 포함한 부분을 말한 다. Border 부분의 색과 모양은 border 속성으로 지정할 수 있다. Margin 부분은 언제나 투명하기 때문에 부모 요소의 배경이 비쳐 보이게 된다. 배경에 관계된 속성은 실제로는 모두 상속되지 않는다. 그러나, background-color 속성 의 기본 초기값이 transparent(투명)이기 때문에 특별히 이 속성을 사용하지 않았을 때는 부모 요소의 배경색이나 무늬가 자식 요소에도 똑같이 나타나 상속된 것처럼 보일 수 있다. 다음의 표를 살펴보면서 하나씩 알아나가도록 하자.

속성 속성값 background-color 색이름 | RGB 값 | transparent background-image url | none background-repeat repeat | repeat-x | repeat-y | no-repeat background-attachment scroll | fexed background-position 퍼센트값 | 길이, top | center | bottom, left | center | right background background-color || background-image || background-repeat || background-attachment || background-position

	FF0000에 해당하는 색

background-image : URL의 값으로 나오는 이미지를 요소의 배경으로 지정할 수 있 다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 none이다. 그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 위쪽에 덮이게 된다.

	이 곳에는 배경이 나오지 않습니다. 이 곳에는 배경이 나와야겠지요. 익스플로러 4.0 이상에서는 잘 나올 겁니다.. 배경그림이 어떠한 방식으로 페이지를 채우는가요? 여기에는 배경이 나오지 않겠지요.

예제에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게 된다.

background-repeat : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 repeat이다. 배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다. Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다.

• repeat : 가로, 세로 모두 연속된다.
• repeat-x : 가로 방향으로만 연속된다.
• repeat-y : 세로 방향으로만 연속된다.
• no-repeat : 그림 한 개만 나온다.

	본문 전체가 물고기배경으로 덮이겠지요. 세로 방향으로만 연속될 겁니다.

위의 예를 보면, 배경 그림을 한 방향으로만 연속시키거나 연속시키지 않을 때(none으로 줄 때)는 시작 위치가 브라우저의 왼쪽 위라는 것을 알 수 있다.

background-attachment : 배경 그림으로 사용한 그림의 위치가, 적용된 요소와 함께 움직이는지, 브라우저의 화면에 고정되는지를 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 scroll이다. 다음에 나오는 background-position과 함께 보자.

background-position : 배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를 정한다. Block-level 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 0%, 0%이다. 퍼센트 값을 썼을 때, background-attachment의 값이 scroll이면, 이 속성이 사용된 요소의 content box(Box dimensions 참고)를 기준으로 한다(padding, border, margin을 포함한 상자가 아니다). Background-attachment의 값이 fixed이면, 전체 화 면의 크기를 기준으로 한다.

	화면의 정 중앙에서 시작해 아래쪽으로만 배경그림이 연속되어야 정상이다.

background : 모든 요소에 적용할 수 있고, 상속되지 않는다. 대표속성에는 초기값이 없다.