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로 투명화하여 글자에 이미지가 나타난다.
'WEB > CSS' 카테고리의 다른 글
요소 배치 태그 : float / float 태그 해제 : clear (0) | 2022.06.07 |
---|---|
position : 요소 배치하기 - static, relative, fixed, absolute (3) | 2022.06.02 |
넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space (0) | 2022.05.30 |
목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기 (0) | 2022.05.30 |
font-size : medium, smaller, larger, px, % / em, rem 비교 / 줄 바꿈, 글자 간격, 단어 간격 (0) | 2022.05.30 |