본문 바로가기

Javascript

흐르는 주가 전광판 스타일의 무한 롤링 배너 만들기

0 2022. 1. 28. 고정된 크기를 가지는 이미지들을 전환하는 이미지 슬라이드 배너를 제외하고, 많은 웹사이트에서 가장 사용하는 배너 방식이 텍스트 롤링 배너입니다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너입니다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있습니다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 됩니다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 훨씬 더 쉽습니다. 무한 롤링 배너 종류중 많은 아이템을 무한 회전시키는 주가 전광판 스타일의 배너를 제작해 보겠습니다. 내용 끝부분에 완성된 소스의..

다크모드 토글 기능 구현과 다크모드 토글 디자인 구현

0 2022. 1. 22. 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 어떤 방법을 사용해도 무방합니다. CSS 클래스로 구현 다크모드 구현은 다크 모드용 컬러 CSS 클래스를 정의한 후 자바스크립트로 , 또는 태그에 다크 모드용 클래스를 추가하거나 삭제하는 방식으로 구현합니다. 다음 자바스크립트 코드는 'toggle" ID를 가진 요소를 클릭하면 '.dark-mode" 클래스를 태그에 추가하거나 삭제하는 간단한 이벤트 핸들러 입다. 구현하기에 따라서는 ".light-mode", ".dark-mode" 2개의 클래스로 적용하는 테마 컬러를 전환하는 클래스를 각각 구현할 수도 있습니다. d..

서버 없이 자바스크립트로 파일 생성해서 셀프 다운로드 하기

0 2022. 1. 20. 자바스크립트를 이용하면 별도의 웹서버 기능 없이도 파일을 생성해서 다운로드할 수 있습니다. 텍스트 기반인 파일은 종류에 상관없이 생성할 수 있습니다. HTML5 표준을 지원하는 웹 브라우저에서는 모두 지원되는 표준 기능이며, 하이퍼링크 태그()의 "href" 속성을 활용해서 구현합니다. "href" 속성은 하이퍼링크 태그를 통해 이동하는 URI를 표시하는 속성입니다. 대상 링크는 다른 HTML 문서일 수도 있고, 이미지나 사운드와 같은 리소스 파일이거나 텍스트 파일일 수도 있습니다. 그리고 하이퍼링크 태그에는 새로운 HTML5 속성이 하나 더 있습니다. 하이퍼링크 태그에 "download" 속성을 표시하면 하이퍼링크로 가리키는 연결된 페이지, 또는 리소스 파일을 웹 브라우저에서 열지 않고 파일로 다운로드..

HTML 컨텐츠에서 태그를 제거하고 텍스트만 남기기

