소심노트

도전과제 세계부자 리스트 API 받아와서 웹페이지 구성

himzei — Fri, 16 Sep 2022 20:22:20 +0900

동영상 강의를 들으면 늘 이해는 가는데 막상 코드챌린지를 해서 과제가 나오면 막막해진다.

다시 동영상을 보고 나도 비쥬얼 코드만 켜면 마찬가지다.

이번에는 무작정 코드 짜보고 모르는건 구글링으로 도전과제의 의도와는 관계없이 화면 구현에만 집중했다.

오늘이 첫 포스팅이지만

앞으로 얼마나 포스팅할 수 있을지 의문이다.

우선 폴더구조는 pages 아래에 about, index, globalStyle 파일을 줬다.

강의에서는 Tailwindcss를 배웠지만 주어진 블루프린트에서는 세팅을 하고 구글링을 해도 잘 몰라서

npm i styled-components를 활용했다.

아무래도 Tailwindcss 세팅 후 index.js에서 불러올 때 오류가 나는데 나중에 모법답안 올라오면 확인해 보려한다.

package.json 파일은 아래와 같다.

{
  "name": "nextjs-blueprint",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "post-update": "yarn upgrade --latest"
  },
  "dependencies": {
    "autoprefixer": "^10.4.11",
    "next": "latest",
    "postcss-cli": "^10.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router-dom": "^6.4.0",
    "styled-components": "^5.3.5"
  },
  "license": "MIT",
  "keywords": [],
  "description": "",
  "devDependencies": {
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "tailwindcss": "^3.1.8"
  }
}

크게 index와 about 페이지가 있는데

api 주소를 통해 데이터를 받아오는 부분은 fetch를 이용해서 받아왔는데 이부분도 강의를 다 보지 않아서 모르겠지만 다른방법이 있을 것 같고, 각각의 세계부자를 클릭 했을때 id 값을 넘겨줄때 useRouter를 이용해 push 해주었다. 이부분도 구글링 해서 찾아낸거지만 아무래도 강의에서는 다를 것 같다. 모법 답안이 기대된다.

index.js

import { useRouter } from "next/router";
import { useState } from "react";
import styled from "styled-components";
import GlobalStyle from "./globalStyle";

const Container = styled.div`
  margin: 40px 0;
`;
const Inner = styled.div`
  width: 1000px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 30px;
  column-gap: 5px;
`;
const FlexBox = styled.div`
  display: flex;
  flex-direction: column;
`;
const ImgBox = styled.img`
  width: 200px;
  height: auto;
  margin-bottom: 5px;
`;
const TitleBox = styled.span`
  font-weight: bold;
`;
const DetailBox = styled.span`
  font-size: 12px;
`;

function IndexPage() {
  const [data, setData] = useState([]);
  const router = useRouter();
  fetch("https://billions-api.nomadcoders.workers.dev/")
    .then((response) => {
      return response.json();
    })
    .then((item) => {
      setData(item);
    });

  return (
    <>
      <GlobalStyle />
      <Container>
        <Inner>
          {data?.map((item) => (
            <FlexBox
              key={item.id}
              onClick={() =>
                router.push({ pathname: "/about", query: { pid: item.id } })
              }
            >
              <ImgBox src={item.squareImage} />
              <TitleBox>{item.name}</TitleBox>
              <DetailBox>{item.industries[0]}</DetailBox>
            </FlexBox>
          ))}
        </Inner>
      </Container>
    </>
  );
}

export default IndexPage;

about.js

import GlobalStyle from "./globalStyle";
import { useRouter } from "next/router";
import { useState } from "react";
import styled from "styled-components";

const Container = styled.div`
  margin: 40px 0;
`;
const Inner = styled.div`
  width: 1000px;
  background-color: #3f72af;
  padding: 60px 20px;
  margin: auto;
`;
const Contents = styled.div`
  margin: 80px 0;
  width: 100%;
  height: 100%;
`;
const Wrap = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
`;
const ImgBox = styled.img`
  width: 280px;
  height: 280px;
  margin-bottom: 10px;
`;
const TitleBox = styled.div`
  font-size: 20px;
  color: #f9f7f7;
`;
const ContentBox = styled.div`
  width: 100%;
`;
const TitleBox2 = styled.h2`
  font-size: 30px;
`;
const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
`;
const GridWrap = styled.div`
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe2ef;
  padding: 10px;
`;

