본문 바로가기
반응형

분류 전체보기142

Carousel을 직접 만들어 보자 Part 2 - 성능 향상 하기 Carousel을 직접 만들어 보자 Part 2 이전 포스팅에서 부트스트랩을 이용하거나, 직접 바닐라 자바스트립트로 코딩을 해서 캐러셀을 만드는 방법을 알아보았습니다. Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자 carousel(캐러샐)은 '회전목마'라는 뜻입니다. 아마도 중학교 시절에 merry-go-round라는 단어로 배웠던 것 같습니다. 아무튼 웹사이트 상단 부분에서 비주얼 이미지를 크게 배치 kincoding.com 아마도 초보 딱지를 벗어난 분들은 나머지 기능에 대한 구현도 충분히 혼자 가능하겠지만, 우리집 아들 녀석들 같은 왕초짜들은 아마도 어려움을 .. 2023. 1. 29.
Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자 carousel(캐러샐)은 '회전목마'라는 뜻입니다. 아마도 중학교 시절에 merry-go-round라는 단어로 배웠던 것 같습니다. 아무튼 웹사이트 상단 부분에서 비주얼 이미지를 크게 배치해서, 자동으로 슬라이드 되도록 만들어 놓는 것들을 '캐러샐'이라고 부릅니다. 캐러샐은 매우 많이 사용되는 UI이기도 한데요, 만드는 방법에 있어서는 까다로운 구석이 존재합니다. 왜냐하면, 정적인 HTML/CSS 물론이거니와 이를 동작하게 해주는 Javascript도 필요해지고, 게다가 화면 전환을 자연스럽게 연출하려면 CSS로 Animation을 적용해야 하기 때문입니다. 워드프레스의 경우, 상당한 수준의 캐러샐 라이브러리들은 별도의 유료상품으로 판매되기도 하니까요. 그만큼 홈페이지를 .. 2023. 1. 28.
포토샵을 이용한 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.
반응형

티스토리툴바