반응형 만들기8 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. Dark Mode를 만들어 보자(ft. classList.add) Dark Mode를 만들어 보자 웹사이트를 서핑하다보면, Dark Mode라는 것들이 눈에 많이 띕니다. 물론 브라우저나 VSCode 같은 IDE에도 Dark Mode가 존재합니다. Windows에도 다크 모드가 존재하죠. 다크 모드를 세팅해 놓으면 밋밋했던 화면보다, 뭔가 '어둠의 다크한' 느낌이 들면서 좀 더 프로페셔널한 느낌을 가져다주는 것도 사실입니다. 기분 탓인가? 사실 다크모드는 '에너지 절약' 차원에서 아이디어가 나온 것이겠죠? 아무래도 모니터는 RGB 광선을 모두 쏘아주어야 White Color(흰색)가 만들어지니까요. 검은 색은 RGB 광선을 쏘지 않는 상태이니 아무래도 전기 등의 에너지도 절약이 될 것입니다. 또한 밤 늦은 시간에, 화면이 너무 밝은 것도 눈이 불편하기도 하구요. 여러 .. 2023. 1. 25. Node.js + Express로 초간단 서버 만들기, 3분 컷 Node.js + Express로 초간단 서버 만들기 '서버'라는 말을 들으면 어떤 이미지를 떠 올리시나요? 대부분의 사람들은 아마도 이런 형태를 떠올릴 것이라 생각합니다. 뭔가 대단히 복잡한 기계장치로 보이고, 대단히 이해하기 어려운 장비처럼 보입니다. 그런데, Server라는 것은 생각보다 "간단"하다는 사실을 알고 계시나요? 서버가 별건가? 서버는 간단하게 서버는 Server입니다. 즉, 원래 뜻은 식당 등에서 서빙을 하는 사람을 지칭합니다. 삼겹살 2인분 갖다 달라면 갖다주는 분이 바로 'Server'인 것이죠. 한국에서는 '고깃집 알바생'이라고 봐야 할라나요? 컴퓨터 세계에서 말하는 서버의 개념도 비슷합니다. 사용자가 무엇인가를 '요청하면 요청한 걸 갖다주는 프로그램'입니다. 컴퓨터 서버 세계의.. 2023. 1. 8. 이전 1 2 다음 반응형