export default function AboutPage() {
  const router = useRouter();
  const pid = router.query.pid;
  const [data, setData] = useState([]);

  fetch(`https://billions-api.nomadcoders.workers.dev/person/${pid}`)
    .then((response) => {
      return response.json();
    })
    .then((item) => {
      setData(item);
    });

  return (
    <>
      <GlobalStyle />
      <Container>
        <Contents>
          <Inner>
            <Wrap>
              <ImgBox src={data.squareImage} />
              <TitleBox>{data.name}</TitleBox>
              <ContentBox>
                Networth : {Math.round(data.netWorth)} millions
              </ContentBox>
              <ContentBox>Country : {data.country}</ContentBox>
              <ContentBox>Industry : {data.industries}</ContentBox>
              <ContentBox>{data.bio}</ContentBox>
            </Wrap>
          </Inner>
        </Contents>
        <Contents>
          <Inner>
            <Wrap>
              <TitleBox2>Financial Assets</TitleBox2>
              <Grid>
                {data?.financialAssets?.map((item, index) => (
                  <GridWrap>
                    <ContentBox>{item.ticker}</ContentBox>
                    <ContentBox>{item.companyName}</ContentBox>
                    <ContentBox>{item.currentPrice}</ContentBox>
                  </GridWrap>
                ))}
              </Grid>
            </Wrap>
          </Inner>
        </Contents>
      </Container>
    </>
  );
}

[포토샵] 이미지 자동인식 채우기 && 하늘 배경 바꾸기

himzei — Fri, 16 Sep 2022 19:27:57 +0900

바다이미지 위에 있는 사람을 지우기 위해서는 우선 올가미툴을 선택해서 데충 사람 모양으로 그려준다

"편집" > "내용인식" 채우기를 선택한다.

내용인식 채우기 화면에서 옵션을 조절해 가면 오른쪽 화면을 확인한다.

사람형체가 지워졌다.

사람 뒤 쪽에 있던 다리 끝부분이 이상해서 보정해준다.

왼쪽 다리 끝부분을 따서 오른쪽으로 붙여준다. 수평 뒤집기를 했다.

다음은 2022년 신기능 하늘 배경 바꾸기를 해봤다.

편집 > 하늘대체 버튼클릭

정말 간단하게 바꿀 수 있다.

수평선을 보조선을 이용해서 맞춰준다.

그라데이션으로 바깥쪽 부분을 어둡게 해주고 중앙부분으로 갈수록 투명하게 설정하여 입혀준다.

뭔가 어두운 느낌이 들지 않아서

그라데이션 밑에 있는 그림을 흑백 처리했다.

네모 툴을 이용하고 네모를 그려주고 radius를 마우스로 적당히 조정한다.

그림자 기능을 이용하여 그림자 색깔을 흰색으로 하고 블러를 적당히 처리한 후 표현했다.

복사해서 물속에 투영된 것처럼 아래와 같이 해주고

Crtl + Shift + X 픽셀유동화를 이용해서 물결따라 휘저어줌

뒤돌아서 있는 사람 이미지를 다운받아서 매직툴을 이용해 빠르께 따준다.

사람이미지도 어둡게 처리하여 그림자처럼 보이게 복사해서 수직뒤집기를 해준다.

[포토샵]피부보정 2022

himzei — Fri, 16 Sep 2022 13:56:29 +0900

예전에 도장툴로 일일이 했던 피부보정을 간단히 할 수 있는 방법

포토샵 2022 버전이후 부터 가능하다.

필터에 > Neural Filters 클릭

"피부를 부드럽게" 클릭

엄청 간단하게 피부보정이 된다.

[포토샵]글자를 원 모양, 패스 모양 작성

himzei — Fri, 16 Sep 2022 13:47:50 +0900

배지 그리고 도장등 원모양 위에 글자를 입력을 해야하는 경우 포토샵에서 일자로 사용하는 방빕 이외에 대해 알아보자

원 모양 이미지를 준비한다. 그 위에 텍스트 툴을 선택하여 적당한 위치에 글자를 작성한다.

작성한 글자를 선택 후 크기조절(Ctrl + T)를 선택하고, 그 위에 마우스 오른쪽 버튼을 클릭한다.

기울기를 선택한 후에 원하는 모양으로 조절이 가능하다.

'기울기' 버튼을 클릭하면 뒤틀기에 "부채꼴"모양을 선택하여 "구부리기" 값을 넣어주면 된다.

다음으로 원모양 툴을 선택 후 아래그림과 같이 그려준다.

텍스트 툴을 선택 후 그려준 원 위로 마우스를 올려 놓으면 마우스 모양이 바뀐다.

마우스의 모양이 바뀌면 클릭 후 원하는 글자를 입력한다.

