소심노트

동영상 강의를 들으면 늘 이해는 가는데 막상 코드챌린지를 해서 과제가 나오면 막막해진다. 다시 동영상을 보고 나도 비쥬얼 코드만 켜면 마찬가지다. 이번에는 무작정 코드 짜보고 모르는건 구글링으로 도전과제의 의도와는 관계없이 화면 구현에만 집중했다. 오늘이 첫 포스팅이지만 앞으로 얼마나 포스팅할 수 있을지 의문이다. 우선 폴더구조는 pages 아래에 about, index, globalStyle 파일을 줬다. 강의에서는 Tailwindcss를 배웠지만 주어진 블루프린트에서는 세팅을 하고 구글링을 해도 잘 몰라서 npm i styled-components를 활용했다. 아무래도 Tailwindcss 세팅 후 index.js에서 불러올 때 오류가 나는데 나중에 모법답안 올라오면 확인해 보려한다. package...

바다이미지 위에 있는 사람을 지우기 위해서는 우선 올가미툴을 선택해서 데충 사람 모양으로 그려준다 "편집" > "내용인식" 채우기를 선택한다. 내용인식 채우기 화면에서 옵션을 조절해 가면 오른쪽 화면을 확인한다. 사람형체가 지워졌다. 사람 뒤 쪽에 있던 다리 끝부분이 이상해서 보정해준다. 왼쪽 다리 끝부분을 따서 오른쪽으로 붙여준다. 수평 뒤집기를 했다. 다음은 2022년 신기능 하늘 배경 바꾸기를 해봤다. 편집 > 하늘대체 버튼클릭 정말 간단하게 바꿀 수 있다. 수평선을 보조선을 이용해서 맞춰준다. 그라데이션으로 바깥쪽 부분을 어둡게 해주고 중앙부분으로 갈수록 투명하게 설정하여 입혀준다. 뭔가 어두운 느낌이 들지 않아서 그라데이션 밑에 있는 그림을 흑백 처리했다. 네모 툴을 이용하고 네모를 그려주고 r..

예전에 도장툴로 일일이 했던 피부보정을 간단히 할 수 있는 방법 포토샵 2022 버전이후 부터 가능하다. 필터에 > Neural Filters 클릭 "피부를 부드럽게" 클릭 엄청 간단하게 피부보정이 된다.

배지 그리고 도장등 원모양 위에 글자를 입력을 해야하는 경우 포토샵에서 일자로 사용하는 방빕 이외에 대해 알아보자 원 모양 이미지를 준비한다. 그 위에 텍스트 툴을 선택하여 적당한 위치에 글자를 작성한다. 작성한 글자를 선택 후 크기조절(Ctrl + T)를 선택하고, 그 위에 마우스 오른쪽 버튼을 클릭한다. 기울기를 선택한 후에 원하는 모양으로 조절이 가능하다. '기울기' 버튼을 클릭하면 뒤틀기에 "부채꼴"모양을 선택하여 "구부리기" 값을 넣어주면 된다. 다음으로 원모양 툴을 선택 후 아래그림과 같이 그려준다. 텍스트 툴을 선택 후 그려준 원 위로 마우스를 올려 놓으면 마우스 모양이 바뀐다. 마우스의 모양이 바뀌면 클릭 후 원하는 글자를 입력한다. 펜툴을 이용하여 원하는 라인을 그려준 후에 그 위에 글자..

linear-gradient() 함수 색상이 한 방향에서 다른 방향으로 변화하는 선형 그레디언트 적용 linear-gradient(각도, 색상 위치, 색상 위치) linear-gradient(45deg, #f85032 0%, #e73827 100%) Box 1 Box 2 radial-gradient() 함수 linear-gradient() 함수에서 각도부분만 제거하고 나머지는 같다 Circle 에쁜 그레디언트 적용 참고사이트 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..

구글 웹폰트 사이트 접속 언어를 "Korean"으로 설정해주고 원하는 폰트를 찾는다. Styles 탭에서 내가 원하는 폰트를 추가시켜 주고, 오른쪽 상단에 "View Selected Families"를 선택 html 태그안에서 사용을 원하면 를 선택하고 아래에 코드를 복사해서 html 파일의 Lorem, ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 화면구현

파이썬을 활용한 n초단위 이미지 캡쳐 애플 웹페이지를 보다 보면 마우스 휠에 따라 마치 동영상처럼 움직이는 사이트를 보게 되었다. 동영상 파일을 불러와서 제작한 것이 아니라 수백장의 이미지 파일을 불러와서 브라우저에 뿌려주는 방식이다. 이처럼 동영상을 여러장의 이미지로 자연스럼게 하기 위해서는 일일이 캡쳐를 해서 만들기 보다는 파이썬을 활용하여 이미지를 캠쳐하면 동영상의 특정구간을 원하는 단위로 캡쳐가 가능하다. # pip install opencv-python import cv2 img_capture = cv2.VideoCapture('video.mp4') # 이미지 캡쳐한 값을 success에는 bool 값과 image에는 numpy.ndarray 반환 success, image = img_captu..

크기단위 % : 백분율 단위 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 속성 box1 box2 box3 display 속성 displ..

태그 레이아웃을 생성할때 사용되는 태그로 div는 블록 형식으로 분할 태그 인라인 형식으로 레이아웃을 생성할 때 사용 공간1 공간2 공간3 공간4 공간6 공간1 공간2 공간3 공간4 공간5 출력화면 시멘틱태그(Semantic Tag) 레이아웃을 생성할 때 사용하는 의미론적 태그로 시멘틱 웹 태그 공간분할방법 공간1 공간2 공간3 공간4 공간6 상태선택자 입력양식의 상태를 선택할 때 사용하는 선택자 :checked - 체크상태의 input 태그 :focus - 초점이 맞추어진 input 태그를 선택 :enabled - 사용 가능한 input :disabled - 사용 불가능한 input 구조선택자 CSS3부터 지원하는 선택자 :first-child - 형제관계중에서 첫번째 위치하는 태그 선택 :last-c..

1시간 단축 할 수 있는 python 프로그래밍 보통 사진 촬영을 하고 난 뒤, 폴더 별로 사진을 정리한다. 정리된 사진을 워드파일이나 한글파일에 삽입해서 정리해야 할 경우가 있다. 업체로부터 촬영의뢰를 받고 결과보고서를 만들어야할 때, 100 명이 가까운 사진 파일을 원본파일-1차보정파일-2차보정파일-정장합성 파일등을 변화된 모습을 보고서에 담아야 한다. 이럴 때, 일일이 사진파일을 복사해서 워드에 담으려면 1시간 이상 걸린다. 아래와 같이 코드를 작성하고 실행시키면 정말 1초안에 결과물이 만들어진다. 코드해석 # 아래와 os와 docs를 임포트 한다. from os import listdir from os.path import isdir from docx import Document from docx..