6주차 : html, css 언어 : 백그라운드 이미지, 색상 단위, 그라디언트, 그림자 효과

소현·2025년 1월 8일

배경 이미지 속성

배경 이미지 속성은 배경으로 활용할 이미지를 출력하는 속성이다.
컨텐츠로 활용하는 용도가 아닌 배경을 꾸미기 위한 용도로 사용한다.

background-image : url(이미지 경로);
배경 이미지를 경로로 불러온다. 그라디언트 배경을 채울때도 사용한다.
background-repeat : no-repeat / repeat-x / repeat-y;
배경이미지의 반복 여부를 지정한다. 배경이미지는 바둑판 배열로 반복되어 출력되는게
기본값이다. 만약 1장만 보여주고 싶을때는 no-repeat 속성값을 지정하고,
가로로만 반복시킬때는 repeat-x, 세로로만 반복시킬때는 repeat-y를 사용한다.
background-attachment : fixed / scroll;
배경 고정 여부를 뜻한다. 기본값은 scroll로 스크롤을 아래로 내리면 이미지가 위로
올라가고, fixed를 설정하면 배경이 항상 같은 자리로 고정된다.
background-position : px / left, center, right, top, center, bottom
배경 위치를 지정한다. 배경 위치를 지정할때에는 값을 2개써야 한다. 만약 하나만
쓴다면 x축과 y축에 동일한 px만큼 떨어져 위치하게 된다. 또는 위치 키워드를 사용하여 위치를 지정할 수 있다.
background-size : 100% / cover / contain / px값
배경이미지의 사이즈를 지정한다. cover를 지정하면 배경영역의 가로 사이즈에 맞춰 사진을 채우고 contain을 지정하면 배경영역의 세로 사이즈에 맞춰 사진을 채운다.
background : 하위 속성들을 한꺼번에 선언
background : 색상 이미지경로 가로위치 세로위치 / 사이즈 반복여부 스크롤;
1번부터 5번까지의 배경 하위속성들을 한꺼번에 선언할때 사용한다. 한꺼번에 선언할때에는 공백으로 구분할 수 있고 필요 없는 속성은 생략할 수 있다.

background-origin

박스에 패딩이나 테두리가 있다면 배경이미지를 어느 영역까지 보여줄 것인지
결정하는 속성.

background-origin: content-box;
박스모델에서 컨텐츠 영역까지만 배경이미지를 표시한다.
background-origin: padding-box;
박스모델에서 패딩 영역까지만 배경이미지를 표시한다. 기본값.
background-origin: border-box;
박스모델에서 테두리 영역까지 배경이미지를 표시한다.

다양한 색상 단위

코드로 색상을 표현하는 다양한 단위가 있다. 이 단위들을 사용하면 배경에 그라디언트를 넣거나 투명하게 처리할 수 있다.

hex코드
앞에 #을 붙인 16진수로 색상을 표현하는 단위이다. 가장 많이 쓰이며, 보통 디자인 단계에서 해당 코드를 공유하여 웹을 디자인한다.

색상명
red, blue처럼 정해진 색상의 이름으로 색을 표현하는 단위이다. 보통 임시로 영역을 확인하기 위해 사용된다.

rgb(red, green, blue)
rgb색상단위로 뒤에 소괄호가 붙는다. 소괄호 안에는 0~255까지의 숫자를 입력할 수 있다. red, green, blue색상을 조합하여 빛의 색상을 표현하는 단위이다.

rgba(red, green, blue, alpha)★
rgba의 a는 alpha값을 말하며 투명도를 뜻한다. 투명도를 표기할때에는 0~1까지의 값을 쓸 수 있다. 투명도에 만약 0.5를 쓰면 50%투명한 색상이 나온다. 0은 완전히 투명한 상태를 말하고 1은 완전히 불투명한 상태를 말한다.

hsl(hue, saturation, lightness)
hue는 색상을 뜻하고 saturation은 채도, lightness는 밝기를 뜻한다. 해당 색상단위는 %를 쓴다. hsl색상 단위는 사람이 손으로 조색하는 색상과 가장 비슷하다고 하여 포토샵과 같은 디자인툴의 기본 색상 단위이다. 코드로는 많이 쓰이진 않는다.

