background
배경-색상
- background-color
배경-이미지
- background-image
element의 배경에 image를 표시할 수 있다.
기본적으로 큰 이미지는 box에 맞게 축소되지 않으므로 작은 이미지만 표시된다.
반면, 작은 이미지는 box를 채우기 위해 바둑판 식으로 배열된다.
배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시된다.
배경 이미지 반복 제어
- background-repeat
이미지의 타일링 동작을 제어하는 데 사용된다.
사용가능한 값
- no-repeat 배경이 반복되지 않도록 한다.
- repeat-x 수평으로 반복한다.
- repeat-y 수직으로 반복한다.
- repeat 기본값; 양방향으로 반복한다.
배경 이미지 크기 조정
배경이 element보다 크면 이미지가 잘린다.
- background-size 속성으로 이미지 크기를 맞춘다.
-> 길이나 백분율 값을 취할 수 있다.
키워드로도 설정이 가능하다.
- cover: 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 크게 만든다. 일부 이미지가 박스 외부에 있을 수 있다.
- contain: 이미지를 박스 안에 들어가기에 적합한 크기로 만든다. 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있다.
배경 이미지 배치
- background-position
적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있다.
박스의 왼쪽 상단 모서리가 (0, 0)이고, 박스가 가로 및 세로 축을 따라 위치하는 좌표계를 사용한다. - 기본값은 (0, 0)이다.
background-position의 일반적인 값은 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.
top 및 right와 같은 키워드를 사용할 수 있다.
또한 길이 및 백분율을 사용할 수 있다.
background-position: 20px 10%;
키워드 값을 길이 또는 백분율과 혼합할 수도 있다.
background-position: top 20px;
박스의 특정 모서리로부터의 거리를 나타내기 위해 4값 구문을 사용할 수도 있다.
이 경우 길이 단위는 앞에 오는 값과의 offset이다.
background-position: top 20px right 10px;
-> 배경을 위쪽에서 20px, 오른쪽에서 10px로 배치한다.
그라데이션 Gradient 배경
Gradient는 이미지처럼 작동하며 background-image 속성을 사용하여 설정된다.
background-image: linear-gradient(105deg, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96%);
-> 선형 그라디언트
background-image: radial-gradient(circle, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96%);
-> 방사형 그라디언트
-> gradient 생성기 중 하나를 사용하는 것이다.
생성한 다음에 위의 코드를 복붙
여러 배경 이미지
하나의 속성 값으로 여러 개의 background-image 값을 지정한다.
각 이미지를 쉼표로 구분
이렇게 하면 배경 이미지가 서로 겹칠 수 있다.
배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓인다.
gradient는 일반 배경 이미지와 혼합될 수 있다.
background-* 속성은 background-image 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있다.
background-image: url(image1.png), url(image2.png), url(image3.png),
url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
10px 20px,
top right;
다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치한다.
image1 -> no-repeat image2 -> repeat-x ...
다른 속성의 값이 다른 경우 -> 더 적은 수의 값이 순환한다.
image3에는 10px 20px position이 적용되고
image4에는 top right에 position이 적용된다.
배경 첨부 attachment
- background-attachment
스크롤할 내용이 있을 때만 영향을 미친다.
속성
- scroll
페이지가 스크롤될 때 element의 배경이 scroll 되도록 한다. element 내용이 scroll 되면, 배경이 움직이지 않는다. 실제로 배경은 페이지에서 동일한 위치에 고정. 페이지가 스크롤될 때 스크롤된다. - fixed
element의 배경을 viewport에 고정시켜, 페이지나 element 내용을 스크롤할 때 스크롤되지 않도록 한다. 항상 화면에서 동일한 위치에 유지된다. - local
배경을 설정된 element로 고정하므로, element를 스크롤하면 배경과 함께 스크롤된다.
https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html
참고
배경 shorthand 속성 사용
여러 배경을 사용하는 경우에 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 한다.
배경 shorthand 값을 쓸 때 따라야 할 규칙:
- background-color는 마지막 쉼표 뒤에만 지정 가능하다.
- background-size의 값은 background-position, 직후에 포함되며 center/80%와 같이 / 문자로 구분된다.
.box {
background:
linear-gradient(105deg, rgb(255 255 255 / 20%) 39%, rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}배경이 있는 접근성 고려 사항
배경 이미지나 색상 위에 텍스트를 배치할 때, 방문자가 텍스트를 읽을 수 있도록 contrast를 충분히 유지해야 한다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 background-color도 지정해야 한다.
border
border가 box 크기에 미치는 영향
border를 사용하여 box의 네 면 모두에 테두리 설정 가능.
또는 box의 한쪽 가장자리를 대상으로 지정 가능
ex)
.box {
border-top: 1px solid black;
}shorthand의 개별 속성
- border-width
- border-style
- border-color
위의 longhands
- border-top-width
- border-top-style
- border-top-color
둥근 border
- border-radius (네 모서리 모두 설정)
- box의 각 모서리와 관련된 longhands
두 개의 길이 또는 백분율을 값으로 사용 가능
첫 번째 값: 가로 반경 정의
두 번째 값: 세로 반경 정의
예시: 오른쪽 상단 모서리
border-top-right-radius
