728x90
안녕하세요 JJU_DEVELOPER입니다.
이번시간에는 CSS 이미지와 그라데이션 효과 맛보기에 대한 설명입니다~!
목차
09-1 배경색과 배경 범위 지정하기
09-2 배경 이미지 지정하기
09-3 그러데이션 효과로 배경 꾸미기
09-1 배경색과 배경 범위 지정하기
| 속성 | 설명 |
| background-color | 배경색 지정 |
| background-clip | 배경색이나 이미지를 어디까지 적용할지 지정 |
| background-image | 배경 이미지 지정 |
| background-repeat | 배경 이미지의 반복 방법을 지정 |
| background-position | 배경 이미지의 위치 지정 |
| background-origin | 배경 이미지를 배치할 기준 지정 |
| background-attachment | 배경 이미지를 문서에 고정 |
| background | 하나의 속성으로 배경 스타일을 한꺼번에 지정 |
| background-size | 배경 이미지의 크기 조절 |
09-2 배경 이미지 지정하기
background-image: url(이미지경로);
이때 url() 괄호 안에 띄여쓰기 없이 바로 경로를 입력하셔야합니다~!
이미지를 배경으로 썼으니, 나중에 서버에 올리실 때 경로 그대로 이미지도 위치해야 한다는 것을 잊지 마세요.
09-3 그러데이션 효과로 배경 꾸미기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
li {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px;
}
#div1 {
background: rgb(100, 0, 83);
background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
}
#div2 {
background: darkgreen;
background: radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
}
#div3 {
background: darkgreen;
background: radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
}
#div4 {
background: darkgreen;
background: radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green);
/* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
}
</style>
</head>
<body>
<ul>
<li id="div1"></li>
<li id="div2"></li>
<li id="div3"></li>
<li id="div4"></li>
</ul>
</body>
</html>
728x90
'주니어 기초 코딩공부 > CSS, HTML 기초' 카테고리의 다른 글
| CSS 반응형 웹과 미디어 쿼리 (화면에 사이즈에 따라 사진 자동 변경 설정) (1) | 2023.01.06 |
|---|---|
| CSS 고급 선택자- 마우스 클릭시 색변경, 링크 접속 시 변경 등 고급 선택자 알아보기!!! (1) | 2023.01.06 |
| CSS 텍스트를 표현하는 다양한 스타일 (글꼴, 웹폰트,목록,표만들기) (0) | 2023.01.06 |
| CSS 기본 설명 (스타일, 기본 선택자, 캐스케이팅이란??) (0) | 2023.01.06 |
| HTML 정복하기!!! fieldset, legend, lable, option 예시 및 상세 설명 (0) | 2023.01.04 |