펜툴을 이용하여 원하는 라인을 그려준 후에 그 위에 글자 입력도 가능한다.

펜툴을 이용하여 원하는 라인을 그려준 다음, 텍스트 툴을 선택하여 마우스를 올려 둔 후 클릭

클릭한 글자위에 원하는 글자를 입력한다.

입력이 되지 않는 경우 "패스선택도구"를 선택하여 늘려주면 글자가 나온다.

CSS : 그레디언트 속성

himzei — Tue, 30 Aug 2022 13:27:23 +0900

linear-gradient() 함수

색상이 한 방향에서 다른 방향으로 변화하는 선형 그레디언트 적용

linear-gradient(각도, 색상 위치, 색상 위치)

linear-gradient(45deg, #f85032 0%, #e73827 100%)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 60px;
        text-align: center;
      }
      #box1 {
        background: linear-gradient(90deg, #f85032 1%, #e73827 100%)
      }
      #box2 {
        background: linear-gradient(90deg, #f85032 1%, #f16f5c 50%, #f6290c 50%, #db5253 100%)
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <h1>Box 1</h1>
    </div>
    <div id="box2">
      <h1>Box 2</h1>
    </div>
  </body>
</html>

radial-gradient() 함수

linear-gradient() 함수에서 각도부분만 제거하고 나머지는 같다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 60px;
        text-align: center;
      }

      #box3 {
        background: radial-gradient(#f85032 1%, #f16f5c 50%, #f6290c 50%, #db5253 100%)
      }
    </style>
  </head>
  <body>

    <div id="box3">
      <h1>Circle</h1>
    </div>
  </body>
</html>

에쁜 그레디언트 적용 참고사이트

https://webgradients.com/

Free Gradients Collection by itmeo.com

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

webgradients.com

사이트 메인페이지에서 마우스 클릭만 하면 CSS 소스가 복사가 된다

에디터에서 그대로 붙여넣기만 하면 된다.

구글 웹폰트 적용 하기

himzei — Tue, 30 Aug 2022 11:56:55 +0900

구글 웹폰트 사이트 접속

언어를 "Korean"으로 설정해주고 원하는 폰트를 찾는다.

Styles 탭에서 내가 원하는 폰트를 추가시켜 주고, 오른쪽 상단에 "View Selected Families"를 선택

html 태그안에서 사용을 원하면 <link>를 선택하고 아래에 코드를 복사해서 html 파일의 <head>안에 넣어준다.

"CSS rules to specify families" 에 있는 css 속성을 적용하고자 하는 선택자 안에 넣어준다.