hsla(hue, saturation, lightness,alpha)
hsl단위에 투명도인 alpha값을 추가한 색상 단위이다. 투명도는 마찬가지로 0~1까지의 값을 쓸 수 있다.

opacity★

투명도를 뜻하는 속성. 값은 0 ~ 1사이의 값을 쓸 수 있다. 단위는 쓰지 않는다.
opacity는 '속성명'으로 해당 박스의 컨텐츠 내용과 border까지 모두 투명하게 만든다.
hsla,rgba는 '속성값'이며, 컨텐츠는 투명하게 만들지 않고 배경색만 투명하게 만든다.

그라디언트 효과

그라디언트 효과는 css3에서 처음 소개된 기능으로 옛날브라우저(익스10버전 이하)에서는 지원되지 않는다. 모던 브라우저 초기 버전에서는 그라디언트 효과를 내기 위해 브라우저 접두사를 사용했다. 브라우저 접두사란 속성 중 호환이 어려운 속성들을 브라우저마다 호환해주기 위해 붙이는 키워드로 '벤더프리픽스'라고도 부른다.

벤더프리픽스는 호환해야하는 속성값의 앞에 쓴다.

-webkit- : 크롬과 사파리를 호환한다.
-moz- : 파이어폭스 브라우저를 호환한다.
-o- : 오페라 브라우저를 호환한다.
-IE- : 익스버전을 호환한다.

  [예시]
  div{
    background-image: -moz-liner-gradient(~~값);
    background-image: -webkit-liner-gradient(~~값);
    background-image: -o-liner-gradient(~~값);
    background-image: -IE-liner-gradient(~~값);
  }

선형 그라디언트

liner-gradient라는 함수로 색상을 구현한다.

liner-gradient(각도 to 방향, color-stop, color-stop);

각도 : 색상이 시작할 위치를 말한다. 0도(top위치)부터 시작하여
시계방향으로 돌아가며 적용된다. 만약 음수값을 쓰면 반시계 방향으로 적용된다.

방향 : 그라디언트가 적용될 방향. to left / to top / to right / to bottom으로 방향을 적용할 수 있다.

colorstop : 색상 중단점. 먼저 쓰여진 컬러가 시작 색상이 된다. 여러 색상을 추가하고 싶다면 ,로 구분하여 여러 색을 출력하면 된다. 각 색상마다 분포할 위치를 정하고 싶다면 색상코드 뒤에 한칸 띄고 %를 쓰면 된다.

원형 그라디언트

그라디언트를 원형으로 표현할때 사용한다. radial-gradient함수를 이용해 구현한다.

background-image: radial-gradient(모양 크기 at 위치, color-stop, color-stop);

모양 : 모양은 정원을 뜻하는 circle과 타원을 뜻하는 ellipse가 있다. 기본값은 ellipse이고 박스의 넓이 높이에 따라 타원 모양이 결정된다. circle은 박스 모양과 상관없이 정원으로 표현된다.

크기 : 그라디언트의 크기를 지정할 수 있다. 아래 값을 입력할 수 있지만 잘 쓰지는 않는다.
1. closest-side
2. closest-corner
3. farthest-side
4. farthest-corner - 기본값

box-shadow : 박스모델의 그림자 효과

사진이나 카드 또는 박스에 그림자 효과를 주기 위해 사용한다.

box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset;

수평거리 : 박스의 오른쪽 또는 왼쪽으로 그림자를 이동시킴.

수직거리 : 박스의 위쪽이나 아래쪽으로 그림자를 이동시킴.

흐림정도 : 기본값은 0이며 그림자의 진함 정도를 뜻한다. 값이 커질수록 부드러운 그림자로 표시된다. px로 표현하고 음수는 쓸 수없다.

번짐정도 : 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 그림자가 박스보다 커진다. 반대로 음숫값을 쓰면 모든 방향으로 그림자가 축소된다. 기본값은 0이다.

색상 : 한 가지 색상만 지정할 수도 있고 공백으로 구분하여 여러 색을 쓸 수도 있다. 기본값은 검정색이다.

inset : 안쪽 그림자를 만든다. 생략하면 기본값인 바깥쪽 그림자가 생성된다.