이미지와 그러데이션 효과
배경색 및 배경 범위 지정
background-color 속성
요소의 배경 색상을 지정하는 데 사용됨. 기본값은 transparent임.
- 구문: background-color: color name | HEX value | rgb() | rgba();
- 예시:
- background-color: indigo;
- background-color: #4b0082;
- background-color: rgb(75, 0, 130);
- background-color: rgba(75, 0, 130, 0.5); (불투명도 지정 가능)
- 참고 링크:
background-clip 속성
배경색 또는 배경 이미지의 적용 범위를 조절하는 데 사용됨.
- 참고 링크:
배경 이미지 지정
background-image 속성
웹 요소에 배경 이미지를 삽입하는 데 사용됨. 기본값은 none임. 여러 이미지를 쉼표로 구분하여 설정 가능하며, 먼저 지정된 이미지가 위에 겹쳐서 표시됨.
- 구문: background-image: url("이미지 위치 주소");
- 예시:
- background-image: url('images/bg1.jpg');
- background-image: url("../image/bg.png"), url("../image/bg2.png");
- 참고 링크:
2.2 background-repeat 속성
배경 이미지의 반복 여부 및 방향을 설정하는 데 사용됨. 기본값은 repeat임.
- 구문: background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
- 값 설명:
- repeat: 요소 영역을 채울 때까지 이미지 반복 (잘릴 수 있음).
- repeat-x: 가로 방향으로만 이미지 반복.
- repeat-y: 세로 방향으로만 이미지 반복.
- no-repeat: 이미지 반복 없음.
- space: 이미지가 잘리지 않는 범위에서 반복하며, 남은 여백을 고르게 배분함.
- round: 여백 없이 이미지 비율을 조정하여 공간을 채움.
- 참고 링크:
2.3 background-position 속성
배경 이미지의 위치를 설정하는 데 사용됨. 기본값은 0% 0%임.
- 구문: background-position: x위치, y위치;
- 예시:
- background-position: left top;
- background-position: center;
- background-position: 25% 75%;
- 참고 링크:
2.4 background-origin 속성
배경 이미지의 원점(0,0)을 어디에서부터 시작할지 설정하는 데 사용됨. background-attachment가 fixed인 경우 무시됨.
- 구문: background-origin: border-box | padding-box | content-box;
- 값 설명:
- border-box: 테두리(border)의 좌측 상단에서부터 시작함.
- padding-box: 패딩(padding)의 좌측 상단에서부터 시작함.
- content-box: 내용(content) 영역의 좌측 상단에서부터 시작함.
- 참고 링크:
2.5 background-attachment 속성
배경 이미지의 고정 또는 스크롤 여부를 설정하는 데 사용됨. 기본값은 scroll임.
- 구문: background-attachment: scroll | fixed | local;
- 값 설명:
- scroll: 배경 이미지가 요소에 고정되며, 요소에 스크롤이 있어도 배경은 고정됨.
- fixed: 배경 이미지가 뷰포트(viewport)에 고정되며, 요소 및 뷰포트 스크롤에 관계없이 고정됨.
- local: 배경 이미지가 콘텐츠와 함께 스크롤됨.
- 참고 링크:
2.6 background-size 속성
배경 이미지의 크기를 조절하는 데 사용됨. 기본값은 auto (원본 크기)임.
- 구문: background-size: Values(contain | cover | auto) | width값 | width값 height값;
- 값 설명:
- contain: 비율을 유지하며 이미지 전체가 요소 안에 보이도록 최대 확대함.
- cover: 비율을 유지하며 요소를 완전히 덮도록 확대함 (이미지 일부가 잘릴 수 있음).
- auto: 이미지의 원본 크기 유지함.
- 200px: 너비는 200px, 높이는 비율에 맞춰 자동 계산됨.
- 50%: 배경 이미지 너비는 요소 너비의 50%, 높이는 비율에 맞춰 자동 계산됨.
- 100% 100%: 배경 이미지 너비와 높이가 각각 요소 너비와 높이의 100%로 설정됨.
- 참고 링크:
3. 그러데이션 효과로 배경 꾸미기
CSS를 사용하여 배경에 그러데이션 효과를 적용 가능함. background-color 대신 background 통합 속성으로 적용해야 함. CSS Gradient 기능을 지원하지 않는 구형 브라우저를 위해 background-color를 먼저 지정하는 것이 권장됨.
3.1 선형 그러데이션 (linear-gradient())
직선 방향으로 색상이 변화하는 그러데이션을 생성함.
- 기본 구문: linear-gradient(시작색상, 끝색상);
- 방향/각도 설정:
- linear-gradient(to 방향, 시작색상, 끝색상); (예: to right, to left top)
- linear-gradient(각도deg, 시작색상, 끝색상); (예: 45deg, 180deg)
- 색상 중지점 지정: 각 색상 뒤에 퍼센트(%) 값을 사용하여 색상 변화의 위치를 조절 가능함.
- 예시: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
- 참고 링크:
3.2 원형 그러데이션 (radial-gradient())
원형으로 색상이 변화하는 그러데이션을 생성함.
- 기본 구문: radial-gradient(시작색상, 끝색상);
- 모양 및 위치 지정: circle, ellipse 등의 모양 키워드와 at 키워드를 사용하여 원형의 중심 위치를 지정 가능함.
- 색상 중지점 지정: 선형 그러데이션과 동일하게 퍼센트(%) 값을 사용하여 색상 변화의 위치를 조절 가능함.
- 참고 링크:
3.3 그러데이션 반복 (repeating-linear-gradient(), repeating-radial-gradient())
그러데이션 패턴을 반복하여 생성함.
- 구문:
- repeating-linear-gradient(색상1, 색상2 거리);
- repeating-radial-gradient(shape, 색상1, 색상2 거리);
- 참고 링크:
3.4 그러데이션을 사용한 패턴 만들기
색상 중지점을 정밀하게 조절하여 반복적인 패턴을 만들 수 있음.
- 예시:
- repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); (가로 줄무늬 패턴)
- repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); (동심원 패턴)
- 참고 링크:
4. 핵심 요약 및 추가 참고 자료
- CSS 그러데이션은 background 통합 속성을 통해 적용됨.
- linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), conic-gradient() 등 다양한 형식이 제공됨.
- 색상과 함께 위치 값(%)을 지정하여 색상 중지점을 조절 가능함.
- to top, to right, 45deg 등의 키워드나 각도를 사용하여 그러데이션의 방향을 설정 가능함.
- CSS 그러데이션은 편집이 용이하며, 애니메이션 등으로의 활용 가능함.
- CSS 그라데이션을 지원하지 않는 브라우저를 위해 background-color를 먼저 정의하는 것이 권장됨.
추가 참고 자료:
- CSS Gradient Generator: 다양한 그러데이션을 시각적으로 생성하고 CSS 코드를 얻을 수 있는 유용한 도구임.
출처: 강사 전진욱 ( naver cafe - uksweb202311)
https://lshjju.tistory.com/'UIUX beginner' 카테고리의 다른 글
| CSS ⑤ (0) | 2025.06.14 |
|---|