javascript79 자바스크립트 bootstrap5 아코디언 만들기 (accordion) 안녕하세요. 오늘은 자바스크립트 bootstrap5의 아코디언 기능 구현하는 방법을 포스팅하려고 합니다. 아코디언은 목록형 요소에 세부적인 내용을 포함시켜 접어두고 필요할 때 열어볼 수 있는 기능입니다. 아코디언 기능도 다른 기능들과 마찬가지로 활용도가 높기 때문에 예제를 보고 구현해 보는 것도 좋을 것 같습니다! 그럼 아코디언 기능은 어떤 식으로 구현이 되고 작동이 되는 것인지 예시 코드를 통해 확인해 보도록 하겠습니다. Accordion 아코디언 목록형 DOM 영역에서 세부적인 내용을 포함시켜 접어두고 필요한 경우에 열어볼 수 있는 기능 1. Accordion 기본 사용 예시 Accordion Item #1 안녕하세요. Accordion Item #1 Accordion Item #2 안녕하세요. Ac.. 2023. 2. 3. 자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스) 안녕하세요. 오늘은 자바스크립트에서 bootstrap5의 Offcanvas 기능을 구현해 보려고 합니다. 웹페이지를 이용하다 보면 사이드나 상단, 하단부에 표시되는 컴포넌트 기능입니다. 하나의 페이지에서 보일 정보도 많고 기능도 많다 보니까 간단하게 사이드에 기능을 숨겨놓고 페이지 이동 없이 간단하게 부가적인 기능들을 활용할 수 있습니다. bootstrap에서 제공되는 기능이며, 이름 또한 bootstrap에서 만들어서 그런지 이름이 생소하긴 하지만 사용하다 보면 또 익숙해지긴 합니다. :) 그러면 Offcanvas가 무엇인지 어떤 기능을 할 수 있는지 예제를 통해 하나씩 알아보도록 하겠습니다. Offcanvas 오프캔버스 웹페이지의 사이드 (좌측, 우측, 상단, 하단)에 표시되는 컴포넌트 부가적인 기능.. 2023. 2. 2. 자바스크립트 bootstrap 5 경고창 만들기 안녕하세요. 오늘은 자바스크립트에서 bootstrap 5의 경고창 컴포넌트 만드는 방법을 정리해 보려고 합니다. 자바스크립트의 기본 alert이 있지만 style이 기본 style이고, 자바스크립트의 내장 기능이기 때문에 변경하는 것이 어렵습니다. 그래서 bootstrap의 기능을 빌려 alert을 사용하면 style이 적용된 alert을 간단하게 활용하여 사용할 수 있습니다. 그럼 예제를 통해 하나씩 알아보도록 하겠습니다. Alert 경고창 bootstrap에서는 alert 경고창의 스타일 8가지를 지원하고 있습니다. 색상에 따라 나타내는 내용, 상황을 다르게 줄 수 있는 효과가 있습니다. 기본적으로 간단한 알림을 줄 때에는 파란색, 성공을 알릴 때에는 초록색, 실패를 알릴 때에는 붉은색 등 표시를 다.. 2023. 2. 1. 자바스크립트 split 문자열 자르는 방법과 활용 오늘은 자바스크립트의 기본 문법인 split에 대해서 정리해 보려고 한다. 자바스크립트가 아닌 다른 언어에서도 split의 개념과 기능은 거의 유사하기 때문에 자바스크립트를 통해서 기능을 숙지하고 익혀둔다면 다른 언어를 배울 때 많은 도움이 될 수 있다.split은 문자열을 특정 구분자를 기준으로 자른 후 배열로 반환하는 기능이다. 기능의 개념은 간단하지만 다양한 상황에서 활용도가 엄청 높은 기능이라고 볼 수 있다. split의 개념과 특징자바스크립트의 split() 함수는 문자열을 특정 구분자를 기준으로 분리하여 배열로 반환하는 기능이다. 주어진 문자열을 특정 문자열을 기준으로 나누어서 배열로 만들어 주는데, 만약 구분자가 없다면 문자열 전체가 하나의 요소로 포함된 배열이 반환된다.구분자spl.. 2023. 1. 31. Vue3 부모 컴포넌트와 자식 컴포넌트 데이터 주고 받기 안녕하세요. 오늘은 지난 포스팅에 이어서 컴포넌트 간의 데이터 주고받는 방법을 포스팅하려고 합니다. 지난번에는 부모 컴포넌트에서 자식 컴포넌트를 import 시켜 하나의 컴포넌트로 만드는 것을 정리하였고, 오늘은 이어서 부모, 자식 컴포넌트 간의 데이터를 주고받는 방법을 정리해 보려고 합니다. 연동만 시켰다고 실제 업무에 활용하기에는 서로 간의 데이터 연동이 없기 때문에 데이터까지 주고받는 방법을 정리해 두면 실제 업무에 많은 도움이 됩니다. 그럼 오늘도 예제 소스 코드와 함께 하나씩 정리해 보도록 하겠습니다! 1. emit & props 이해하기 소스 코드를 들어가기 전에 간단하게 소스 코드에 대한 프로세스를 그림으로 먼저 그렸습니다. 부모에서 자식으로 전달할 때에는 'props'를, 자식에서 부모로 .. 2023. 1. 31. 자바스크립트 isNaN 함수 기능 정리 안녕하세요. 오늘은 자바스크립트의 기본 기능 중 isNaN() 함수에 대해서 특징과 사용 방법을 포스팅하려고 합니다. 자바스크립트로 개발을 하다 보면 데이터 타입을 분류하여 필터링 처리하는 경우가 종종 있습니다. 숫자인지, 문자인지, 아니면 다른 타입의 데이터인지... 그중에서 오늘은 숫자를 판별하는 isNaN()을 정리해 보려고 합니다! 그럼 어떤 차이가 있는지 하나씩 보도록 하겠습니다. isNaN() - 입력한 값이 숫자인지 아닌지 판별하는 함수 - NaN은 Not a Number 약어 - 함수 앞에 is가 붙으면 반환값은 true 또는 false - 반환값이 true인 경우는 입력한 값이 숫자가 아닐때 - 반환값이 false인 경우는 입력한 값이 숫자일 때 1. 숫자로 판별하는 경우 isNaN(''.. 2023. 1. 30. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음
