5주차 - 레이아웃을 구성하는 CSS 박스 모델

레이아웃을 구성하는 CSS 박스 모델

웹 문서의 경우 내용 배치시 각 요소를 박스 형태로 구성하게 되는데 이를 'CSS 박스 모델'이라고 한다.

CSS가 적용되는 구역을 설정하여 어떻게 표현되는지를 보는 방법같음. 이를 박스 형태로 구성하여 시각적으로 바로 판단할 수 있게끔 컨텐츠 영역, 테두리, 그리고 여백으로 나누는 듯 하다.

08-1 CSS와 박스 모델 08-2 테두리 스타일 지정하기 08-3 여백을 조절하는 속성 08-4 웹 문서의 레이아웃 만들기 08-5 웹 요소의 위치 지정하기

08-1 CSS와 박스 모델

CSS 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스모델에는 "마진", "패딩", "테두리"로 있다.

블록 레벨 요소와 인라인 레벨 요소

• 블록 레벨 요소 블록레벨block-level요소 : 태그를 사용해 요소를 삽입했을 떄 혼자 한 줄을 차지하는 것을 가리킨다. 특징 : 해당 요소의 너비가 100%라는 의미로 블록레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 대표적으로 <h1>, <div>, <p> 태그 등이 있다.

• 인라인 레벨 요소 인라인레벨inline-level요소 : 한 줄을 전부 점유하지 않습니다. 특징 : 컨텐츠 영역만 점유하고 나머지 공간에 다른 요소가 올 수 있다. 대표적으로 <span>, <img>, <strong> 등이 존재한다.

박스 모델의 기본 구성

(외부 or 내부)스타일 시트에서 박스 형태의 요소를 박스 모델box model요소라고 합니다. 박스 모델의 구성 요소 : 컨텐츠 영역, 패딩(박스와 컨텐츠 영역 사이), 테두리, 그리고 마진(여러 박스 모델 사이의 여백)

앞서 만든 예제 파일을 통해 현재 들어가있는 박스 모델도 확인해볼 수 있다.

컨텐츠 영역의 크기를 지정하는 width, height 속성

개념 : 박스 모델에서 컨텐츠 영역의 크기를 width, height 속성을 이용하여 조절할 수 있다.

종류	설명
<크기>	너비나 높이의 값을 px이나 em 단위로 지정합니다.
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분육(%)로 지정합니다.
auto	박스 모델의 너빗값과 높잇값이 컨텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다.

너비 높이 지정 예제 진행

박스 모델의 크기를 계산하는 box-sizing 속성

실제 웹문서에서 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 컨텐츠 영역 외에도 컨텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 합니다. 웹 문서에서 텍스트와 이미지 등의 다양한 요소를 배치할 때 매번 패딩과 테두리의 값을 계산해서 박스 모델의 크기를 넣기에는 다소 번잡하다. 이를 해결하기 위해 나온게 box-sizing 속성이다.

종류	설명
border-box	테두리까지 포함해서 너빗값을 지정합니다.
content-box	컨텐츠 영역만 너빗값을 지정합니다. 기본값이빈다.

박스 모델에 그림자 효과를 주는 box-shadow 속성

개념 : CSS에서는 box-shadow 속성을 사용하여 그림자 효과를 부여할 수 있다. 기본형 : box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset 특징 : 수평거리와 수직거리는 반드시 지정되어야 한다.

종류	설명
<수평 거리>	그림자가 가로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만듭니다. 필수 속성입니다.
<수직 거리>	그림자가 세로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만듭니다. 필수 속성입니다.
<흐림 정도>	이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시합니다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없습니다.
<번짐 정도>	양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시됩니다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보입니다. 기본값은 0입니다.
<색상>	한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있습니다. 기본값은 현재 검은색입니다.
inset	이 키워드를 함께 표시하면 안쪽 그림자로 그립니다.

08-2 테두리(border) 스타일 지정하기

테두리 스타일은 점선인지 실선인지, 두께와 색상을 지정할 수 있다.

박스 모델의 방향 살펴보기

박스 모델은 상하좌우 4개의 방향이 있어서 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나, 모두 다르게 지정할 수도 있다. 박스 모델의 방향을 가리키는 예약어를 인지해두자.

테두리 스타일을 지정하는 border-style 속성

테두리 두께를 지정하는 border-width 속성

개념 : 테두리의 두께를 지정할 수 있다. 기본형 : border-width: <크기> | this | medium | thick 특징 : 테두리 두께를 4개 방향 다르게 지정하고 싶을 때 각각 "border-top-width", "border-rigth-width"와 같이 표현 할 수도 있다.

#box1 { border-width: 2px; }
#box2 { border-width: thick thin; }
#box3 { border-width: thick thin thin; }
#box4 { border-width: 10px 5px 5px 10px; }

앞서 배웠던 top->right->bottom->left 방향순으로 width이 설정이 되고, 생략되어 있는 부분의 경우 top-bottom, right-left가 동일한 값으로 설정된다.

테두리 색상을 지정하는 border-color 속성

