CSS 박스 모델 2

 

contents box : 값이 들어가는 텍스트, 이미지의 실제 영역

padding box : 콘텐츠 박스 테두리와 콘텐츠 사이의 공간

border box : 박스를 둘러싼 테두리 영역

margin box : 박스의 외부 영역으로 바로 앞 박스와의 여백

 

 

전체 박스의 크기: content box+ border + margin + padding을 더해야 전체 박스의 크기이다.

 

 

border 설정하는 법

 

border-width : 테두리 두께 속성  네 영역 개별 적용 가능, 상하, 좌우 묶어서 적용 가능

 

border-color : 테두리 색상 속성

 

border-radius : 테두리 모서리를 둥글게 만들기 위한 속성

 

 

 

ex)

div {

   border-width: 10px 8px 6px 4px //top, right, bottom, left

   border-color: red

}

 

여러 속성을 묶어서 지정할 수도 있다.

width, style, color 순으로 지정해서 하면 된다.

 

ex)

div{

   border: 5px solid red;

   border-right: 5px solid red;

}

 

 

-margin

 

다른 박스와의 여백을 의미한다. 박스 간 배치를 위해 사용하고

박스를 가운데 정렬하기 위해도 사용 가능

 

p {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ 
p {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ 
p {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ 
p {margin: 10px;} /* All 10px */

 

 

-레이아웃

 

 

 

 

-position

position은 박스 구성 요소를 배치하기 위한 속성이다.

 

1. static

 

default 값이며 순서대로 배치가 된다.

내가 원하는 방식으로 배치를 할 수가 없다.

왼쪽에서부터 오른쪽으로 추가가 되며 오른쪽에 공간이 없을 경우 다음 줄로 넘어가 배치된다.

 

2. relative

 

static처럼 순서대로 배치가 되긴 하지만 top, right, bottom, left으로 원하는 위치 가능

원래 있던 위치에서 top, right, bottom, left로 이동이 된다.

 

3.absoulte

top, right, bottom, left 속성으로 원하는 위치 배치 가능

기준 위치는 가장 가까운 상위 요소, position 속성이 relative인 요소

absoulte를 사욜 할 때는 콘텐츠 박스를 감싸는 컨테이너 만들고 position이 relative여야 한다.

상위 요소 없으면 좌측 상단이 기준으로 된다.

 

 

4. fixed

기준이 브라우저 창

페이지를 스크롤해도 항상 같은 위치 고정되어 표시

 

 

-박스 요소 정렬

 

1. 블록 요소 가운데 정렬

margin:auto 가운데 정렬하기 위한 일반적 방법 <div>등으로 블록 박스 만들었을 경우

 

.box-center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

 

2. 블럭 요소 좌우 정렬

position 속성을 absoulte로 두고 right나 left를 이용해 원하는 곳으로 정렬

.box-right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid green;
  padding: 10px;
}

 

3. 블럭 요소 수직 정렬

 

padding 속성으로 위/아래 여백 동일하게 지정해 정렬

.box-vcenter {
  padding: 50px 0;  /* 위/아래 50px, 좌/우 0 */
  border: 3px solid green;
}

 

4. 이미지 가운데 정렬

1) 부모 요소 속성에 text-align:center 사용

2) img 태그만 사용하면 블록 속성으로 변경 후 margin:auto 적용

// 방법1
div {
  text-align:center;
}

// 방법2
img {
  display: block;
  margin: auto;
}

...
<div>
   <img src="a.jpg">
</div>