코드예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta
    name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 웹폰트 적용 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
    <title>Document</title>

    <style>
      * {
        font-family: 'Gamja Flower', cursive;
      }
      .a {
        font-size: 32px;
      }
      .b {
        font-size: 2em;
      }
      .c {
        font-size: large;
      }
      .d {
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1>Lorem, ipsum dolor.</h1>
    <p class="a">Lorem ipsum dolor sit amet.</p>
    <p class="b">Lorem ipsum dolor sit amet.</p>
    <p class="c">Lorem ipsum dolor sit amet.</p>
    <p class="d">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

화면구현

비디오 파일에서 설정 단위로 이미지 캡쳐

himzei — Tue, 30 Aug 2022 11:25:37 +0900

파이썬을 활용한 n초단위 이미지 캡쳐

애플 웹페이지를 보다 보면 마우스 휠에 따라 마치 동영상처럼 움직이는 사이트를 보게 되었다.

동영상 파일을 불러와서 제작한 것이 아니라

수백장의 이미지 파일을 불러와서 브라우저에 뿌려주는 방식이다.

이처럼 동영상을 여러장의 이미지로 자연스럼게 하기 위해서는 일일이 캡쳐를 해서 만들기 보다는

파이썬을 활용하여 이미지를 캠쳐하면

동영상의 특정구간을 원하는 단위로 캡쳐가 가능하다.

# pip install opencv-python
import cv2

img_capture = cv2.VideoCapture('video.mp4')
# 이미지 캡쳐한 값을 success에는 bool 값과 image에는 numpy.ndarray 반환
success, image = img_capture.read()

# 영상정보 확인하기
fps = img_capture.get(cv2.CAP_PROP_FPS)
frame_count = img_capture.get(cv2.CAP_PROP_FRAME_COUNT)
duration = frame_count / fps
print(fps, frame_count, duration)

# n초 단위로 캡쳐하기 위한 n값 설정
increase_second = 1
# second 0부터 시작해서 1씩 증가
second = 0
# 저장할 파일 이름을 0부터 시작해서 사진갯수 만큼 증가
count = 0

while success:
    cv2.imwrite(f"picture{count}.jpg", image)
    success, image = img_capture.read()
    # n초 단위로 사진캡쳐
    img_capture.set(cv2.CAP_PROP_POS_MSEC, second * 1000)
    print(f"이미지 생성 : picture{count}.jpg", success)
    count += 1
    second += increase_second

CSS3 속성

himzei — Tue, 30 Aug 2022 10:21:58 +0900

크기단위

% : 백분율 단위

em: 배수단위

px : 픽셀

색상단위

#000000 : HEX코드단위

rgb(red, green, blue) RGB 색상단위

rgba(red, green, blue, alpha) RGBA 색상단위

hsl(hue, situration, lightness) HSL 색상단위

hsla(hue, situration, lightness, alpha) HSLA 색상단위

URL단위

파일을 지정할때는 URL단위를 사용

background-image: url("desrt.jpg")

width속성과 height속성

박스의 가로 세로 크기의 지정

margin속성과 padding 속성

박스 바깥쪽 및 안쪽 여백 지정

box-sizing 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </body>
</html>

display 속성

display : none - 태그를 화면에서 보이지 않게 만듦

display : block - 태그를 한 줄씩 세로로 배치

display : inline - 태그를 한 줄내 가로로 배치, margin속성과 padding속성이 좌우로만 적용, width, height 적용안됨

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
        display: inline;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>

display : inline-block : 한 줄내 가로로 배치, margin속성과 padding속성이 상하좌우로 다 적용

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
        display: inline-block;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>

visibility 속성

대상을 보이거나 보이지 않게 지정

display 속성의 none키워드와 달리 영역을 유지한 채로 보이지 않게만 만듦

visibility: collapse - 테이블 태그를 보이지 않게 만듦

visibility: visible - 태그를 보이게 만듦

visibility: hidden - 태그를 보이게 만듦

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: red;
    border: 10px solid black;
  }
  div:nth-child(1) {
    margin: 10px;
    padding: 10px
  }
  // 두번째 박스에 적용
  div:nth-child(2) {
    visibility: hidden;
    margin: 10px;
    padding: 10px;
    box-sizing: content-box;
  }
  div:nth-child(3) {
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

display : none 과 visibility : hidden 비교

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: red;
    border: 10px solid black;
  }
  div:nth-child(1) {
    margin: 10px;
    padding: 10px
  }
  div:nth-child(2) {
    display: none;
    margin: 10px;
    padding: 10px;
    box-sizing: content-box;
  }
  div:nth-child(3) {
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

공간분할태그 및 CSS 선택자

himzei — Mon, 29 Aug 2022 15:34:07 +0900

<div>태그

레이아웃을 생성할때 사용되는 태그로 div는 블록 형식으로 분할

<span>태그

인라인 형식으로 레이아웃을 생성할 때 사용

<body>
    <!-- 공간분할태그 div -->
    <div>공간1</div>
    <div>공간2</div>
    <div>공간3</div>
    <div>공간4</div>
    <div>공간6</div>
    <!-- 공간분할태그 span -->
    <span>공간1</span>
    <span>공간2</span>
    <span>공간3</span>
    <span>공간4</span>
    <span>공간5</span>
  </body>

출력화면

시멘틱태그(Semantic Tag)

레이아웃을 생성할 때 사용하는 의미론적 태그로 시멘틱 웹 태그

공간분할방법

<body>
  <header>
    <nav></nav>
    <nav></nav>
  </header>
  <div class="content">
    <section></section>
    <aside></aside>
  </div>
  <footer></footer>
</body>

CSS 선택자

동위 선택자

선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택합니다.

선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택합니다.

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>CSS 선택자</title>
    <style>
      h1 + h2 {
        color: red
      }
      h1 ~ h2 {
        background: skyblue;
      }
    </style>
  </head>
  <body>

    <h1>공간1</h1>
    <h2>공간2</h2>
    <h2>공간3</h2>
    <h2>공간4</h2>
    <h2>공간6</h2>

  </body>
</html>

상태선택자

입력양식의 상태를 선택할 때 사용하는 선택자

:checked - 체크상태의 input 태그

:focus - 초점이 맞추어진 input 태그를 선택

:enabled - 사용 가능한 input

:disabled - 사용 불가능한 input

구조선택자

CSS3부터 지원하는 선택자

:first-child - 형제관계중에서 첫번째 위치하는 태그 선택

:last-child - 형제관계중에서 마지막에 위치하는 태그 선택

:nth-child(수열) - 형제관계중에서 앞에서 n번째 위치하는 태그 선택

:nth-last-child(수열) - 형제관계중에서 뒤에서 n번째 위치하는 태그 선택

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>CSS 선택자</title>
    <style>
      li {
        list-style: none;
        float: left;
        padding: 15px;
      }
      li:first-child {
        border-radius: 10px 0 0 10px;
      }
      li:last-child {
        border-radius: 0 10px 10px 0;
      }
      li:nth-child(2n) {
        background-color: #ff0003;
      }
      li:nth-child(2n + 1) {
        background-color: #880000;
      }
    </style>
  </head>
  <body>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

  </body>
</html>

형태구조선택자

일반구조선택자와 비슷하지만 태그 형태를 구분

:first-of-type 형제관계중에서 첫 번째로 등장하는 특정 태그 선택

:last-of-type 형제관계중에서 마지막으로 등장하는 특정 태그 선택

:nth-of-type(수열) 형제관계중에서 앞에서 수열 번째로 등장하는 특정태그 선택

:nth-last-of-type(수열) 형제관계중에서 뒤에서 수열 번째로 등장하는 특정태그 선택

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1:first-of-type {
        color: red
      }
      h2:first-of-type {
        color: blue
      }
      h3:first-of-type {
        color: purple
      }
    </style>

  </head>
  <body>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>

    <h3>Header 3</h3>
    <h2>Header 2</h2>
    <h1>Header 1</h1>
  </body>
</html>

파이썬, 자동으로 그림파일 불러 와서 워드파일 만들기

himzei — Mon, 29 Aug 2022 12:51:16 +0900

1시간 단축 할 수 있는 python 프로그래밍

보통 사진 촬영을 하고 난 뒤, 폴더 별로 사진을 정리한다.

정리된 사진을 워드파일이나 한글파일에 삽입해서 정리해야 할 경우가 있다.

업체로부터 촬영의뢰를 받고 결과보고서를 만들어야할 때, 100 명이 가까운 사진 파일을

원본파일-1차보정파일-2차보정파일-정장합성 파일등을 변화된 모습을 보고서에 담아야 한다.

이럴 때, 일일이 사진파일을 복사해서 워드에 담으려면 1시간 이상 걸린다.

아래와 같이 코드를 작성하고 실행시키면 정말 1초안에 결과물이 만들어진다.

코드해석

# 아래와 os와 docs를 임포트 한다. 
from os import listdir
from os.path import isdir

from docx import Document
from docx import shared

document = Document()
orig_dir = "./"
# file_list 변수에 현재 폴더결로를 담아준다
file_list = listdir(orig_dir)

# 현대 폴더에 있는 모든 폴더를 배열에 담아 폴더 하나씩을 실행시킨다.
for file_li in file_list:
	# 불러온 file_li가 폴더가 맞는지 확인한다. 맞다면 아래 코드를 실행시킨다. 
    if isdir("./"+file_li):
        photo_orig_dir = "./" + file_li
        photo_dir = listdir(photo_orig_dir)

        try:
        	# 테이블 만든다
            table = document.add_table(rows=2, cols=5)

            hdr_cells = table.rows[0].cells
            style0 = hdr_cells[0].paragraphs[0].add_run("원본")
            style1 = hdr_cells[1].paragraphs[0].add_run("기본보정")
            style2 = hdr_cells[2].paragraphs[0].add_run("메이크업보정")
            style3 = hdr_cells[3].paragraphs[0].add_run("정장/배경합성1")
            style4 = hdr_cells[4].paragraphs[0].add_run("정장/배경합성1")

            style0.font.size = shared.Pt(10)
            style1.font.size = shared.Pt(10)
            style2.font.size = shared.Pt(10)
            style3.font.size = shared.Pt(10)
            style4.font.size = shared.Pt(10)

            row_cells = table.rows[1].cells
            paragraph0 = row_cells[0].paragraphs[0].add_run()
            paragraph1 = row_cells[1].paragraphs[0].add_run()
            paragraph2 = row_cells[2].paragraphs[0].add_run()
            paragraph3 = row_cells[3].paragraphs[0].add_run()
            paragraph4 = row_cells[4].paragraphs[0].add_run()

			# flie_li 경로와 파일명을 합친후 불러온다
            paragraph0.add_picture(file_li + '/0.jpg')
            paragraph1.add_picture(file_li + '/1.jpg')
            paragraph2.add_picture(file_li + '/2.jpg')
            paragraph3.add_picture(file_li + '/3.jpg')
            paragraph4.add_picture(file_li + '/4.jpg')
        
        except FileNotFoundError:
            pass


document.save("demo.docx")