<CSS> - 배경화면
- 배경화면을 출력하는 코드 작성방법(예시)
background를 이미지, 그라데이션으로 출력!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>배경</title> <style> body{ /* 이미지는 화면에 앞에 오고 background는 뒤에 들어가는 것! */ padding: 0; margin: 0; /*패딩과 마진 초기화*/ } .bg1 { background: url(bg1.jpg) center center repeat; /*사진의 위치, repeat하면 화면을 꽉 채울만큼 반복됨!*/ background-size: cover;/*가로 세로 길이, cover은 사진을 화면에 딱 맞춰줌!*/ height: 100vh; /*화면의 100vh높이*/ /* 사진이 짤림 가로는 항상 100%가 되지만 세로는 height를 따로 채워 넣어줘야함! */ } .bg2 { background: url(bg2.jpg) center center repeat; background-size: 500px 300px; height: 100vh; } .bg3 { /* 색깔 그라데이션 속성 to bottom(기본값) : 위에서 아래로 그라데이션 to top : 아래에서 위로 그라데이션 to left : 왼쪽에서 오른쪽로 그라데이션 to right : 오른쪽에서 왼쪽로 그라데이션 ndeg : n도의 방향으로 그라데이션 */ background: linear-gradient(45deg,yellow, red, green, blue); height: 100vh; } </style> </head> <body> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"></div> </body> </html>
여백없이 딱 붙어서 세로로 쭉 출력!
💦 속성 중 repeat과 no-repeat을 넣었을 때 비교
- repeat일 경우
- no-repeat일 경우
Author And Source
이 문제에 관하여(<CSS> - 배경화면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kshee1001/CSS-배경화면저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)