0 2021. 10. 29. HTML 내용에서 태그를 제거하고 텍스트 내용만 재 가공해서 사용할 때 사용할 수 있는 함수입니다. 태그를 제거하면 중간에 줄바꿈과 공백, 탭과 같은 불필요한 문자들이 여러 개 겹쳐져 남게 됩니다. 이런 문자들까지 제거해야 텍스트 데이터를 사용할 수 있는 상태가 됩니다. 태그 제거 str.replace(/

HTML 요소의 위치와 크기 정보를 얻기

0 2021. 10. 20. 자바스크립트 메서드 중 element.getBoundingClientRect() 메서드는 요소의 왼쪽 위 모서리 좌표와 오른쪽 아래 모서리 좌표 값을 가져오는 메서드입니다. 얻은 좌표값은 웹브라우저의 뷰포트 왼쪽 위 꼭짓점을 시작점(0, 0)으로 해서 계산된 값입니다. 아래 그림을 보면 이해가 조금 더 쉽습니다. 뷰포트 기준점을 기준으로 하는 상대 위치가 되기 때문에 화면이 스크롤되면 얻는 좌표값도 변합니다. 좌표를 얻게을 때 왼쪽에 붙어 있는 요소가 0이 아닌 8px를 반환하기도 하는데 이것은 도큐먼트 루트(body 태그)의 기본 마진(margin)이 8px로 설정되어 있기 때문입니다. 도큐먼트 루트의 마진으로 인해 불필요한 8px가 더해지는 문제를 없애고 싶으면 다음처럼 body 태그의 마진 속성을 ..

스크린, 브라우저, 뷰포트 크기 값을 알아내는 방법

0 2021. 10. 14. 웹브라우저의 DOM(Document Object Model) 정보에는 웹 브라우저 안에 표시되는 컨텐츠에 대한 다양한 크기 정보 외에도 다양한 크기에 대한 환경정보가 들어있습니다. 정보들 중에는 웹브라우저 자신의 크기와 데스크탑 풀 스크린 화면에 대한 것들도 있습니다. 필요에 따라 풀스크린으로풀 스크린으로 동작해야 하는 웹앱과 같은 서비스는 풀 스크린으로 실행되기 위해서 필요한 각종 정보가 있습니다. 이런 경우를 위해 window 객체에는 데스크탑 풀 스크린 화면 크기, 웹브라우저 크기에 대한 정보를 담고 있습니다. 이 정보들은 자바스크립트를 통해 접근할 수 있으며, 표준 속성 값이기 때문에 웹브라우저별 호환성에 대한 걱정 없이 접근해서 사용할 수 있습니다. 다음 그림을 보면 쉽게 이해가 될 것입니다. ..

웹페이지 이미지 지연 로딩(레이지 로딩-Lazy loading) 구현하기

0 2021. 10. 6. 지연 로딩의 개념 지연 로딩은 웹 브라우저의 뷰포트 바깥에 위치한 웹 페이지의 대상 컨텐츠가 웹 페이지 로딩이 완료된 후 스크롤 등의 동작에 의해 뷰포트 안으로 들어오면, 그때 웹 서버에서 해당 컨텐츠를 가져와 표시를 하는 기능을 말합니다. 웹 페이지를 구성하는 컨텐츠 중에서 개별적인 URI에서 따로 가져오는 리소스를 가진 요소는 지연 로딩을 이용해 불필요한 트래픽을 줄이고, 더 빠른 페이지 로딩을 완료할 수 있습니다. 예를 들어 웹 페이지에 크기가 큰 이미지 파일이 여러 개 있는 경우 이 이미지들을 모두 다운로드해서 웹페이지에 표시할 때까지 웹페이지는 로딩 중 상태가 되고 완료 시점까지 사용자와의 인터렉션이 제한되게 됩니다. 특히 속도가 느린 모바일 인터넷 환경에서는 꽤 오랜 시간을 기다리게 될 수도 ..

자바스크립트 날짜 포맷과 변환 총정리

0 2021. 10. 5. 대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있습니다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 합니다. 그리서 간단한 것은 날짜 포맷 함수를 직접 만들어 쓰기도 하고, 널리 알려진 날짜 포매팅 라이브러리의 도움을 받기도 합니다. 자바스크립트로 날짜 포매팅을 하는 방법은 크게 3가지로 나눌 수 있습니다. 직접 날짜 포매팅 함수를 만들기 날짜 라이브러리 사용(Moment.js) Internationalization API 사용 세 번째 국제화 API는 많이 사용되지 않다보니 다소 생소할 수 있습니다. 최신 자바스크립트 코딩을..

자바스크립트 배열 요소의 중복 체크

0 2021. 10. 2. 기본 데이터 타입 배열의 중복 체크 셋(Set)은 중복 없는 값들을 목록으로 유지하는 객체입니다. 맵(Map)에서 키만 있다고 생각하면 됩니다. 맵은 생성자 인자로 배열을 넣을 수 있습니다. 배열에 중복이 있으면 중복 요소들은 배제하고 셋(Set) 목록을 생성합니다. 셋(Set)은 요소의 개수를 size 속성에 가지고 있고, 배열은 length 속성에 가지고 있습니다. 속성이 다르므로 주의해야 합니다. size 보다 length는 항상 크거나 같습니다. 배열에 중복이 없으면 둘의 요소 개수는 같고, 그렇지 않으면 length가 항상 큽니다. size보다 length가 크면 중복이 있어서 배제된 배열 요소가 있다는 뜻이 됩니다. const arrDup = ['라이언', '어피치', '프로도', '콘', '..

자바스크립트 쿠키 저장 및 관리 총정리

0 2021. 10. 2. 쿠키는 웹 사이트 방문자의 개인화 정보를 클라이언트 브라우저 저장하는 단순하면서도 효율적인 수단입니다. 인터넷 환경 변화에 따라 쿠키의 비중은 점차 낮아지고 있지만, 여전히 방문자의 정보를 파악하고, 임시 데이터를 보관해두는 중요한 수단입니다. 클라이언트, 또는 웹 브라우저는 DOM 객체에 쿠키 정보를 담고 있는 쿠키 속성을 제공합니다. "document.cookie" 속성은 DOM에 담고 있는 쿠키 문자열이며, 이 정보를 읽어서 쿠키 값을 가져오거나, 반대로 쿠키 값을 저장할 수 있습니다. 객체가 아니고 메서드도 제공되지 않기 때문에 쿠키 문자열을 읽어서 파싱 하고 쿠키 정보를 구분하는 것은 어디까지나 자바스크립트의 몫입니다. 쿠키 기본 알기 - 쿠키 문자열 구조 기본 쿠키 문자열은 다음과 같이 구성됩..

자바스크립트 배열의 중복을 제거하는 방법 총정리

0 2021. 10. 1. 배열 요소에 중복이 있으면 안 되는 경우, 자바스크립트는 중복이 있는지를 확인해서 제거할 수 있는 여러 가지 방법을 제공합니다. 각각의 방법이 장단점이 있기 때문에 경우에 따라 적당한 중복 제거 방법을 사용하는 것이 좋습니다. 필터(Filter)로 배열 중복 제거 배열의 내장 메서드인 filter()를 이용해서 조건에 맞는 요소만을 반환받는 방식으로 중복 없는 배열을 만들 수 있습니다. 필터 메서드는 배열 요소의 선택 조건을 직접 정할 수 있기 때문에 중복 제거가 아니어도 다양한 조건에 맞는 배열을 얻을 수 있는 장점이 있습니다. const arrDup = ['라이언', '어피치', '프로도', '콘', '라이언', '프로도']; const arrUnique = arrDup.filter((val, idx..

자바스크립트 에러 처리(Error Handling) 총정리

0 2021. 10. 1. 자바스크립트에도 다른 언어들에 준하는 런타임 예외 처리 구문이 있습니다. 짧은 코드를 작성할 때는 이런 런타임 에러들이 큰 문제가 안되기도 하고, 쉽게 해결할 수 있습니다. 자바스크립트 코드가 길어지고 로직이 복잡해지면서 파일이나 네트워크 연결을 제어하는 수준이 되면 무수히 많은 에러와 예외 상황이 개발자를 괴롭히게 됩니다. 자바스크립트 에러 핸들링은 이런 예외, 또는 에러 상황을 매끄럽고 부드럽게 처리를 할 수 있도록 해줍니다. 의미를 알기 힘든 알 수 없는 기술 용어로 범벅된 에러 메시지보다는 코드를 작성한 개발자가 이해하고 구분할 수 있는 메시지가 훨씬 더 도움이 될 수 있습니다. 에러 처리에 사용하는 핸들링 키워드는 try, catch, finally, throw 4개입니다. 그밖에 에러 객체 몇..

이전 1 2 3 4 ··· 12 다음

닫기

티스토리툴바