본문 바로가기
반응형

Javascript50

JS function 문법 기초 정리 JS function 문법 기초 정리 코딩을 공부하다 보면, 반드시 등장하는 게 함수(function) 일 것입니다. 많은 분들이 이미 함수에 대해서는 잘 알고 있을 정도로 유명(?)하고 익숙한(?) 존재일 수 있겠는데요, 너무 가까운 사이이다 보니 제대로 정리를 하지 않고 넘어가서 개념이 제대로 잡히지 않은 경우를 종종 보는 경우가 있습니다. 아주 쉽고 편리한 함수 문법을 이번 포스팅에서 간단하게 정리해두면서 기초를 다져놓고 가보기로 합니다. function 기본 문법 1 - 긴코드 축약해서 사용할 수 있음 함수를 사용하는 이유는 여러 가지가 있겠지만, '긴 코드를 축약해서 사용할 수 있다'는 이점으로 인해 사용됩니다. 아래의 코드를 브라우저 console창에서 실행을 해보면 어떤 결과를 표시해줄까요?.. 2023. 2. 3.
SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기 최근 ChatGPT 등의 AI에 관심이 많아져서 그런가, 왠지 반복적으로 하는 일들을 줄여볼 수 없을까? 하는 고민을 부쩍 많이 하게 된 것 같습니다. 매일 한 개 정도씩 블로그 포스팅을 하다보니 은근 반복되는 작업이 많습니다. 가장 반복하기 싫은 일은 검색엔진이 잘 읽어낼 수 있도록 첨부된 이미지의 alt 속성값을 넣어주는 일인 것 같습니다. 하기 싫지만, 검색최적화를 위한다면 반드시 해주기를 권장하는 단순반복업무. 게다가 SEO(Seacrh Engine Optimization: 검색엔진 최적화)를 맞추려면, alt 태그에 들어가는 글자들을 공백 대신에 하이픈(-)으로 이어주는 게 좋다고들 그러더라구요.(저는 잘 모르는 영역이라, 카.. 2023. 2. 2.
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.
반응형

티스토리툴바