12. 박스 속성 (1)

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

엘리먼트 박스의 이해

엘리먼트는 HTML 문서의 일부이며 HTML 컨테이너 태그에 의해 설정된다. 

 

- 박스의 구성요소

HTML 엘리먼트에는 상단, 우측, 하단, 좌측(top, right, bottom, left)으로 네 면이 있다. 이러한 네 면은 엘리먼트 박스를 구성하고 이러한 박스에 CSS박스 속성을 적용할 수 있다. 박스의 각 면에는 다음과 같은 속성이 있다. 

(1) 콘텐츠

박스의 중신에 있는 콘텐츠는 페이지의 내용이기도 하다. 콘텐츠에는 사용 중인 모든 텍스트, 리스트,폼, 이미지 등이 있다.

 

(2) 자식 엘리먼트

부모 엘리먼트에 포함된 엘리먼트는 고유 HTML태그에 의해 설정된다. 자식 엘리먼트는 보통 부모와 무관하게 제어할 수 있는 자체 박스를 갖고 있다. 

 

(3) 너비 및 높이

콘텐츠 영역의 크기다. 너비와 높이를 지정하지 않으면 브라우저가 크기를 결정한다. 

 

(4) 패딩 

보더 및 엘리먼트 콘텐츠 사이의 공간이다. 배경색과 이미지도 이 공간을 채운다. 설정하지 않으면 패딩은 보통 0이 된다.

 

(5) 배경 

콘텐츠와 엘리먼트 패딩사이의 공간이다. 배경은 단색이 될 수고 있고 하나 이상의 배경 이미지, 배경 그라디언트가 될 수도 있다. 

 

(6) 보더

엘리먼트를 감싸는 구분선(라인)으로 개별면에 따라 별도로 설정할 수 있다. 보더는 색상, 너비, 스타일(직선, 점, 점선 등)을 설정하지 않으면 보이지 않는다. 또 보더에는 배경 이미지도 설정할 수 있다. 설정하지 않으면 보더 크기는 보통 0이 된다. 

 

(7) 외곽선

보더와 비슷하지만 아예 공간을 차지하지 않는다. 마진 및 배경에 있는 주변 형제 엘리먼트 밑으로 보인다. 

 

(8) 마진

엘리먼트의 보더와 창의 다른 엘리먼트 사이의 공간. 설정하지 않으면 브라우저가 마진을 결정한다. 

 

콘텐츠의 너비 및 높이를 지정한다고 해서 엘리먼트가 페이지에서 차지하는 공간의 너비 및 높이가 설정되지는 않는다. 페이지의 전체 너비에는  패딩 및 측면 보더도 포함된다. 

 

엘리먼트 너비 = 콘텐츠 너비 + 왼쪽 패딩 + 왼쪽 보더 너비 + 오른쪽 패딩 + 오른쪽 보더 너비

 

높이는 콘텐츠의 높이가 설정되고 오버플로우가 설정되지 않으면 콘텐츠 및 패딩과 보더를 모두 수용할 수 있을 때까지 높이가 늘어난다. 

 

엘리먼트 높이 =  콘텐츠를 보여주는데 필요한 높이 + 상단 패딩 + 상단 보더 너비 + 하단 패딩 + 하단 보더 너비

 

오버플로우를 hidden, scroll, auto로 설정하면 높이가 계산된다. 

 

엘리먼트 높이 =  콘텐츠 높이 + 상단 패딩 + 상단 보더 너비 + 하단 패딩 + 하단 보더 너비

 

엘리먼트 내에 들어갈 수 없는 콘텐츠는 보이지 않거나 스크롤을 통해 볼 수 있다. 

 

엘리먼트 보여주기

모든 엘리먼트는 보여줄 방식에 따라 인라인 또는 블록으로 클래스 화 할 수 있다. 기본적으로 모든 태그에는 주변 태그에 맞게 보여주기 위한 표시 형식이 있다. 

 

display 속성을 사용하면 엘리먼트가 위 또는 아래로 줄 바꿈을 포함할지(블록), 줄 바꿈 없이 다른 엘리먼트에 포함될지 (인라인), 리스트의 일부로 처리할지(리스트), 또는 보여 줄지 여부 자체(none)를 지정할 수 있다. 

 

- 엘리먼트의 표시 형식 결정

