본문 바로가기
반응형

javascript36

Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자 carousel(캐러샐)은 '회전목마'라는 뜻입니다. 아마도 중학교 시절에 merry-go-round라는 단어로 배웠던 것 같습니다. 아무튼 웹사이트 상단 부분에서 비주얼 이미지를 크게 배치해서, 자동으로 슬라이드 되도록 만들어 놓는 것들을 '캐러샐'이라고 부릅니다. 캐러샐은 매우 많이 사용되는 UI이기도 한데요, 만드는 방법에 있어서는 까다로운 구석이 존재합니다. 왜냐하면, 정적인 HTML/CSS 물론이거니와 이를 동작하게 해주는 Javascript도 필요해지고, 게다가 화면 전환을 자연스럽게 연출하려면 CSS로 Animation을 적용해야 하기 때문입니다. 워드프레스의 경우, 상당한 수준의 캐러샐 라이브러리들은 별도의 유료상품으로 판매되기도 하니까요. 그만큼 홈페이지를 .. 2023. 1. 28.
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.
JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) JavaScript로 버튼을 다루는 방법 2가지 이전 포스팅에서 자바스크립트로 CSS의 display 속성을 조작하여 Modal 공지창을 띄워주는 방법을 알아보았습니다. Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 displa kincoding.com 공지창을 띄워주기 위해서는 엘리먼트를 클릭하는 행위가 필요했는데요, 이처럼 버튼을 클릭하는 방법에 있어서도 자바스크립트는 2가지의 다른 방식을 활용할 수가 있.. 2023. 1. 16.
반응형

티스토리툴바