박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다.
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킴. 혼자 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 <h1>, <div>, <p> 등이 있다.
한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다. 인라인 레벨 요소를 만드는 태그로 <span>, <img>, <strong> 등이 있다.
웹 문서의 블록 레벨 요소는 모두 박스 형태이다. 스타일 시트에서는 이렇게 박스 형태인 요소를 박스 모델box model요소라고 한다.
박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩padding, 박스의 테두리border, 그리고 여러 박스 모델 사이의 여백인 마진margin등의 요소로 구성된다. 이때 마진이나 패딩은 웹 문서에서 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다. 패딩과 테두리, 마진은 상하좌우로 나뉘어 있어 네 방향의 스타일을 따로 설정할 수 있다.
박스 모델에서 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다. width, height 속성에서 사용할 수 있는 값은 다음고 같다.
| 종류 | 설명 |
|---|---|
| <크기> | 너비나 높이의 값을 px이나 em 단위로 지정한다. |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정한다. |
| auto | 박스 모델의 너빗값과 높잇값이 콘텐츠에 따라 자동으로 결정된다. 기본값이다. |
width 속성과 height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킨다. 그래서 웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 된다.
box-sizig은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에서 선택할 수 있다.
| 종류 | 설명 |
|---|---|
| border-box | 테두리까지 포함해서 너빗값을 지정한다. |
| content-box | 콘텐츠 영역만 너빗값을 지정한다. 기본값이다. |
웹 문서 레이아웃을 만들 때는 CSS에서 박스 모델을 사용하는데, 요소의 크기를 쉽게 계산하려면 box-sizing 속성을 border-box로 지정해 놓는 것이 좋다.
CSS에서는 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 따로 사용하지 않고도 그림자 효과를 줄 수 있다. 그림자는 이미지 또는 <div>와 같이 전체 영역에 지정하여 넣을 수 있는데, box-shadow에서 그림자 위치나 색상, 흐림 정도 등을 지정하려면 다음과 같은 형식으로 사용한다.
/* 기본형 */ box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> insetbox-shadow의 속성값에서 수평 거리와 수직 거리는 반드시 지정해야 한다. 그림자의 위치는 수직 거리와 수평의 값에 따라 움직인다.
| 종류 | 설명 |
|---|---|
| <수평 거리> | 그림자가 가로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다. 필수 속성이다. |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 윗쪽에 그림자를 만든다. 필수 속성이다. |
| <흐림 정도> | 이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시한다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없다. |
| <번짐 정도> | 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시된다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보인다. 기본값은 0이다. |
| <색상> | 한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있다. 기본값은 검은색이다. |
| inset | 이 키워드를 함께 표시하면 안쪽 그림자로 그린다. |
박스 모델은 상하좌우 4개의 방향이 있어, 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나, 모두 다르게 지정할 수도 있다. 이때 박스 모델의 4개 방향을 가리키는 예약어를 미리 알아두는 것이 좋다. 맨 윗부분은 top, 오른쪽은 right, 아랫부분은 bottom, 그리고 왼쪽은 left라고 한다. top부터 시작해서 left로 돌아오는 시계방향의 순서를 기억해두어야한다.
테두리 스타일을 지정하는 border-style 속성의 기본값은 none이므로 속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다. 따라서 테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야한다. border-style 속성에서 사용할 수 있는 속성값은 다음과 같다.
| 종류 | 설명 |
|---|---|
| none | 테두리가 없다. 기본값이다. |
| hidden | 테두리를 감춘다. 표에서 border-collapse일 경우 다른 테두리도 표시되지 않는다. |
| solid | 테두리를 실선으로 표시한다. |
| dotted | 테두리를 점선으로 표시한다. |
| dashed | 테두리를 짧은 직선으로 표시한다. |
| double | 테두리를 이중 선으로 표시한다 두 선 사이의 간격이 border-width값이 된다. |
| groove | 테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 듯 입체 느낌이 난다. |
| inset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 groove와 똑같이 표시된다. |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시한다. |
| outset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시된다. |
테두리 스타일과 마찬가지로 두께가 있어야만 화면에 테두리가 나타날 것이다. 테두리 두께를 지정하기 위해서는 border-width 속성을 이용하여 테두리 두깨를 지정할 수 있다. 테두리 두께를 지정할 때는 1px나 5px처럼 크기를 직접 입력할 수도, thin이나 medium, thick 같은 예약어 중에서 선택할 수도 있다.
/* 기본형 */ border-width: <크기> | thin | medium | thick
테두리 두께를 4개 방향 모두 다르게 지정하기 위해서는 border-top-width 처럼 border와 width 사이에 상하좌우 방향을 넣고 하이픈으로 연결한다.
border-width 속성을 사용해서 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정할 수 있는데, 이때 값을 1개만 지정할 수도 있고, 2개나 3개, 또는 4개를 각각 다르게 지정할 수도 있다.
border-color 속성은 박스 모델에서 테두리 색상을 지정할 수 있다. border-color 속성을 사용해서 4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고, border-top-color처럼 border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있다.
테두리 스타일과 두께, 색상을 한꺼번에 표현한다. 각각 다르게 하고 싶다면 border-top과 같이 속성 이름에 테두리 방향을 함께 써서 지정해주면 된다.
/* 예시 */
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리 3px 회색 실선 */
}박스 모델에서 테두리를 표시하면 기본적으로 각진 사각형이다. border-radius 속성을 사용하면 꼭짓점 부분에 원이 있다고 가정해서 궁글게 처리한다.
/* 기본형 */ border-radius: <크기> | <백분율>| 종류 | 설명 |
|---|---|
| <크기> | 반지름 크기를 px, em의 단위와 함께 수치로 표시한다. |
| <백분율> | 현재 요소의 크기를 기준으로 비율(%)로 지정한다. |
border-radius 속성을 사용하여 이미지를 원 형대로 만들 수도 있다. 이미지 요소의 너비와 높이를 똑같이 만든 후 border-radius의 반지름값을 너비나 높이의 50%로 지정하면 원이된다.
박스 모델에서 꼭짓점 4개를 모두 다르게 지정하고 싶다면 border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용한다. 다음은 모서리 4개의 위치를 나타내는 예약어이다.
꼭짓점을 타원으로 만들기 꼭짓점을 타원 형태로 만들 수도 있다. 이 경우에는 꼭짓점에 원 대신 타원이 있다고 생각하면 된다. 그래서 반지름 대신 타원의 가로 반지름과 세로 반지름값을 넣어 주는데, 이때 가로 반지름과 세로 반지름 사이에 슬래시(/)를 넣어 구분한다.
border-radius: <가로 반지름> / <세로 반지름>;
마진margin은 요소 주변의 여백을 의미한다. 따라서 마진을 이용하면 요소와 요소 사이의 간격을 조절 할 수 있다. 마진 또한 박스 모델의 4개 방향에 한 번에 똑같이 지정할 수도 있고, margin 다음에 하이픈을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향메만 지정할 수도 있다.
/* 기본형 */ margin: <크기> | <백분율> | automargin 속성에서도 속성값을 하나만 지정하거나 2개, 3개 또는 4개를 지정할 수 있다. 값이 1개라면 마진값을 4개 방향 모두 지정하지만, 값이 여러개라면 top부터 시계방향으로 적용된다.
| 종류 | 설명 |
|---|---|
| <크기> | 너빗값이나 높잇값을 px나 em 같은 단위와 함께 수치로 지정한다. |
| <백분율> | 박스 모델은 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정한다. |
| auto | display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. |
웹 문서에서 텍스트 요소를 배치할 때는 text-align 속성을 이용했다. 웹 문서 전체를 가운데에 배치하려먼 어떻게 해야할까? 이때 유용하게 사용하는 것이 margin속성이다.
margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 너빗값이 정해져 있어야 한다. 그리고 margin-left와 margin-right의 속성값을 auto로 지정한다. 이렇게 지정하면 CSS에서 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산한다.
박스 모델에서 마진을 지정할 때 주의할 점이 있다. 바로, 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 문제인데, 이런 현상을 마진 중첩margin overlap 또는 마진 상쇄margin collapse라고 한다.
이는 여러 요소를 세로로 배치할 때 맨 위의 마진과 맨 아래 마진에 비해 중간에 있는 마진이 지나치게 커지는 것 같은 상황을 방지하기 위해 처리된 것이다. 마진 중첩은 아래 마진과 위 마진이 서로 만날 때 큰 마진 값으로 합쳐지는 것이고, 오른쪽 마진과 왼쪽 마진이 만날 경우에는 중접되지 않는다.
패딩padding이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같다.
padding속성으로 4개 방향의 마진을 한꺼번에 지정할 수도 있고, padding 다음에 하이픈을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있다.
display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.
display 속성에서 자주 사용할 수 있는 값은 매우 많은데, 이 중에서 문서 레이아웃을 만들 때 자주 사용하는 속성은 다음과 같다.
| 종류 | 설명 |
|---|---|
| block | 인라인 레벨 요소를 블록 레벨 요소로 만든다. |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 만든다. |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. |
| none | 해당 요소를 화면에 표시하지 않는다. |
웹 문서를 만들다 보면 <p> 태그 처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있다. 그런데 <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다. 이럴 때는 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있다.
float 속성은 웹 요소를 문서 위에 떠 있게 만든다. 여기에 떠 있다는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 말한다. float 속성에서 사용할 수 있는 값에는 왼쪽(left)과 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있다.
| 종류 | 설명 |
|---|---|
| left | 해당 요소를 문서의 왼쪽에 배치한다. |
| right | 해당 요소를 문서의 오른쪽에 배치한다. |
| none | 좌우 어느 쪽에도 배치하지 않는다. 기본값이다. |
float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더는 유효하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.
| 종류 | 설명 |
|---|---|
| left | flaot: left를 해제한다. |
| right | float: right를 해제한다. |
| both | float: left와 float: right를 해제한다. |
flaot: left를 이용해 왼쪽으로 배치했다면 clear: left로 종료하고, float: right를 이용해 오른쪽으로 배치했다면 clear: right로 종료한다. float 속성값이 left인지 right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear: both라고 기정하면 된다.
display:inline-block과float: left속성은 어떻게 다른가요?`display:inline-block`은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float: left로 배치하면 가로로 배치될 때 기본 마진과 패딩이 없다. 그래서 필요하다면 요소마다 마진과 패딩을 지정해야 한다. `float: left`를 사용하면 `clear` 속성으로 플로팅을 해제해야 한다.
position 속성보다 먼저 알아두어야 할 속성이 있다. 먼저 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 한다. 이때 사용하는 속성이 left, right, top, bottom이다. 즉 position 속성으로 기준 위치를 정한 뒤, 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다.
| 종류 | 설명 |
|---|---|
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다. |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다. |
| top | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다. |
| bottom | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다. |
position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하다.
position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고, 원하는 위치를 선택할 수도 있다. 이렇게 요소를 다양하게 배치하려면 position 속성에서 사용하는 속성 값의 특성을 잘 이해해야 한다.
| 종류 | 설명 |
|---|---|
| static | 문서의 흐름에 맞춰 배치한다. 기본값이다. |
| relative | 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다. |
| absolute | relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다. |
| fixed | 브라우저 창을 기준으로 위치를 지정해 배치한다. |
position속성 중에서absolute값을 사용할 때는 주의해야 한다. 요소에position: absolute라고 한 후 위칫값을 지정하면 요소 중에서position: relative를 사용한 요소를 기준으로 위치를 결정한다. 만약 부모 요소 중에 없으면 상위 요소를 찾아보고, 그래도 없다면 더 위의 요소를 찾아본다. 다시 말해, 어떤 요소에position: absolute를 사용하려면 부모 요소에는position: relative라고 지정해야 원하는 대로 배치할 수 있다.