[생활코딩 CSS] 랜덤 이미지 생성기

끈기JK 2023. 2. 5. 22:09

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

특정 분류, 크기, 작가 사진 URL 에 지정 가능

<!doctype html>
<html>
 
<head>
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet">
  <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>

저작자표시 (새창열림)