Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

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

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 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>

 

 

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)  (0) 2023.02.06
[생활코딩 CSS] Parallax(시차를 이용한 효과)  (0) 2023.02.04
[생활코딩 CSS] 링크를 버튼으로 만들기  (0) 2023.02.04
[생활코딩 CSS] 자바스크립트 없이 tree 만들기  (0) 2023.02.04
[생활코딩 CSS] Masonry layout 만들기  (0) 2022.09.29
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more