/*
inline : 엘리먼트를 가로로 흘러가게 하며 부모 엘리먼트를 만날때까지 형제 엘리먼트를 왼쪽에서 오른쪽으로 배치한다. 
부모엘리먼트를 만나면 줄바꿈을 추가해 콘텐츠를 다음 줄로 줄바꿈 한다.
이때 박스 바로 앞과 뒤에 있는 강제 줄바꿈은 항상 무시된다.

block : 강제 줄바꿈을 박스 위와 아래에 위치시켜 엘리먼트가 수직으로 배치되게한다. 
이 속성값을 사용하면 박스의 너비가 부모 엘리먼트 박스의 너비로 설정된다. 

inline-block : 엘리먼트를 인라인으로 정의하지만 엘리먼트 내의 콘텐츠는 블록으로 처리한다. 

run-in : 형제 엘리먼트가 블록 엘리먼트가 아니면 블록 엘리먼트로 기능하고, 형제 엘리먼트가 블록 엘리먼트이면 인라인 엘리먼트로 기능한다. 
이 속성값이 제대로 동작하려면 형제 엘리먼트에 run-in을 사용하거나 플로팅을 적용할 수 없다.

table : 텍스트의 첫 줄에 list-item 표시를 하고 텍스트 위아래에 줄바꿈을 적용한다. 
이코드를 사용하려면 리스트 엘리먼트를 명시적으로 사용하지 않아도 항목을 리스트항목으로 만들 수 있다. 

inherit : 설정된 display 값 또는 엘리먼트 부모의 암시적인 값을 사용한다. 

none : 엘리먼트가 CSS브라우저에서 보이지 않게 한다. 페이지에 해당 콘텐츠가 없는 것처럼 보이게 된다. 
*/

nav.global { display : block; }
nav.global li { display : inline; }

 

엘리먼트의 너비 및 높이

기본적으로 브라우저는 엘리먼트의 너비 및 높이를 모든 콘텐츠를 보여주는 데 필요한 사용 가능 너비 및 높이를 100% 값으로 자동 설정한다. 

특정 너비 및 높이를 설정하는 것 외에 엘리먼트의 최소 및 최대 너비와 높이를 설정해 너비 및 높이 범위를 지정할 수 있다. 이러한 기능은 큰 화면에서 보더라도 보기 이상할 정도로 늘어나지 않는 유연한 디자인을 적용할 때 특히 유용하다. 

 

article { 
max-width : 980px;
min-width : 660px;}

 

콘텐츠 오버플로우 제어

엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않으면 일부 콘텐츠가 보이지 않게 된다. overflow속성을 사용하면 이렇게 잘리는 콘텐츠를 처리하는 방식을 지정할 수 있다. overflow-x와 overflow-y를 사용해 너비나 높이의  오버플로우를 개별적으로 설정할 수 있다.

 

- 오버플로우 제어 정의

/*
visible : 기본적으로 브라우저가 잘린 영역을 무시하게 함으로써 콘텐츠를 박스 밖으로 밀어내 
엘리먼트의 잘린영역이 보이게한다. 

hidden : 오버플로우를 숨기고 스크롤바가 나타나지 않게 한다. 

scroll : 사용자가 엘리먼트의 콘텐츠를 스크롤해 볼 수 있게 가시 영역 주변에 스크롤을 설정한다. 
이 값을 사용하면 스크롤바가 필요 없는 경우에도 스크롤바 공간이 마련된다. 

auto : 스크롤바를 보여줄지 여부를 브라우저가 판단하게 한다.
*/

aside { 
display : block;
width :200px;
height : 400px;
overflow : auto;}

 

창 내에서의 플로팅 엘리먼트

엘리먼트 위치를 문서 내에서 정확히 잡는 것 외에 CSS를 활용하면 엘리먼트를 플로팅 시켜서 다른 엘리먼트와의 상호작용 방식을 설정할 수도 있다. 

 

CSS의 float속성을 사용하면 콘텐츠 주변에 텍스트를 배치하거나 블록 엘리먼트를 나란히 배치해 칼럼을 만들 수도 있다.

 

- 엘리먼트 플로팅 적용 

/*
right : 엘리먼트를 다른 엘리먼트의 오른쪽에 정렬해서 이어지는 엘리먼트들이 이 엘리먼트의 왼쪽에서 
가로로 줄바꿈되게 한다.

left : 엘리먼트를 다른 엘리먼트의 왼쪽에 정렬해서 이어지는 엘리먼트들이 이 엘리먼트의 오른쪽에서 
가로로 줄바꿈되게 한다. 

none: 이 엘리먼트의 플로팅을 재정의한다.

*/

article {
max-width : 980px;
min-width : 660px;
float : left;}

 

- 엘리먼트 플로팅 방지

/*
right : 엘리먼트의 오른쪽에서 줄바꿈을 방지한다. 

left : 엘리먼트의 왼쪽에서 줄바꿈을 방지한다. 

both : 엘리먼트의 양쪽에서 줄바꿈을 방지한다.

none: 이전에 설정한 clear속성을 재정의한다.

*/

footer {
width : 100%;
clear : both;}