[CSS 이미지 배치 (grid layout)] 슬라이드에 이미지, 글 넣기 / 웹페이지 background 이미지

여는 글

---

 

웹을 구현해본 사람은 알겠지만 내 생각대로 이미지가 원하는 위치에 바로 위치한 적이 없었던 적도 꽤 있다.

 

또한 모니터의 크기에 고려하여 비율에 맞춰 배치해야 되기 때문에 함부로 좌표를 설정해 배치할 수도 없다.

 

그래서 오늘은 지난 번에 구현했던 슬라이드에 이미지와 글을 넣는 코드를 작성한다.

 

+ 웹 페이지 배경에 이미지 넣기 코드

 

 

React에서 JS와 HTML 코드 분리하기

---

 

App.js에서 하나의 클래스나 함수 안에도 html 코드를 작성할 수 있다.

 

그러나 앞으로 삽입해야 할 js 코드며, html 코드, 그리고 길진 않지만 css를 적용하는 코드까지 이 모든 것을 한 클래스에 작성하는 것은 가독성을 떨어뜨린다.

 

html 코드 분리를 위해 구글링을 하던 중 아래의 포스팅들을 읽고 React의 구조를 쉽게 이해할 수 있었다.

 

처음에는 당연히 index.html에 작성하는 줄 알았다.

 

초기에 주어지는 html 파일이고 App.js와 별도의 파일로 분리가 가능해 깔끔해 보였기 때문이다.

 

그러나 아래의 글을 읽으면 제시하는 방법은 내 생각과 달랐다는 것을 알 수 있다.

 

https://ljh86029926.gitbook.io/coding-apple-react/1/where-is-html

React에는 HTML이 없나요 ?

 

요약하자면, index.html은 단순한 틀일 뿐이고 실제로는 src 폴더에서 html을 작성한다는 내용이다.

 

그리고 다음 글을 읽어보면,

 

https://ljh86029926.gitbook.io/coding-apple-react/1/component-of-react

Component Of React

 

 

js 클래스를 그대로 두고 그 밑줄에, 즉 같은 파일 내 하단에 이어서 html 클래스를 생성해 작성한다는 내용이다.

 

처음에는 '파일로 분리해서 import 시키지 않는다고?' 라는 생각이 들었지만 사용하다보니 이 방법도 깔끔하고 편리했다.

 

아래 코드들도 이 구조를 사용해 구현했다.

 

 

이미지 1장만 삽입하기 + 글 삽입

---

 

먼저, 이미지 1장과 그 옆에 글을 삽입하는 코드다.

 

App.js

import './App.css';
import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    //const profile = "img/profile.png"
    const settings = {
     // dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
      
    };
    return (
      <div className="App">
        <div>
          <t1>여기는 네비게이션바 자리</t1>
        </div>
      <div>
        <Slider {...settings}>
          <div>
          <Firstpage />  /* 중요 포인트!! */
          </div>
          <div>
            <Secondpage />
          </div>
          <div>
            <Thirdpage />
          </div>
          <div>
            <Fourthpage />
          </div>
        </Slider>
      </div>
</div>
    );
  }
}


class Firstpage extends Component{  // 클래스 이름 첫문자 무조건 대문자!

  render() {
    return(
      <div>
      <h1>소개</h1>
      <blockquote>
        <img alt= "profile" src={process.env.PUBLIC_URL+"/img/profile.jpg"} align="left" hspace="20"/>
      <br></br><h3>"졸업 작품에서 백엔드 개발을 경험 해 본 후 백엔드 개발로 진로를 정해 <br></br> 현재는 풀스택 개발자를 목표로 하고 있습니다."</h3>
      <br></br></blockquote>
      <h3 align="left">나이 : 98년생</h3>
      <h3 align="left">MBTI : ISTP</h3>
      <h3 align="left">취미 : Unity 공부</h3>

      </div>
    );

  }
}

 

주석 처리한 부분을 보면 하단의 html 클래스의 이름을 js 클래스에 태그 형식으로 삽입해 사용한다.

 

이 구조가 앞서 얘기했던 구조로 구현한 방식이다.

 

이제 html 클래스 부분만 따로 떼어 보면,

 

App.js

class Firstpage extends Component{  // 클래스 이름 첫문자 무조건 대문자!

  render() {
    return(
      <div>
      <h1>소개</h1>
      <blockquote>
        <img alt= "profile" src={process.env.PUBLIC_URL+"/img/profile.jpg"} align="left" hspace="20"/>
      <br></br><h3>"졸업 작품에서 백엔드 개발을 경험 해 본 후 백엔드 개발로 진로를 정해 <br></br> 현재는 풀스택 개발자를 목표로 하고 있습니다."</h3>
      <br></br></blockquote>
      <h3 align="left">나이 : 98년생</h3>
      <h3 align="left">MBTI : ISTP</h3>
      <h3 align="left">취미 : Unity 공부</h3>

      </div>
    );

  }
}

 

img 태그에서 src 부분을 주목하면 된다.

 

process.env.PUBLIC_URL 이 부분은 필수 부분이 아니다.

 

그 뒤의 파일 경로명만 작성했을 때 img가 잘 보인다면 굳이 사용하지 않아도 되지만, 나처럼 경로명을 써도 img가 뜨지 않을 경우에만 사용하면 된다.

 

대개 img를 넣을 때는 public/img 라는 폴더를 생성해 그 안에 이미지를 넣어준다.

 

사진이 안 떠서 구글링하다보니 반드시 img 폴더를 생성하고 그 안에 사진을 넣어야 된다고 말씀하시는 분들도 계셨으니 웬만하면 img라는 파일을 별도로 만드는 것이 좋을 것 같다.

 

