Javascript - 슬라이드 구현 종합 (버튼,무한,자동,드래그,멈춤)

서론 캐러셀(Carousel) 또는 슬라이더(Slider)등으로 불리고 있는 다양한 웹 서비스에서 볼 수 있는 콘텐츠이다. 본문에서는 "캐러셀"보다는 "슬라이드"라는 표현을 많이 사용하도록 하겠습니다. 웹 콘텐츠로 제공되는 이 슬라이드기능은 서비스 제공자에 의도에 따라 다양한 기능들이 존재합니다. 페이지네이션이 존재하는 슬라이더 좌측 우측 버튼이 존재하는 슬라이더 스와이프(드래그)로 움직이는 슬라이더 마지막 페이지가 끝나면 첫 번째 페이지로 이동하는 슬라이더 자동으로 무한 반복되는 슬라이더 자동으로 반복되지만, 마우스 커서가 올라오면 멈추는 슬라이더 이런 기능들이 있으며, 추가로 다양한 애니메이션 효과를 집어넣을 수 있습니다. 본문에서는 직접 순수 Javascript를 이용해 기능들을 구현해 보도록 하겠..

2023.06.07

컴퓨터/Javascript

Commnet

Javascript - HTML에 Javascript삽입하기 (총 정리)

서론 Javascript 언어를 사용하는 주된 목적 중 하나는, 품질 좋은 웹 서비스를 만들고 제공하기 위해서입니다. 즉, html에서 javascript언어로 만든 코드를 실행시킬 수 있어야 합니다. 다양한 방법으로 html에서 javascript를 실행시키는 방법을 알아보도록 합시다. 어떤 방법이 존재하는가? 대표적으로 Javascript를 html문서에 삽입하는 방법이 존재합니다. 직접 javascript코드 삽입하기 외부 javacript코드(파일) 삽입하기 보통 첫 번째의 경우 간단한 스크립트 거나, 해당 html문서에만 적용하는 경우 자주 사용합니다. 간단하나, 관리측면에서는 불편한 부분이 있습니다. 두 번째의 경우 하나의 파일 형태로 보관하여 개별적인 작업이나 유지보수에 용의 할 수 있습니다..

2022.06.25

컴퓨터/Javascript

Commnet

Javascript - typeof 연산 ( 변수의 원형 파악하기)

서론 C나 Java 등의 언어에서는 자료형과 함께 변수를 선언합니다. 하지만 Javascript에서는 동적인 할당으로 인해서 특정 변수의 자료형을 확인하기가 쉽지 않습니다. 또한 다양한 메서드나 함수들로 호출되는 결괏값 또한 어떤 자료형인지 파악하기가 힘든 경우가 있습니다. 이를 간단하게 typeof 연산을 통해서 알아볼 수 있습니다. Javascript에서도 다양한 자료형이 존재합니다. 변수를 선언할 때 자료형을 표시하지 않는 것뿐이지 Javascript에서도 자료형은 존재합니다. 본문에서는 자료형에 따른 자세한 내용은 설명하지 않지만, 어떤 것들이 있는지 먼저 살펴봅시다. 자료형 Undefined Null Boolean Number BigInt String Symbol Object Function O..

2022.06.09

컴퓨터/Javascript

Commnet

Javascript - 요소의 추가 및 제거 하기 (+ 복사)

서론 Javascript로 요소를 추가하고 제거하는 것은 동적인 웹페이지를 만들기 위한 기본적인 요소중 하나입니다. 본문에서는 이 방법을 알아보도록 합시다. 요소를 생성하자 - document.createElement 우선 특정 위치에 새로운 요소를 추가하고 싶다면, 요소를 먼저 만들어주어야 합니다. 요소를 만들어주기 위해서는 document객체에 createElement 메서드 호출하여 만들 수 있습니다. const newel = document.createElement('h1'); 새로운 Element 객체를 반환하며, 만약 tagName이 존재하지 않는 다면 HTMLUnknownElement객체를 반환합니다. 요소의 위치를 정해주자 1 - Node.appendChild() 새로운 요소를 만들어 주었..

2022.06.09

컴퓨터/Javascript

Commnet

Javascript - onscroll(스크롤 이벤트 / 예제 - 스크롤 위치 찾기)

서론 Javascript를 이용하면 동적인 웹페이지를 효과적으로 만들 수 있습니다. 그중 웹페이지 또는 어떤 스크롤을 할 수 있는 객체에서 스크롤을 하면 ~동작을 하는 기능 등을 말이죠. 가령 블로그나 아티클들을 제공하는 웹페이지를 보면 TOC(Table of contents)라는 자동 목차 생성 및 추적이 가능한 편의 기능을 볼 수 있습니다. 이런 기능들이 바로 스크롤이 동작하는 과정을 처리하기 때문입니다. 본문에서는 스크롤이 동작하는 과정을 Javascript에서 어떻게 처리할 수 있는지 알아보고 지난 포스트들에서 배웠던 내용들을 가지고 특정 본문이 있는 웹 문서의 스크롤 위치를 추적하는 예제를 하나 만들어 보도록 하겠습니다. Object.oncroll 각각의 객체에는 onscroll 이벤트 메서드를..

