웹 개발을 시작하면 가장 먼저 만나는 HTML. 혹시 웹 페이지의 모든 구조를 <div>와 <span>으로만 만들고 계신가요? 물론 그렇게 해도 화면은 그럴듯하게 보일 겁니다. 하지만 보이지 않는 곳에서 아주 중요한 것들을 놓치고 있을 수 있습니다. 바로 검색엔진 최적화(SEO), 웹 접근성, 그리고 코드의 가독성입니다. 이 세 마리 토끼를 한 번에 잡는 비법이 바로 HTML 시멘틱 태그(HTML Semantic…
워드프레스 개발 블로그 운영 후기를 쓰게 된 이유 워드프레스 개발 블로그 운영 후기를 쓰게 된 이유는 솔직히 말하면 아래에 언급되는 개발 블로그 단점 중에 하나인 “블로그 글 수를 늘리는 데 집중”이 주된 이유입니다. 공부는 하기 싫고 블로그 글 수는 늘리고 싶고 해서 넋두리하는 느낌으로 글 한 번 써보고 싶었습니다. 이 글은 2025-06-10 ~ 2025-09-06까지 약…
웹 개발자라면 누구나 한 번쯤 사용하는 기능이 바로 console.log입니다.간단한 출력 도구로만 쓰는 경우가 많지만, 실제로는 디버깅과 성능 최적화, 코드 품질 개선에 활용할 수 있는 강력한 도구입니다. 이번 글에서는 console.log 활용법을 단계별로 정리해 보겠습니다. codepen이나 jsfiddle에서 테스트 시 주의할 점 console.table이나 console.error, console.group, console.time 등 대부분의 console API 기능들이 codepen이나 jsfiddle에서는 제대로 동작하지 않습니다. 꼭 브라우저…
JavaScript 배열 메서드는 실무에서 정말 많이 사용하지만 기억력이 좋지 않은 저는 늘 AI의 도움을 받아서 사용하고 있습니다. AI가 활성화되기 전에도 능숙하게 사용하지 못하고, 구글링을 꼭 하고 나서 사용하곤 했었죠. 그래서 자주 사용하던 배열 메서드 문법도 조금 더 익숙해지고, 잘 몰랐던 배열 메서드도 알아보고, 실무에서 어떻게 더 효과적으로 사용할 수 있을지에 대해서 글을 작성해 보기로 했습니다….
Gemini 유튜브 요약 방법에 대해서 알아보겠습니다. AI로 유튜브 영상 url만 던져주면 요약이 가능하게 된 지가 오래되었지만 막상 제대로 사용해 본 적이 별로 없어서 이참에 한 번 제대로 사용해보고 방법과 결과물의 품질은 어느 정도 수준인지 글로 남겨보고자 합니다. 유튜브 영상 요약 AI 종류와 Gemini를 선택한 이유 요약 품질이나 부가 기능 같은 걸 자세하게 비교해 보지는 않았습니다….
HTML details summary로만 FAQ 아코디언 만들기가 가능하다고? FAQ 아코디언 만들기는 JavaScript와 CSS로 직접 구현해야 되는 줄로만 알았는데 HTML details summary 태그만 가지고도 만들 수 있다는 사실을 알게 되었습니다. 별도의 JavaScript 없이도 완벽한 아코디언 UI를 구현할 수 있어 개발 시간을 크게 단축할 수 있습니다. 하지만 실무에서는 JavaScript/CSS로 직접 구현한 경우가 더 많이 보입니다. 일단 HTML details…
SI SM 프리랜서 급여일은 보통 익월 5일, 익월 10일, 익월 15일, 익월 20일, 익월 25일, 익월 말일 중 하나입니다. 제가 자주 보는 개발자 커뮤니티 사이트인 OKKY나 IT 노조에서 흔히 볼 수 있는 조언 중 하나가 바로 “급여 일이 익월 15일 이후인 회사는 피해야 한다”라는 이야기입니다. 진짜 프리랜서 급여 지급일이 15일 이후면 피해야 하는 회사일까요?결론부터 말하면…
HTML 코드를 보다 보면 상단에 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>와 같은 태그가 거의 무조건 있습니다. 보통 viewport 메타 태그라고 부릅니다. 저는 모바일에서도 잘 보이게 해주는 태그라고만 이해하고, 별다른 생각을 하지 않고 있었지만, viewport 메타 태그가 있을 때와 없을 때의 차이를 눈으로 직접 눈으로 확인해 보면 좋을 것 같아서 이 글을 작성하게 되었습니다. viewport란? 사용자의 눈에 실제로…
워드프레스 사이트킷(SiteKit) 플러그인 속도 저하 문제가 발견되서 비활성화하게 되었습니다. PageSpeed Insights에서 사이트 속도를 측정해 보면 항상 모바일은 70점대, 데스크톱은 80점대였는데 사이트킷을 비활성화하니 바로 모바일 99점, 데스크톱 100점이 나오는 것이었습니다. 사실 사이트킷의 역할은 다른 방법들로 충분히 대체 가능하기 때문에 저는 사이트킷을 과감하게 지우기로 했습니다. 내가 의심했던 사이트 성능 저하 요인 1. 저렴한 카페24 호스팅 저는 카페24의…
남들이 작성한 HTML 파일을 보다 보면 가끔 <select>, <input>, <textarea>와 같은 태그에 id와 name 속성이 같이 선언된 경우를 가끔 볼 수 있습니다. <form>태그 안쪽 이거나 라디오 버튼도 아닌데 name이 있어서 이런 의문이 들었습니다. ‘내가 모르는 HTML id name의 차이점이 더 있나? name이 뭔가 특별한 역할을 더 하나?’ HTML id name의 차이 id는 HTML 문서 전체에서…