본문 바로가기
반응형

전체 글152

포토샵을 이용한 Animated GIF 만들기(ft. 움짤) 포토샵을 이용한 Animated GiF 만들기 옛날 옛적 고리적에 움직이는 GIF 파일이 처음 등장했을 때 무척 센세이셔널 했던 시절이 문득 생각이 났습니다. 현재에는 Animated GIF 파일이라는 말 보다는, '움짤'이라는 표현으로 더 익숙하게 사용하는 것 같습니다. Animated GIF 파일을 사용할 일이 거의 없긴 한데요, 아주 가끔씩은 만들어 사용할 일이 생기기도 해서, 이 참에 그 방법을 정리해놓아 두려고 합니다. 포토샵도 버전 v5.0 무렵부터 접했던 것 같긴 한데 기억은 가물가물합니다. 세월이 많이 지나는 동안 포토샵 인터페이스도 툴도 기능도 참 많이 바뀌어 온 상태라서, 오래간만에 만져볼라면 무척 헷갈리더라구요.   STEP 01 : File > Scripts > Load Files .. 2023. 1. 27.
컬러셋 결정에 자신이 없다면? coolors.co ! colorhunt.co ! color.hailpixel.com ! 디자이너가 아니라서 컬러셋 결정에 자신이 없다면? 웹개발을 하다보면, 프로그래밍 코딩 개발 뿐 만이 아니라 기획도 중요하고, 디자인도 중요하다는 것을 결국 느끼게 되어 있습니다. 그래서 수 많은 IT 기업들이 업무들을 분화해서 전문 담당인력을 두고 있는 것이기도 합니다. 저의 경우에도 IT 직무의 시작은 '기획'으로 시작했고, 결과적으로는 PM으로 자리 잡았지만 나의 직무와 근접해 있는 디자인 영역이나, 프론트엔드 개발(예전에는 HTML 퍼블리싱) 그리고 백엔드 개발에 이르기까지 어느 정도는 직무적인 특성을 이해하는 것이 업무적으로 필요합니다. 그래야 협업이 순조로울 수 있거든요. 1인 혼자서 기획/디자인/개발 업무를 모두 진행한다고 가정할 때 정말 다양한 어려움에 직면하기도 하는데요, 논리적인 흐름이 .. 2023. 1. 26.
Dark Mode를 만들어 보자(ft. classList.add) Dark Mode를 만들어 보자 웹사이트를 서핑하다보면, Dark Mode라는 것들이 눈에 많이 띕니다. 물론 브라우저나 VSCode 같은 IDE에도 Dark Mode가 존재합니다. Windows에도 다크 모드가 존재하죠. 다크 모드를 세팅해 놓으면 밋밋했던 화면보다, 뭔가 '어둠의 다크한' 느낌이 들면서 좀 더 프로페셔널한 느낌을 가져다주는 것도 사실입니다. 기분 탓인가? 사실 다크모드는 '에너지 절약' 차원에서 아이디어가 나온 것이겠죠? 아무래도 모니터는 RGB 광선을 모두 쏘아주어야 White Color(흰색)가 만들어지니까요. 검은 색은 RGB 광선을 쏘지 않는 상태이니 아무래도 전기 등의 에너지도 절약이 될 것입니다. 또한 밤 늦은 시간에, 화면이 너무 밝은 것도 눈이 불편하기도 하구요. 여러 .. 2023. 1. 25.
이메일 주소를 검사하는 정규식(RegExp) 및 웹개발 적용 이메일 주소를 검사하는 정규식 및 웹개발 웹 서비스에 회원 가입을 하려면, 대부분 이메일 주소를 기입하는 과정이 존재합니다. 그런데, 사용자가 문자열을 입력하게 되면, 실시간으로 감지를 하면서 이메일 형식이 올바른지 아닌지를 확인해주는 기능을 본 적이 있을 겁니다. 바로 이 기능에 대한 구현을 간단하게 기초적이고 원리적인 내용으로 살펴보려고 합니다. 그래서 지난 포스팅에서, 정규식에 대해서 기초적인 내용을 살펴봤던 것이기도 합니다. 아주 아주 쉬운 수준으로만 정리를 해두었으니, 본 과정을 진행하시려면 꼭 지난 내용을 확인해주세요. 정규식, 정규표현석, Regular Expression, RegExp 완전 기초 정리 정규식, 정규표현석, Regular Expression, RegExp 완전 기초 정리 정규.. 2023. 1. 24.
정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 정규표현식 또는 정규식으로 불리는 내용을 살짝 정리해보고 넘어가려고 합니다. 가뜩이나 프로그래밍 코드들도 외계어 같아 보일 수도 있는데, 정규표현식은 더더욱 외계인 기호처럼 보일 수도 있겠습니다. 정규표현식은 C, Java, Python, Javascript 등의 프로그래밍 언어와는 다른 것이라고도 볼 수 있습니다. 주로 을 검사하는 경우에 사용하는 예를 자주 만날 수 있습니다. 웹 문서에서는 입력받은 '이메일 주소'가 유효한 패턴인지, 혹은 입력받은 '패스워드'가 최소한 8자 이상이며 특수문자를 최소 1개 이상 포함하고 있는 지 등을 검증해낼 때 필수적으로 사용됩니다. 따라서, 정규표현식은 어떤 프로그래밍 언어를 다루.. 2023. 1. 23.
알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important inline styles 그리고 !important CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다. 가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠. 그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표.. 2023. 1. 22.
반응형