1. background-color 속성 : 배경 색 지정하기
background-color : <색상>
영역의 배경 색을 지정할 수 있는 속성으로 색상 부분에는 16진수, rgb, hsl, 색상 명 등을 사용할 수 있다.
기본적으로 모든 웹 문서의 요소는 배경 색이 투명 값으로 지정되어 있다.
이러한 이유로 영역이 상대적으로 큰 body 태그 등에서 배경 색을 입힌 경우,
마치 자식 태그의 영역 또한 해당 스타일을 상속한 것 처럼 배경 색이 입혀졌다고 생각할 수 있지만
앞서 말한 것처럼 배경 색을 따로 지정하지 않은 경우에는 투명이기 때문에
자식 태그는 아직 투명한 상태로 뒤에 위치하는 부모 태그의 배경 색상이 비쳐보이는 것뿐이다.
2. background-clip 속성 : 배경 적용 범위 조절하기
background-clip : border-box | padding-box | content-box
1️⃣ border-box : border 라인을 기준. 테두리 부분까지 모두 배경색이 들어간다. 기본값이다.
2️⃣ padding-box : padding 라인을 기준. 패딩 부분까지 모두 배경색이 들어간다. (border 포함 안 함)
3️⃣ content-box : 컨텐츠를 기준. 컨텐츠 부분에만 배경색이 들어간다.
<style>
div {
width: 500px;
margin-bottom: 30px;
border: 5px dotted;
background-color: cadetblue;
padding: 20px 20px;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
</style>
<body>
<div class="border-box">
이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 제4항과 제5항의 규정에 의하여 확정된 법률을 지체없이 공포하여야 한다. 제5항에 의하여 법률이 확정된 후 또는 제4항에 의한 확정법률이 정부에 이송된 후 5일 이내에 대통령이 공포하지 아니할 때에는 국회의장이 이를 공포한다. 헌법재판소는 법률에 저촉되지 아니하는 범위안에서 심판에 관한 절차, 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.
</div>
<div class="padding-box">
이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 제4항과 제5항의 규정에 의하여 확정된 법률을 지체없이 공포하여야 한다. 제5항에 의하여 법률이 확정된 후 또는 제4항에 의한 확정법률이 정부에 이송된 후 5일 이내에 대통령이 공포하지 아니할 때에는 국회의장이 이를 공포한다. 헌법재판소는 법률에 저촉되지 아니하는 범위안에서 심판에 관한 절차, 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.
</div>
<div class="content-box">
이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 제4항과 제5항의 규정에 의하여 확정된 법률을 지체없이 공포하여야 한다. 제5항에 의하여 법률이 확정된 후 또는 제4항에 의한 확정법률이 정부에 이송된 후 5일 이내에 대통령이 공포하지 아니할 때에는 국회의장이 이를 공포한다. 헌법재판소는 법률에 저촉되지 아니하는 범위안에서 심판에 관한 절차, 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.
</div>
</body>
2. background-image 속성 : 배경 이미지 넣기
background-image : url(파일 경로)
div {
height: 1000px;
border: 2px solid;
background-image: url(images/cat.png);
background-repeat: no-repeat;
}
📌 height 값만 주는 이유
이미지는 종횡비, 즉 가로와 세로 비율이 중요하다.
width 값까지 직접 지정해서 이미지를 넣게 되면 이미지의 비율이 무너져서 원하는 느낌이 나지 않을 수 있다.
때문에 한 쪽 값만 지정해서 다른 한 쪽은 이미지의 비율에 맞게 자동으로 지정되도록 하는 것이 좋다.
3. background-repeat 속성 : 배경 이미지 반복 여부 지정하기
background-repeat : repeat | repeat-x | repeat-y | no-repeat
1️⃣ repeat : 기본값. 화면을 채울 때까지 이미지가 가로와 세로에 반복되어 채워진다.
2️⃣ repeat-x : 화면의 x축 즉 가로로만 반복되어 채워진다.
3️⃣ repeat-y : 화면의 y축 즉 세로로만 반복되어 채워진다.
4️⃣ no-repeat : 이미지를 한 번만 표시한다.
4. background-size 속성 : 배경 이미지 크기 조절하기
background-size : auto | contain | cover | <크기 값> | <백분율>
기본값은 auto 로 지정한 영역에 들어가는 이미지의 크기를 조절하기 위하여 사용하는 속성이다.
표시 된 속성 값은 가장 많이 사용되는 값으로
contain 은 영역을 기준하여 그 안에 사용하고자 하는 이미지가 잘리지 않고 모두 사용되게 확대/축소 해서 들어간다.
이 경우에는 이미지의 종횡비에 따라 위아래 또는 양 옆에 빈 공간이 생길 수 있다는 단점이 있다.
cover 의 경우에는 빈 공간이 생기지 않게 이미지를 확대/축소하여 넣게 되는데,
빈 공간은 생기지 않지만 대신 종횡비에 따라 위아래 또는 양 옆이 영역에 따라 잘릴 수 있게 된다.
| contain | cover | |
| 장점 | 이미지를 모두 넣을 수 있다. | 빈 여백이 생기지 않는다. |
| 단점 | 빈 여백이 생길 수 있다. | 이미지를 모두 넣을 수 없어서 손실이 발생할 수 있다. |
5. background-position 속성 : 배경 이미지 위치 조절하기
background-position : <수평 위치> <수직 위치>
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>
| left | center | right | |
| top | left top | center top | right top |
| center | left center | center center | right center |
| bottom | left bottom | center bottom | right bottom |
수평 위치의 값과 수직 위치의 값을 지정하여 이미지가 위치할 위치를 조정할 수 있다.
6. background-origin 속성 : 배경 이미지 배치할 기준 조절하기
background-origin : border-box | padding-box | contain-box
앞서 언급한 background-clip 은 색상을 기준하였다면 origin 은 이미지를 기준한다.
즉 속성 값에 따라 이미지의 시작이 어디인지를 알려주는 것이다.
기본값은 padding-box 이다.
7. background-attachment 속성 : 배경 이미지 고정하기
background-attachment : scroll | fixed
이미지를 화면 상에 고정해 둘 것인지 스크롤에 따라 함께 움직일 것인지 지정할 수 있는 속성이다.
기본값은 scroll 로 fixed 를 사용하게 되면 스크롤이 움직여도 고정된 위치에서 움직이지 않는다.
이런 화면을 생각해보면 쉽게 생각할 수 있다.
이 리모컨 영역은 사용자가 스크롤을 움직여도 임의로 움직이지 않으면 그 자리에 고정되어 움직이지 않는다.
'CSS' 카테고리의 다른 글
| 박스 모델 속성 (0) | 2022.10.20 |
|---|---|
| 그라데이션 효과주기 (0) | 2022.10.19 |
| 웹에서 색상 표현하기 (0) | 2022.10.19 |
| ul, ol 목록 스타일 적용 : 불릿 변경과 삭제, 이미지로 변경, 들여 쓰기 (0) | 2022.10.19 |
| 텍스트의 문단 스타일 적용 : 정렬과 들여 쓰기 (0) | 2022.10.19 |
