겁나 빠른 웹 레시피

랜덤 이미지 생성기

수업소개

여기서는 랜덤하게 배경 이미지를 설정하는 방법에 대해서 알아보겠습니다. 

사용기술

  • html
  • css

주요개념

  • background image, size (css)

참고

미리보기

수업

 

예제

<!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>

 

댓글

댓글 본문
  1. jeisyoon
    2021.07.09 Random Image Generator - OK
  2. jeisyoon
    2021.07.09 Random Image Generator - OK
  3. didQk
    우와! 이 수업 너무 재밌어요! ㅋㅋㅋ
  4. Jinho Hyeon
    head 태그 안에
    <meta http-equiv="refresh" content="30">

    를 넣으시면, 30초 마다 페이지를 새로고침 할 수 있습니다. 새로고침 할 때마다 배경 이미지가 바뀝니다~
  5. 광대승천
    잘봤습니당
  6. omdgi
    좋은 강의 감사합니다.
    근데, IE11에서는 justify-content:center;에 대해 제대로 작동하지 않습니다.
    브라우저 상단 중앙부에 위치하는데요,

    그래서 검색하여 아래와 같이 css 코딩을 했는데도, 잘 안되네요.
    display: -ms-flexbox;
    -ms-flex-pack: center;

    해결 방법이 없을지요?
  7. 갤럭시
    강의도 물론 좋지만 작업에 유용한 사이트들도 알려주셔서 감사합니다!
    생활코딩 꿀입니다 진짜..
  8. 사탕나무
    재밌게 잘 봤습니다.
    이렇게 멋진 사진들을 무료로 쓸수있는것 만으로도 행복합니다.
    감사합니다.
버전 관리
egoing@gmail.com
현재 버전
선택 버전
graphittie 자세히 보기