2022.06.08

컴퓨터/Javascript

Commnet

Javascript - 요소 선택하기 2 (Element, HTMLCollection, NodeList)

서론 지난 포스트에서 요소를 선택하는 방법을 알아봤습니다. 다양한 방법으로 요소들을 선택할 수 있고 각각의 방법마다 Element, HTMLCollection, NodeList의 형태로 반환을 하고 있습니다. 이 각각의 형태들마다 활용하는 방법에 차이가 존재합니다. 본문에서는 하나씩 살펴보면서 차이점과 사용방법에 대해서 알아보도록 하겠습니다. Element 객체 (단일 요소) 가장 기본적으로 DOM객체에서 요소를 받아오는 객체입니다. 대표적으로 아래와 같은 메서드를 통해서 Element객체를 받아옵니다. . getElementById('id') . querySelector('CSS query') 위의 메서드를 통해 알 수 있듯이 단일 요소들을 Element객체로 반환합니다. DOM(document)에서 ..

2022.06.07

컴퓨터/Javascript

Commnet

JavaScript - 요소 선택하기 (태그 선택하기)

서론 Javascript로 웹페이지를 다루기 위해서는 우선 원하는 요소(태그)를 정확하게 선택을 해야 됩니다. 그다음에 선택한 요소를 변경하거나 선택한 요소의 다음 부분에 새로운 요소를 생성하는 등의 일을 할 수 있습니다. Javascript에서는 다양한 방법으로 요소를 선택하고 접근할 수 있게 해 줍니다. 본문에서는 요소를 선택하는 다양한 방법에 대해서 알아보겠습니다. 본문에서는 순수 Javascript에 대해서만 설명하겠습니다. Javascript로 요소(태그)를 선택하는 방법 웹브라우저에서 생성된 웹페이지를 Javascript로 가지고 오면 document라는 이름의 DOM객체를 가지고 오게 됩니다. 이 document객체에는 실질적인 웹페이지의 요소들을 담고 있는 객체입니다. 이 안에서 다양한 메..

2022.06.02

컴퓨터/Javascript

Commnet

Javascript - 화면, 웹페이지, 요소의 위치

서론 Javascript로 웹 페이지를 다루다 보면 화면, 웹페이지, 요소들의 위치 값을 구해야 하는 경우가 많이 발생합니다. 본문에서 각각에 대한 위치정보를 어떻게 알아볼 수 있는지 확인해 봅시다. 화면의 폭과 높이 우선 화면 즉, 표시되는 출력장치의 폭과 높이를 알아보도록 하겠습니다. PC로 보고 있다면 보고 있는 여러분의 모니터가 됩니다. console.log(window.screen.height); // 화면의 높이 console.log(window.screen.width); // 화면의 폭 웹 브라우저의 폭과 높이 사용자들은 웹브라우저가 출력되는 화면은 자유롭게 조정할 수 있습니다. 전체 화면 모드를 사용하던가, 창을 최대화를 하거나 사용자 지정의 크기로 사용하는 등 말입니다. 심지어 스크롤바 ..

2022.05.17

컴퓨터/Javascript

Commnet

Javascript - document 와 window

서론 웹 브라우저는 Javascript에 객체의 형태로 BOM과 DOM을 제공해 주고 개발자는 이 객체를 이용해서 웹브라우저의 상태를 변화시킬 수 있습니다. 그렇다면 BOM과 DOM은 무엇일까? 그리고 Javascript에서 window와 document의 차이는 무엇일까? 본문에서는 웹브라우저에서 Javascript를 통해서 어떤 데이터들이 객체의 형태로 전달되는지 그 객체들을 이용해서 무엇을 할 수 있는지 알아보도록 합시다. BOM(Browser Object Model)? BOM은 웹 브라우저와 소통하기 위해 만들어진 객체모델입니다. 웹 브라우저의 창의 크기가 변경되거나, 스크롤이 움직이거나 이런 다양한 동작과 상태에 대한 정보를 표현하는 모델로서, 웹 브라우저에서 웹 페이지를 구동하기 위한 환경적 ..

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - Web과 Javascript(사용 셋팅하기)

서론 Web개발에서 Javascript는 필수적으로 공부가 필요한 항목 중 하나입니다. 사용자가 웹브라우저를 통해 특정 URL에 접근하면 서버로부터 데이터를 받아 DOM(Document Object Model)을 생성하고, 이 DOM을 기반으로 사용자에게 보여주기 위한 Web페이지를 랜더링 합니다. 다시 말하자면, DOM을 수정하거나 변경한다면, 사용자가 보이는 Web페이지를 변화시킬 수 있다는 말이 됩니다. 오늘날 거의 모든 웹브라우저들은 Javascript를 지원합니다. 그리고 Javascript언어를 사용한 웹브라우저에서 생성된 DOM을 접근하고 제어할 수 있는 API를 제공해줍니다. 물론 다른 언어들을 통해서 DOM에 접근하고 제어하는 것 또한 가능하지만, 웹브라우저에서 제공하는가 와는 엄청난 차..

2022.05.16

컴퓨터/Javascript

Commnet