My Tech Blog (이미지)

요즘 챗GPT로 짤만들기 대유행인거 아시죠? 지난 25일 출시된 챗GPT-4o 이미지 생성 모델은 사용자가 사진을 업로드하면 이를 심슨, 스머프, 레고 등 유명 애니메이션 화풍으로 변환하는 기능을 갖추고 있다. 특히 일본 애니메이션의 거장 미야자키 하야오 감독이 설립한 지브리 스타일로 변환하는 기능이 가장 큰 인기다. 올트먼 CEO 역시 자신의 X프로필 사진을 지브리 스타일로 바꾸기도 했다. 오픈AI가 출시한 이미지 생성 모델이 서버가 과부하에 시달릴 정도로 전세계적인 인기를 끌고 있어요. 사진이나 이미지를 짤로 만들어주는 건 물론, 이미지를 묘사하면 짤을 생성해 주기도 합니다. 그래서 저도 자주 이용하는데요. 미국 시엔비시(CNBC) 등 주요 외신에 따르면, 샘 올트먼 오픈에이아이 최고경영자(CEO..

코딩 애플 보다가 좋은 내용이 있어서 스크랩  오래된 사진들이나 인터넷에서 돌고 돌던 사진은아래 사진처럼 깨져 있는 경우가 많다.왜 JPEG는 디지털 풍화가 생길까?  만약 스마트폰으로 찍은 1000*1000px 사진을 업로드하려면 저장 공간이 얼마나 필요할까? 먼저 색상 하나(하나의 픽셀)를 저장하려면 3Byte의 용량이 필요하다.  하나의 픽셀에는하나의 RGB색상이 들어 있는데일반적으로 RGB는 Red, Green, Blue 3개의 색상을 조합해야 하나의 색상이 나온다. 따라서 하나의 가로 세로 1000픽셀인 사진 한 장을 저장하는데에는 적어도 3mb의 공간이 필요하다고 계산 해 볼 수 있다.하나의 사진 용량 = 1000*1000*3Byte = 3mb 근데 우리가 인터넷에 사진을 업로드 해 보면? 훨..

이미지가 본문 폭을 벗어나는 문제  티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다. 그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다. 일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다 1. 본문 쪽 맞춤 기능우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다.  하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정..

✨사진에 다양한 필터 적용하기✨ 안녕하세요. 오늘은 vscode로 html/css 만을 이용해서 사진에 필터를 적용하는 법을 배워봐요. 대각선, 흐림, 회색조, 세피아 네 가지로 연출해보는 다양한 사진 꾸미기!! 지금부터 시작해 볼까요 📌 1. 대각선을 활용한 빗금무늬 필터 사진에 대각선 필터를 적용해주면, 아날로그 느낌을 연출 할 수 있습니다. 또 카피라이팅 할 때 문구를 배치하기 위한 배경으로 사용하기도 좋아요. 가상요소인 ::before로 대각선을 만들고, 사진 위에 포갠 디자인입니다. ☑️ HTML 코드 ☑️ CSS 코드 📌 2. 도트 필터 점 무늬 필터로 화질이 낮은 사진에도 재미있는 효과를 줄 수 있어요. ☑️ HTML 코드 ☑️ CSS 코드 📌 3. 흑백사진 만들기(grayscale) gra..

✨사진에 프레임 추가하기 & 액자 만들기✨ 안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.   📌 1. 대각선 프레임 만들기 사진에 입체감을 줄 수 있는 대각선 프레임 디자인이예요. 의사요소 또는 가상요소라고도 부르는 ::after이용해서 만들어볼게요. 준비 되셨나요?   ☑️  요소를 둘러싼 테두리에 이미지를 지정하는 border-imageborder-image-source: repeating-linear-gradient( 45deg, /* 45도 회전, 대각선의 기울어진 각도 */ #ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 지정 */..

✨피사체에 그림자 추가하기✨ 안녕하세요. 오늘은 피사체에 그림자를 추가해서 역동적인 이미지를 만드는 법을 알려드릴게요. 포토샵이나 일러스트를 사용하지 않아도 HTML과 CSS만으로 작업 할거니까 Vscode에서 따라해주세요. 📌 STEP 1. 투명한 바탕의 이미지를 준비해주세요. 투명한 배경 이미지 찾는 법 알려드릴게요. 포토샵으로 직접 배경을 제거하는 방법도 있지만 우리는 연습만 할꺼니까 구글에서 배경 없는 이미지를 가져와봅시다. 그냥 검색하면 실제로는 배경이 투명하지 않은 경우가 많아요. 구글에서 투명한 이미지 검색하는 법 구글 이미지검색 > 검색창 아래 [도구] 클릭 > [색상]에서 투명 클릭 실제로 배경이 투명한지 확인하기 위해서는 직접 이미지를 클릭해보세요. 아래처럼 배경에 회색 스케일의 바둑판..