![]()
블로그 글을 작성할 때 최적화 된 글을 작성하기 이해서는 최종작성한 글자수를 아는것도 중요합니다. 글자수는 콘텐츠의 집중도를 높이고, 블로그에 머무는 시간이 중요하기 때문이기도 하죠. 하지만 어디가서 글자수 세기를 해야 할지 모르겠습니다. 유료로 해야 하나? 무료웹사이트도구는 없을까? 그래서 이번 글에서는 html, css를 이용해서 뼈대를 잡고 자바스크립트로 실시간 글자 수 계산하는 계산기를 구현해보도록 하겠습니다. 1. 빼대잡기 - 기본 HTML 구조 HTML은 웹 페이지의 구조를 정의하는 데 사용됩니다. 우리가 구현할 기능을 위해 필요한 HTML 요소는 매우 간단합니다. 주요 요소로는 사용자가 텍스트를 입력할 수 있는 textarea와 글자 수를 표시할 div가 있습니다. 그리고 글자수는 공백포함한..
![]()
프론트를 만들 때 CSS는 진짜 오묘합니다. 사용자와의 인터랙티브한 요소를 만드는건 CSS를 이용하면 간단하게 해결할 수 있다비다. 웹사이트에서 버튼에 마우스 오버 시 인터랙티브 효과를 주면 사용자의 관심을 끌게 되고 클릭을 해야할거 같은 느낌이 든답니다. CSS를 이용해 버튼에 마우스를 올렸을 때 확대되는 효과를 만드는 방법에 대해 알아보겠습니다. 이 간단하지만 효과적인 기술은 웹사이트의 인터랙티비티를 향상시키는 데 큰 도움이 됩니다. 1. 기본 개념 아래의 절차대로 진행해보면 우리가 원하는 CSS를 이용한 마우스 오버시 확대 효과를 만들 수 있답니다. CSS hover 의사 클래스와 transform 속성을 사용하여 이 효과를 구현합니다. hover 상태는 사용자가 마우스를 요소 위에 올려놓았을 때 ..
