CSS - Position / box-sizing / background-repeat

position

position: static;

차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 

 

 

position: relative;

태그의 위치를 변경하고 싶을 때 사용하며 top, right, bottom, left 속성을 사용해 위치 조절이 가능하다.

 

각각의 태그가 기존 static 였을 때 위치를 기준으로 해당 속성 방향으로 

주어진 픽셀만큼 이동한다.

 

position: absolute;

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, 

absoulte는 postition: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다.

 

만약 부모 중 position이 relative, absolute, fixed 인 태그가 없다면 가장 위의 태그(body)가 기준이 된다. 

 

position: fixed;

스크롤을 이동시켜도 항상 특정 위치에 고정되어 있다. 

 

 

box-sizing

content-box

default 값.

CSS표준에 의해 정의된 기본 스타일이다. width와 height 속성은 오로지 콘텐츠만을 포함하여 측정되며, padding, border, margin을 포함하지 않는다.

 

padding-box

width와 height 속성은 padding 크기를 포함하지만, border과 margin은 포함하지 않는다.

 

border-box

width와 height 속성이 padding과 border를 포함하며 margin을 포함하지 않는다.

 

 

background-repeat

/* 반복하지 않음 */ background-repeat: no-repeat;  /* 가로 방향으로만 반복 */ background-repeat: repeat-x;  /* 세로 방향으로만 반복 */ background-repeat: repeat-y;  /* 가로와 세로 모두 반복 */ background-repeat: repeat;  /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space;  /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repeat: round;

 

background-position

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */ /* 아래와 같은 총 9개의 조합이 가능 */ background-position: left top; background-position: left center; background-position: left bottom; background-position: right top; background-position: right center; background-position: right bottom; background-position: center top; background-position: center center; background-position: center bottom;  /* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */ background-position: 25% 75%;  /* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */ background-position: 100px 200px;