본문 바로가기
반응형

javascript37

SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 최근 ChatGPT 등의 AI에 관심이 많아져서 그런가, 왠지 반복적으로 하는 일들을 줄여볼 수 없을까? 하는 고민을 부쩍 많이 하게 된 것 같습니다. 매일 한 개 정도씩 블로그 포스팅을 하다보니 은근 반복되는 작업이 많습니다. 가장 반복하기 싫은 일은 검색엔진이 잘 읽어낼 수 있도록 첨부된 이미지의 alt 속성값을 넣어주는 일인 것 같습니다. 하기 싫지만, 검색최적화를 위한다면 반드시 해주기를 권장하는 단순반복업무. 게다가 SEO(Seacrh Engine Optimization: 검색엔진 최적화)를 맞추려면, alt 태그에 들어가는 글자들을 공백 대신에 하이픈(-)으로 이어주는 게 좋다고들 그러더라구요.(저는 잘 모르는 영역이라, 카.. 2023. 2. 2.
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.
반응형

티스토리툴바