My Tech Blog (사진)

"You're not the fruit ... you're the tree"  사람들이 단물만 빨아먹고 버려지는 과일처럼 대할 때 스스로가 과일 하나가 아니라 과일 나무라는 것을 기억하라는 말 - 'How to Center Your Own Story' by Jade Chang 모든걸 꾸미기라고 생각하기뇌꾸, 통꾸, 인꾸거의 모든 것에 ‘노’라고 대답하지 않는 것. 두려워하지 않는 것 - 잡스(Jobs) 1: 에디터(Editor) 좋아하는 것으로부터 좋은 것을 골라내는 사람자꾸 잊어, 너도 누군가의 푸른 열매였다는 거 세상 그 어떤 눈도 그냥 캄캄해지는 법은 없다는 거- 안희연, [여름 언덕에서 배운 것] 호두에게환상을 하나씩 깨는 것도 여행의 부수적 목표이니까.가상 여행의 즐거움을 알면서도 나는 왠지 평..

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

그동안 몇 번 놀러간 적은 없었지만,가장 즐거웠던 시간을 함께 했던 카메라 📷 이거 이모티콘이랑 비슷하게 생겨서 더 귀여웠다.오늘은 당근마켓으로 가는날 :( 떠날 시간이야바이바이    우리와 함께 보낸 시간동안 찍은 사진은 2000컷 미만회사다니면서 바빠서 막상 많이 쓰지를 못했다. 사진을 좋아하는 새 주인을 만나서오천장 만장, 멋진 곳에 가서 아름다운 풍경을 담았으면🌱 즐거운 시간은 순간이지만정말로, 사진과 추억은 오래 오래 남는다.   카메라로 알라밍가 찍어준 사진 ㅋㅋㅋㅋㅋ >  내가 어릴 때는, 디지털 카메라가 폰 카메라보다 성능이 월등이 우수했다.그러나 이제는 폰카메라도 성능이 너무너무 좋아졌다.그래도 진짜 카메라가 특별한 이유는 감성 때문인 거 같오 :)  카메라는 단순히 사진을 찍는 도구..

✨사진의 형태를 다양한 모양으로 바꾸기 ✨  안녕하세요. 사진 형태를 재미있는 모양으로 수정해주는 기발한 사이트 하나 소개해 드릴게요.  Fancy Border Radius GeneratorGenerator to build organic shapes with CSS3 border-radius9elements.github.io 이 사이트에서 마우스로 이미지를 원하는 모양으로 드래그 해주면 border-radius 프로퍼티 값을 자동으로 계산해서 알려준답니다. 값을 복사해서 vscode로 가져오면 직접 프레임을 만들지 않아도 쉽게 사진 테두리를 원하는 모양으로 자를 수 있어요. 사진이 정사각형에 가까울수록 내가 설정해 준 모양으로 만들기가 쉬워요. ☑️ HTML 코드☑️ CSS 코드  border-radiu..

✨사진&로고 디자인✨ 안녕하세요. 오늘은 vscode로 html/css로 로고를 디자인할 때 활용할 수 있는 디자인을 배워봐요. 사진에 로고 삽입하는 법, 그리고 글씨를 사진으로 채우는 법을 알아봅시다.📌 1. 흰 배경의 로고를 사진에 올리기 배경으로 사용할 사진 한 장과 흰 배경에 검은색 글씨가 있는 로고 이미지를 준비해 주세요. 저는 디즈니를 좋아해서 디즈니 사진과 로고를 준비했어요. 원칙적으로 이미지 위에 삽입하려는 로고의 배경이 투명하지 않으면 포토샵을 사용해서 배경을 제거하고 PNG파일로 만들어주어야 하지만 아래 CSS 코드를 사용하면 그런 작업 없이도 간단하게 흰 배경은 투과되도록 합성할 수 있습니다. 이것을 가능하게 해 주는 것이 mix-blend-mode 프로퍼티입니다. 포토샵의 혼합모드랑..

✨사진에 다양한 필터 적용하기✨ 안녕하세요. 오늘은 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. 단색 음영 추가하기 ☑️ HTML ☑️ CSS img { box-shadow: offset-x offset-y blur-radius color; } img { box-shadow: 20px 20px 0 #efcfd6; } 📌 STEP 2. 줄무늬 음영 배치하기 가상요소 선택자 ::before을 활용하면 자연스럽고 재미있는 느낌을 주는 대각선 줄무늬를 디자인할 수 있어요. ☑️ HTML 이번에는 이미지 태그를 div ..