Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그

1. Box Model

content : 텍스트가 삽입되는 영역

border : 테두리

padding : content와 border 사이 안쪽 여백

margin : border와 다른 태그 영역 사이의 바깥쪽 여백

 

 

2. box-sizing

요소의 너비와 높이를 계산하는 방법을 지정하는 태그

content-box : 컨텐츠 영역을 기준으로 크기를 지정한다. border, padding, margin은 별개이다.

border-box : 테두리를 기준으로 크기를 지정한다. 테두리까지 border, padding, content 포함한 크기로 컨텐츠영역은 설정값보다 작아질 수 있다.

 

 

content-box는 기본 CSS 박스 크기 결정법을 사용한 것으로, 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고 테두리와 안쪽 여백은 이에 더해진다.

border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지한다.

 

 

<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
</style>

두개의 div 태그로 비교해본다. 

 

1) content-box

Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px

content-box로 지정한것은 width, height가 컨텐츠영역에만 지정되었고, 나머지 padding, border은 지정한 만큼 크기를 차지했다. 총 크기는 지정했던 값보다 커졌다.

 

 

 

2) border-box

Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */

너비와 높이로 지정했던 값이 border, padding을 포함한 전체 크기값이 되었다. 컨텐츠영역은 지정한 padding, border 값때문에 작아진다.

 

 

 

 

3. background-clip

요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지를 지정하는 태그

 

border-box : 테두리 안쪽 영역

padding-box : 여백 안쪽 영역

content-box : 컨텐츠 안쪽 영역

text : 텍스트

 

 

4. 배경 이미지 설정

1) background-image

이미지를 배경으로 사용할 수 있는 태그

background-image : url(이미지 경로)

 

 

2) background-repeat

배경 이미지 반복 설정

 

no-repeat : 반복을 안함

repeat-x : 가로 반복

repeat-y : 세로 반복

repeat : 가로세로 반복

 

 

 

3) background-size

배경 이미지 사이즈 설정

px, % 등 사용할 수 있다.

 

cover : 가로 세로 중 작은 비율로 계산해서 전부 채움, 이미지가 잘린다.

contain : 가로 세로 중 큰 비율로 계산해서 채움, 이미지가 영역 전체를 채우지는 못한다.

 

 

 

4) background-position

배경이미지 위치 잡거나, 위치 좌표를 설정하는 태그

x-position y-position : 가로 위치와 세로 위치로 좌표를 설정하거나 아래 속성을 사용한다.

 

top

center

bottom

right

left 

 

 

5) background-origin

배경 이미지를 어느 영역부터 채워나갈지를 지정하는 태그

 

border-box : 테두리 영역 왼쪽 위부터 채우기

padding-box : 안쪽 여백 영역 왼쪽 위부터 채우기

content-box : 컨텐츠(내용) 영역 왼쪽 위부터 채우기

 

 

6) background-attachment

배경 이미지의 스크롤 설정하는 태그

 

scroll : 선택한 요소와 같이 움직인다. 내용을 스크롤해도 배경 이미지는 스크롤되지 않는다. (배경을 요소에 고정)

fixed : 움직이지 않는다. (배경을 뷰포트에 고정)

local : 선택한 요소와 같이 움직인다. 내용을 스크롤하면 배경 이미지도 스크롤된다. (배경을 컨텐츠에 고정)

 

 

 

7) opacity 

투명도 설정

 

 

 

<style>
.clip_text{
            background-image: url(pic.jpg);
            font-size: 50px;
            font-weight: bold;
            background-clip: text;
            -webkit-background-clip: text;
            color:transparent;
        }
</style>

위 방법으로 텍스트에 이미지사진을 넣을 수 있다.

배경이미지를 설정했고, text에 표시되도록했다.

글자를 transparent로 투명화하여 글자에 이미지가 나타난다.