내일배움캠프 4일차 : CSS로 로컬이미지 background 만들기

오늘 역시 미니프로젝트를 진행하는 날이다. 내일은 발표이고 오늘이 마지막이기 때문에 나는 사이트의 background, 버튼 및 카드의 투명도와 같은 전체적인 톤을 일치시키는 일을 했다.

 

 

원하는 느낌의 이미지 샘플이다. 이 느낌을 내기 위해서는 배경에 구겨진 종이 이미지를 넣는 것이 필요했다.

 background-image: url("")

 

나는 아무 생각 없이 위 코드를 활용해 무료 이미지 사이트인 Pixabay에서 이미지주소를 복사해서 body 전체에 넣어주었다. 하지만 결과는 대 실패였다. 로그인되어 있는 나의 서버에서만 이미지가 보였으며, 다른 팀원들의 웹에서는 이미지가 보이지 않았다. 괜찮은 이미지를 넣어주어야 하기 때문에 우선은 다운을 받은 후 로컬이미지를 활용하는 방식이 있나 검색해 보았고 다행히 쉽게 찾을 수 있었다.

 

우선 다운받은 이미지를 html 파일이 있는 같은 폴더에 넣어주었다. 

        body {
            background-image: url("background-img.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

 

그리고 url 안에 이미지의 파일명을 넣어줌으로써 손쉽게 해결할 수 있었다. 이미지가 화면에 꽉 차되 패턴 형식으로 반복은 원치 않아서 'background-repeat'과 'background-size'도 활용했다.

사실 url 안에 들어가는 것이 정확히는 상대경로인 'path'인데 나는 같은 폴더에 들어있었기에 파일명만 넣어주면 됐었다.

 

이미지가 배경에 원하는 방식으로 잘 들어갔다.

 

상대경로 같은 경우 절대경로와 함께 존재하는데 지금 이 상황에서는 아래와 같이 이해하면 될 것 같다.

• 상대 경로 : 파일이 존재하는 위치를 지정해 줌으로써 구현할 수 있는 방법
• 절대 경로 : 온라인에 있는 이미지 url을 넣어줌으로써 구현할 수 있는 방법

 

단순히 CSS를 통해 온라인에 있는 이미지를 넣는 것에서 확장하여 로컬이미지를 background img로 넣는 것 같이 강의 에서 확장된 내용들을 직접 습득해나가고 있다. '이것이 개발의 묘미인가..'라고 긍정적으로 생각하며 나름 즐겁게 배워나가고 있다. 아직 걸음마 단계기에 이런 말을 할 수 있는 것 같기도 하지만... 블로그를 꾸준히 써나감으로써 그날 배운 것을 매일 하나 이상을 장기 기억으로 넘기겠다는 목표를 이룰 수 있었으면 좋겠다.