backend/Django&Python

[Django] 배경이미지 추가하기

findTheValue 2021. 8. 27. 02:26

첫번째 장고 앱 작성하기, part 6

  • 앱의 모양과 느낌을 원하는대로 바꿔보세요
  • 특별한 것은 정적 파일을 static 디렉토리에 모아 관리한다는 것 이외는 없다.

정적파일을 저장할 static 리렉토리

  • 디렉토리를 지정함은 네임스페이싱을 통해 파일을 구별짓기를 원한다는 의미이다.(이름이 동일한 다른파일과)
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

static 탬플릿 태그는 정적파일의 절대경로 URL을 생성한다.


배경 이미지 추가하기.

 

images 서브 디렉토리 추가

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    background-color: rgba(255, 255, 255, 0.822);
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: fixed;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding-top: 4%;
}

h1 a {
    text-decoration: none;
    color: rgb(102, 19, 102);
    font-family: 'Indie Flower', cursive;
}

.background__img {
    height: 95vh;
    background-image: linear-gradient(
      to right bottom,
      rgba(238, 132, 229, 0.801),
      rgba(167, 68, 187, 0.808)
    ), url("images/iu.jpg");
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
    position: relative;
}