align은 왼쪽에 정렬하겠다는 뜻인데, 이 코드를 사용하면 사진 옆에 글이 올 수 있게 된다.

 

나중에 알게된 사실이지만 이 속성은 html 표준인 html5에서는 지원하지 않는다고 한다.

 

차후 리팩토링을 하게 된다면 다른 코드로 대체해볼 것 같다.

 

hspace는 이미지 좌우 여백을 지정해주는 속성이다.

 

마지막으로 blockquote는 들여쓰기 역할을 하는 태그다.

 

 

웹 페이지 이미지 배치하기

---

 

처음에는 단순히 아래처럼 img 태그에 align를 추가해 배치했다.

 

 

근데 코드를 보면 display 속성까지 사용하고 있는데 배치가 제대로 안 돼서 block 값을 줬다가... 이리저리 구글링해보는 중이었다.

 

그러나 배치는 계속 아래처럼 비뚤었고 코드까지 지저분해져서 근본적으로 해결할 수 있는 방안을 찾기로 했다.

 

그러다 알게된 것이 gridlayout이다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout

CSS 그리드 레이아웃 - CSS: Cascading Style Sheets | MDN

 

HTML이 아니라 CSS로 아주 깔끔하게 해결할 수 있었다.

 

App.css

.App {
  text-align: center;
  min-height:100vh;
  background-image: url(/src/bgimg/bgimg.jpg); /* 뒤에서 자세한 설명 */
  background-size: 100% 100%;
}


.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px; /* 칸(이미지) 사이 간격 */
  grid-auto-rows: minmax(100px, auto);
  padding : 20px;
}
.one {
  grid-column: 1;  /* 첫 번째 줄 */
  grid-row: 1; /* 첫번째 칸 */
}
.two {
  grid-column: 2;
  grid-row: 1;
}
.three {
  grid-column: 3;
  grid-row: 1;
}
.four {
  grid-column: 4;
  grid-row: 1;
}
.five {
  grid-column: 1;
  grid-row: 2;
}
.six {
  grid-column: 2;
  grid-row: 2;
}
.seven {
  grid-column: 3;
  grid-row: 2;
}
.eight {
  grid-column: 4;
  grid-row: 2;
}

 

코드가 길어서 그렇지 엄청 간단하다!

 

나는 한 슬라이드에 최대 8개의 이미지가 들어가기 때문에 eight까지 있다.

 

gridlayout을 이용하면 비율에 맞춰 이미지가 자동으로 들어간다.

 

적용 방법은 아래와 같다.

 

App.js

class Thirdpage extends Component{  // 클래스 이름 첫문자 무조건 대문자!

  render() {
    return(
      <div>
        <h1>사용 가능 툴</h1><br></br>
      <div class="wrapper">
        <img class="one" alt= "weblogo" src={process.env.PUBLIC_URL+"/img/weblogo.png"}/>
        <img class="two" alt= "linuxlogo" src={process.env.PUBLIC_URL+"/img/linux.png"}/>
        <img class="three" alt= "djangologo" src={process.env.PUBLIC_URL+"/img/djangologo.png"}/>
        <img class="four" alt= "mysqllogo" src={process.env.PUBLIC_URL+"/img/mysqllogo.png"} />
        <img class="five" alt= "mongodblogo" src={process.env.PUBLIC_URL+"/img/mongodblogo.png"} />
        <img class="six" alt= "mariadblogo" src={process.env.PUBLIC_URL+"/img/mariadblogo.png"}/>
        <img class="seven" alt= "phplogo" src={process.env.PUBLIC_URL+"/img/phplogo.png"}/>
        <img class="eight" alt= "nodejs" src={process.env.PUBLIC_URL+"/img/nodejslogo.png"}/>
      </div>
      </div>
    );

  }
}

 

코드가 매우 간단하므로 별도로 설명하지 않겠다.

 

 

웹 페이지에 배경 이미지 넣기

---

 

이 코드도 매우 간단하다.

 

.App {
  text-align: center;
  min-height:100vh;
  background-image: url(/src/bgimg/bgimg.jpg); /* 이 부분 */
  background-size: 100% 100%; /* 이 부분 */
}

 

background-image는 말 그대로 배경 이미지를 넣을 수 있는 속성이다.

 

다만, url 경로를 보면 아까는 이미지를 넣을 때 public/img 폴더를 사용한다고 했는데 배경 이미지는 그렇게 넣으면 아래의 에러가 났다.

 

Module not found: You attempted to import ...... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported

 

에러를 봐도 src 폴더에 사진이 없어서 찾을 수 없다는 내용이다.

 

그래서 구글링하다가 해결했는데, 단순하게 그냥 src에 이미지 폴더를 하나 생성하는 방법이다.

https://britny-no.tistory.com/21

react에서 이미지 경로 문제

 

background-size는 한 화면에 보여지는 이미지 비율이다.

 

만약 50% 50%로 지정하게 되면 바둑식으로 가로세로 동일한 이미지가 2개씩 나타나게 된다.

 

 

닫는 글

---

 

이미지 배치하는 데 시간을 너무 잡아먹었다.

 

CSS 배운 게 3년 전이라서 거의 모든 게 낯설지만 좋은 경험이 됐다.

 

마지막은 완성된 페이지

 

아무리 생각해도 디자인 감각은 진짜 없는 듯하다

 

 

 

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

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

 

 

 

++ 현재는 위의 페이지를 전부 리뉴얼했다. 다음 포스팅에서 볼 수 있다.