Language

프론트를 만들 때 CSS는 진짜 오묘합니다. 사용자와의 인터랙티브한 요소를 만드는건 CSS를 이용하면 간단하게 해결할 수 있다비다. 웹사이트에서 버튼에 마우스 오버 시 인터랙티브 효과를 주면 사용자의 관심을 끌게 되고 클릭을 해야할거 같은 느낌이 든답니다. CSS를 이용해 버튼에 마우스를 올렸을 때 확대되는 효과를 만드는 방법에 대해 알아보겠습니다. 이 간단하지만 효과적인 기술은 웹사이트의 인터랙티비티를 향상시키는 데 큰 도움이 됩니다. 1. 기본 개념 아래의 절차대로 진행해보면 우리가 원하는 CSS를 이용한 마우스 오버시 확대 효과를 만들 수 있답니다. CSS hover 의사 클래스와 transform 속성을 사용하여 이 효과를 구현합니다. hover 상태는 사용자가 마우스를 요소 위에 올려놓았을 때 ..

웹 개발에서 URL의 쿼리스트링을 통해 사용자로부터 데이터를 전달받는 경우가 많습니다. 쿼리스트링은 URL 주소 뒤에 붙는 key-value 쌍의 집합으로, 각각의 정보는 '&' 기호로 구분됩니다. 예를 들어 https://devit.koreacreatorfesta.com?&query1=aaa&query2=ㅁㅁㅁ&query3=333와 같은 형태의 URL에서 query1, query2, query3 등의 값을 자바스크립트로 어떻게 추출할 수 있을까요? 본문에서는 URLSearchParams 객체를 이용한 쿼리스트링 값의 추출 방법에 대해 설명드리겠습니다. 1. URLSearchParams 객체란? URL의 쿼리스트링을 쉽게 다룰 수 있도록 설계된 웹 API입니다. location.search를 인자로 받아..

웹 페이지에서 특정 텍스트를 강조하려면 어떻게 해야 할까요? 종이에 글을 쓸 때 중요한 부분에 형광펜을 사용하여 강조하는 것처럼, 웹 페이지에서도 이와 같은 효과를 줄 수 있습니다. 이 글에서는 CSS를 사용하여 태그로 텍스트에 형광펜 효과를 주는 방법을 알아보겠습니다. 1. 기본 형광펜 효과 먼저, 텍스트에 기본적인 형광펜 효과를 주기 위한 CSS 코드를 살펴보겠습니다. highlight { background-color: yellow; padding: 3px 5px; border-radius: 3px; } 위의 스타일을 적용하면 텍스트에 노란색의 배경색이 생기며, 약간의 패딩과 둥근 모서리를 가진 형광펜 효과를 얻을 수 있습니다. 이것은 형광펜 효과를 가진 텍스트입니다. HTML 삽입 미리보기할 수 ..

Node.js에서 사용자로부터 입력 받은 문자열을 안전하게 HTML로 출력하기 위해서는 해당 문자열에서 특수 문자를 이스케이프 해야 합니다. 이는 XSS(크로스 사이트 스크립팅) 공격을 방지하기 위해 필요합니다. 1. 클라이언트 측에서의 처리 1.1. 특수문자 입력 허용 기본적으로 HTML의 input 요소는 특수문자를 포함한 모든 문자를 입력 받을 수 있습니다. 1.2. 입력 검증 JavaScript를 사용하여 사용자가 입력한 값에 대한 검증을 수행할 수 있습니다. 이때 특수문자가 있는지에 대한 정규식을 통해서 검색할 수 있습니다. 혹은 처럼 자바스크립트에서 이스케이프를 사용해서 특수문자를 변환해서 전송할 수 있습니다. 하지만, 클라이언트 측 검증만으로는 postman과 같은 툴로 강제로 데이터를 보내..