[React, CSS] 이미지에 글 넣기, 폰트 적용

 

여는 글

---

 

메인 페이지를 재디자인했다. 실컷 구현한 슬라이드가 없어졌다

 

그래서 상단에 배너가 위치하게 됐고 글자를 넣을 필요성이 생겨 구현하게 됐다.

 

글자를 넣게되니 예쁜 폰트를 사용하고 싶어 폰트 적용 방법도 작성되어 있다.

 

폰트는 저작권이 중요하다. 무료일지라도 상업용 사용여부, 출처 표기 여부를 확인해야 한다.

 

학교 다닐 때 교수님이 말씀해주시길, 졸업작품으로 앱을 개발했던 학생들이 플레이스토어에 출시했다가 폰트 값으로 몇 천만원을 내라고 폰트 개발 회사에서 학교로 찾아왔다고 한다.

 

정확하진 않지만 내 기억에는 앱을 내리고 학생인 점을 감안해서 그냥 넘어갔다고 들었던 것 같다.

 

저작권을 반드시 지키자

 

 

 

이미지에 글 넣기

---

 

이미지에 글 넣는 게 그렇게 뚝딱 되는 건 아니었다.

 

구글링하느라 고생 좀 했지만, 역시나 코드는 간단하다.

 

App.js

export default class Mainpage extends Component {
  render() {
    return (
      <div className="App">
        <div className= "banner"> /* 이미지 넣을 div */
          <div className="banner-txt"> /* 텍스트 넣을 div */
          <h1> 코드 작성자 포트폴리오 </h1> /* 넣을 글자 */
          </div>
        </div>

        <div className="line">
          <img></img>
        </div>
      
</div>
    );
  }
}

 

App.css

.banner {
  width: 100%;
  height: 200px;
  background-image: url(/src/bgimg/banner.png);
  background-size: cover; /* 핵심코드 */
  position: relative; /* 핵심코드 */
  display : inline-block;
  margin-top: 10px;
  margin-bottom: 5%;
  max-width: 100%;
  background-repeat :no-repeat;
}

.banner-txt {
  position: absolute; /* 핵심코드 */
  top: 50%; /* 핵심코드 */
  left: 50%; /* 핵심코드 */
  transform: translate( -50%, -50%); /* 핵심코드 */
  font-size: x-large;
}

 

중요한 코드는 주석으로 표시해 놨다.

 

내가 제일 고생했던 부분인 배너 가운데정렬부터 설명하자면,

 

이미지 가운데 정렬할 때 구글링하면 text-align 쓰라는 말이 많은데 나는 이미 부모요소인 .App에 적어놨기 때문에 따로 적을 필요는 없었다.

 

또한 background-size를 cover로 해놔야 모니터에 따라서 이미지(배너)가 유동적으로 사이즈 조절된다.

 

background-repeat은 no-repeat으로 해놓아야 바둑판식으로 이미지가 반복되지 않는다.

 

position이 중요하다고 하는 이유는 두 CSS를 모두 봐야한다. 

 

App.js에서 봤듯이 banner가 부모인데 부모 position을 반드시 relative, 자식을 absolute를 해놓아야 한다.

 

그다음 자식에서 가운데 정렬을 위한 top, left 마진을 50%로 설정하고 transform을 사용해서 이미지의 가운데에 글자가 올 수 있도록 한다.

출처 https://urliveblogger.blogspot.com/2021/01/css-text-align-center-on-image.html

이미지 위에 텍스트 정가운데에 넣는 방법

 

그럼 배너 가운데 정렬과 글자 배치가 끝난다.

 

 

폰트 적용하기

---

 

먼저 사용할 폰트를 인터넷에서 찾아 고른다. 저작권 중요

 

나는 아래의 폰트를 사용했다.

 

https://blog.naver.com/hp0/222417104986

[무료 한글폰트] HS새마을체(2021)

 

그 다음 윈도우에 폰트를 넣어주긴 했는데 어차피 서버에 올려놓고 사용할거라 상관 없을 것 같기도 하다.

 

font도 src에 넣어줘야 오류가 안난다.

 

따라서 src아래에 font라는 폴더를 생성해 그 안에 넣어주었다.

 

그 다음 최상위 부모에 코드를 작성한다. (한 폰트로 웹페이지 전체를 사용할 경우)

 

App.css

.App {
  text-align: center;
  min-height:100vh;
  font-family: HS새마을체;
  overflow-x: hidden;
}

@font-face {
  font-family: HS새마을체;
  src: url(/src/font/HS새마을체.otf);
}


 .banner {

 

아, overflow-x는 자꾸 웹페이지 오른쪽에 여백이 생겨서 작성했다.

 

적용은 매우 간단하다. 저 코드가 끝이다.

 

 

닫는 글

---

 

디자인은 다시 또 내가 했는데, PPT 만들 때 자주 사용하던 픽사베이 이미지들을 사용했고 그래서 그런지 내가 학교다닐 때 만들던 PPT 느낌이 많이 난다.

 

전보다 훨씬 나은 것 같다

 

 

모든 코드(GitHub)와 포트폴리오 주소

웹 애플리케이션 포트폴리오(Full Stack)