수업소개
여기서는 랜덤하게 배경 이미지를 설정하는 방법에 대해서 알아보겠습니다.
사용기술
- html
- css
주요개념
- background image, size (css)
참고
- https://source.unsplash.com/ - https://source.unsplash.com/random
- http://loremflickr.com/ - http://loremflickr.com/1280/720
- http://pipsum.com/ - http://pipsum.com/1280x720.jpg
- https://unsplash.it/ - https://unsplash.it/1280/?random
미리보기
수업
예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html><html><head> <style> body{ background-image: url('https://source.unsplash.com/category/nature/1600x900'); background-size: cover; min-height:100vh; margin:0; display: flex; justify-content: center; align-items: center; } h1{ background-color: rgba(255, 255, 255, 0.3); padding:0.3rem; color:rgb(0, 0, 0); font-family: 'Source Sans Pro', sans-serif; font-weight: 200; } </style></head><body><h1>Lorem ipsum dolor.</h1></body></html> |
