20201111 css에 배경사진 local 파일로 넣기! 및 모바일 화면 구현

배경사진 서버 local file로 넣기

• flask 서버 기준으로 이렇게 넣어주면 됩니다!

.container {                
                background-image: url("{{url_for('static',filename='example.jpg')}}");
            }

• 중요한 점은 서버!가 있어야 사진을 불러올 수 있다는 점이에요. 서버를 돌리는게 아니라 그냥 css파일을 불러오면 이미지가 나타나지 않습니다. 서버에서 url을 만들어서 오는 것이기 때문이죠!
• 나는 아래 사진을 검색하는 창에 background-image로 넣기 위해서 로컬 파일로 넣는 방법을 알아보았다 ㅎㅎ.
  
• 아래는 구현된 모습!
  

모바일 화면 구현해보기

1. html헤드에 일단 viewport를 넣어줍니다!

<meta name="viewport" content="width=device-width, initial-scale=1">

2. 이후에 조건문을 통해서 css 파일에 조건을 걸어볼 텐데요.

@media (max-width:500px) {
                .container {
                    background-size: 160%;
                }                    
            }

• 이렇게 넣어주면, width가 500보다 작아지면 이 조건으로 css를 적용해라! 이런 뜻이 됩니다. 이전 코드에서 .container에 사진을 넣어줬는데요. 위 코드에서 사진을 좀 더 확대해서 적용해 보았습니다.
  
• 이렇게 적용하면 너비가 500보다 작은 핸드폰은 화면이 이렇게 적용된답니다!
• 이거 은근 헷갈리고 어려워서 조금 힘들었는데요. 다들 도움이 되셨으면 좋겠습니다! 꾸!벅!