개념 : 테두리의 색상을 지정할 수 있다. 특징 : border-width와 마찬가지로 4가지 방향에 설정이 가능하다.

테두리 스타일 묶어 지정하는 border 속성

테두리 스타일을 개별적으로 지정하는 방법에 대해 알아보았다. 이제는 한꺼번에 설정하는 방법에 대해 알아보자.

둥근 테두리를 만드는 border-radius 속성

개념 : 박스 모델의 테두리의 모서리의 radius를 설정한다. 기본형 : border-radius: <크기> | <백분율>

종류	설명
<크기>	반지름 크기를 px, em의 단위와 함께 수치로 표시합니다.
<백분율>	현재 요소의 크기를 기준으로 비율(%)로 지정합니다.

꼭짓점마다 따로 둥글게 처리하기

개별적으로 꼭짓점을 처리하고 싶다면 예약어를 알아두어야 한다.

꼭짓점을 타원으로 만들수도 있는데, 이는 꼭지점에 원 대신 타원이 있다 생각하고 가로 반지름과 세로 반지금을 개별적으로 지정해주는 것이다. 기본형 : border-radius: <가로 반지름> / <세로 반지름>;

특정 위치의 꼭짓점을 나타내는 경우 슬래시(/)를 넣지 않는다. 기본형 : border-위치-radius: <가로 반지름> <세로 반지름>

DO it! 실습. 박스 모델 영역의 크기 정하고 테두리 그리기

08-3 여백을 조절하는 속성

두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 한다.

요소 주변의 여백을 설정하는 margin 속성

마진margin : 요소 주변의 여백을 의미 기본형 : margin: <크기> | <백분율> | auto 특징 : 앞선 개념들과 마찬가지로 4가지 방향으로 지정한다.

종류	설명	예시
<크기>	너빗값이나 높잇값을 px이나 em 같은 단위와 함꼐 수치로 지정합니다.	margin: 50px;
<백분율>	박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정합니다.	margin: 0.1%
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.

margin 속성을 사용하여 웹 문서를 가운데 정렬하기

앞서 text-align 속성을 이용하여 텍스트를 정렬하는 방법에 대해 배워보았다. 하지만 웹 문서 전체를 화면 중앙에 배치하기 위해서는 어떻게 해야 할까?

마진 중첩 이해하기

박스 모델에서 마진을 지정할 때 주의해야 할 점 : 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진 값이 큰 쪽으로 겹쳐지는 문제가 발생 -> 마진 중첩margin overlap, 마진 상쇄margin collapse

세로로 요소가 나열될 경우에 대해 알아보았다. 가로로 요소가 나열된 경우는 어떻게 되어있을까?

컨텐츠와 테두리 사이의 여백을 설정하는 padding 속성

패딩padding : 컨텐츠 영역과 테두리 사이의 여백을 의미한다. 마진과 쓰임이 굉장히 비슷하다. 다만 여백의 위치가 테두리 밖이냐 안이냐 차이일뿐

Doit! 실습. 박스 모델 영역에 여백 추가하고 중앙에 배치하기

08-4 웹 문서의 레이아웃 만들기

웹 문서의 레이아웃을 만들 떄 사용하는 웹 요소 배치 방법을 알아보자

배치 방법 결정하는 display 속성

개념 : 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 해준다. 용도 : 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만듭니다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만듭니다.
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있습니다.
none	해당 요소를 화면에 표시하지 않습니다.

왼쪽이나 오른쪽으로 배치하는 float 속성

float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있다.

종류	설명
left	해당 요소를 문서의 왼쪽에 배치합니다.
right	해당 요소를 문서의 오른쪽에 배치합니다.
none	좌우 어느쪽에도 매치하지 않습니다. 기본값입니다.

float 속성을 해제하는 clear 속성

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달됩니다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성입니다.

display: inline-block와 float: left 속성은 어떻게 다른가?

display: inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float: left로 배치하면 가로로 배치될 때 요소에 기본 마진과 패딩이 없습니다. 그래서 필요하다면 요소마다 마진과 패딩을 지정해야 한다.

Doit! 2단 레이아웃 만들기

08-5 웹 요소의 위치 지정하기

position 속성을 사용하여 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다. position 속성에 대해 알아보자.

웹 요소의 위치를 정하는 left, right, top, bottom 속성

개념 : 웹 문서에서 요소를 원하는 위치에 비치할 수 있다.

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정합니다.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정합니다.
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정합니다.
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정합니다.

position이나 float나 본문아래 배치나 본문위 배치처럼 일반적인 공간을 차지하는 개념은 아닌듯 하다.

배치 방법을 지정하는 position 속성

개념 : 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.

종류	설명
static	문서의 흐름에 맞춰 배치합니다. 기본값입니다.
relative	위칫값을 지정할 수 있다는 점을 제외하면 static과 같습니다.
absolute	relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치합니다.
fixed	브라우저 창을 기준으로 위치를 지정해 배치합니다.

position: absolute라고 한 후 위칫값을 지정하면 요소 중에서 position: relative를 사용한 요소를 기준으로 위치를 결정합니다.

DOit! 실습. 배경 위에 글자 표시하기