[React] 배경이미지 삽입과 폰트 디자인

Snack Machine 웹

 

 저번 시간에 이어서 웹페이지를 꾸며보겠습니다. 웹페이지가 너무 휑해 보이지 않나요? 

 

오늘은 배경이미지를 넣어보겠습니다.

 

먼저 app.css 파일로 넘어가 줍니다. 

 

src 폴더

 

이미지를 넣기 위해선 다운받은 이미지를 드래그 혹은 직접 소스 폴더에 넣어 주셔야 합니다.

 

그다음 app.css에서 body 태그를 하나 만들어줍니다.

 

body {

  background-image: url(./hearts-1215842_960_720.jpg);

}

그리고 background-image: urp(이미지 경로); 이렇게 코드 넣어주시면 됩니다. 적용 되었는지 한 번 확인해 볼까요?

 

배경 이미지 적용

이제 좀 그럴듯 해 보이네요

하지만 여기서 문제점이 조금 있습니다.  웹페이지 사진이 사이즈가 맞지 않아서 2장이 반복되서 보입니다.

 

 배경이미지 전용 css코드를 조금 작성할 필요가 있어 보이네요.

 

body {

  background-image: url(./hearts-1215842_960_720.jpg);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: contain;

  background-attachment: fixed;

}

background-repeat == 사이즈를 채우기 위해서 사진이 반복되어서 적용되는 경우가 있는데 no-repeat 으로 하면 한 번만 보여줍니다.

 

background-position == 이미지의 위치 설정

 

background-size == 요소안에 배경이미지가 들어오도록 확대시켜 줍니다.

 

background-attachment == 사진의 사이즈가 큰 경우 빈공간이 생길 수 있는데 fixed로 하면 빈 공간을 채워줍니다.

 

위의 웹페이지 사진을 보시면 불편한 점이 조금 남아 있습니다. 대문글과 버튼의 위치가 위에 있어서 잘 안보이는 점입니

 

다. 코드를 조금 수정해 볼까요.

 

padding-top: 300px;

padding-bottom: 100px;

 

대문글은 위쪽에서 300px 멀어지게 하였고, 아래쪽 버튼들과는 100px 멀어지게 하였습니다.

css 적용 모습

꽤 그럴듯하죠? :ㅇ

 

폰트도 디자인에 맞게 구글폰트에서 다운받아서 사용하였습니다. 

 

폰트 적용하는법 ↓

 

구글 폰트

구글 폰트에서 하나를 골라서 select + 아이콘을 누르면 오른쪽에 html 코드와 css코드를 제공해줍니다.

 

Web용 코드

link 코드는 index.html 폴더에 헤더에 넣어주시면 되고 css코드는 적용하고 싶은 태그의 폰트코드에 넣으시면 됩니다.

 

최종 메인화면

 

일반 텍스트의 크기 조절은 font-size : (사이즈); 를 사용하시면 됩니다.

font-size: 100px;

그리고 버튼의 크기도 키워봤는데요. 버튼은 부트스트랩을 사용하여서 부트스트랩 전용 태그 코드를 사용해야 합니다.

 

 <Col> <Button variant="warning" size="lg">음료수</Button>{' '}{' '}</Col>

어려운건 아니고 색상 코드 뒤에 size = "(사이즈)" 코드만 추가해 주면 됩니다.

 

오늘은 시간이 없어서 반응형 페이지 기능은 다음에 구현해보도록 하겠습니다.

 

읽어주셔서 감사합니다!