HTML/JavaScript/CSS 개발에 관련된 팁과 노하우를 최대한 쉽고, 지루하지 않게 공유합니다.
JavaScript 배열 메서드는 실무에서 정말 많이 사용하지만 기억력이 좋지 않은 저는 늘 AI의 도움을 받아서 사용하고 있습니다. AI가 활성화되기 전에도 능숙하게 사용하지 못하고, 구글링을 꼭 하고 나서 사용하곤 했었죠. 그래서 자주 사용하던 배열 메서드 문법도 조금 더 익숙해지고, 잘 몰랐던 배열 메서드도 알아보고, 실무에서 어떻게 더 효과적으로 사용할 수 있을지에 대해서 글을 작성해 보기로 했습니다….
HTML details summary로만 FAQ 아코디언 만들기가 가능하다고? FAQ 아코디언 만들기는 JavaScript와 CSS로 직접 구현해야 되는 줄로만 알았는데 HTML details summary 태그만 가지고도 만들 수 있다는 사실을 알게 되었습니다. 별도의 JavaScript 없이도 완벽한 아코디언 UI를 구현할 수 있어 개발 시간을 크게 단축할 수 있습니다. 하지만 실무에서는 JavaScript/CSS로 직접 구현한 경우가 더 많이 보입니다. 일단 HTML details…
HTML 코드를 보다 보면 상단에 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>와 같은 태그가 거의 무조건 있습니다. 보통 viewport 메타 태그라고 부릅니다. 저는 모바일에서도 잘 보이게 해주는 태그라고만 이해하고, 별다른 생각을 하지 않고 있었지만, viewport 메타 태그가 있을 때와 없을 때의 차이를 눈으로 직접 눈으로 확인해 보면 좋을 것 같아서 이 글을 작성하게 되었습니다. viewport란? 사용자의 눈에 실제로…
남들이 작성한 HTML 파일을 보다 보면 가끔 <select>, <input>, <textarea>와 같은 태그에 id와 name 속성이 같이 선언된 경우를 가끔 볼 수 있습니다. <form>태그 안쪽 이거나 라디오 버튼도 아닌데 name이 있어서 이런 의문이 들었습니다. ‘내가 모르는 HTML id name의 차이점이 더 있나? name이 뭔가 특별한 역할을 더 하나?’ HTML id name의 차이 id는 HTML 문서 전체에서…
JavaScript 호이스팅(Hoisting)이 뭔지 쉽고 간단하게 한 번 정리해 볼까 합니다. 사실 호이스팅을 잘 몰라도 대부분의 경우에는 큰 문제는 없다고 생각하지만 이걸 몰라서 낭패를 볼 수 있는 경우도 분명 있을 수 있습니다. 이 글의 목적은 단순한 개념 정리가 아니라 다음과 같은 실력과 내공을 갖추는 것입니다: JavaScript 호이스팅이란? JavaScript 코드가 실행되기 전에 변수와 함수 선언이 해당 스코프의…
Javascript로 현재 시간 실시간 표시하는 방법에 대해서 글을 써보려고 합니다. 사실 너무 쉬운 내용이고, 인터넷에도 관련 예제가 너무 많아서 매력적인 주제는 아닙니다. 그래도 아직 Javascript 실시간 시계를 직접 구현해 본 경험이 없어서 직접 한 번 만들어 보고, 그 과정과 후기를 남겨보겠습니다. 사실 웹페이지에서 굳이 시간을 볼 필요는 없기 때문에 실무에서는 잘 보이지 않지만, 그래도 가끔…
대부분의 프로젝트는 Javascript에서 기본적으로 제공해 주는 alert, confirm, prompt를 그대로 사용하지 않고, 커스터마이징 해서 사용하거나 라이브러리를 이용해서 어느 정도는 꾸며서 사용합니다. Javascript alert 창 꾸미기 라이브러리 중에는 SweetAlert2가 가장 널리 사용되고 있습니다. 사용법이나 설치 방법은 공식 사이트에 워낙 쉽게 잘 나와 있기 때문에 공식 사이트만 봐도 충분합니다. 저는 공식 사이트에는 없는 몇 가지 내용과 제…