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

백준 11729 - 하노이 탑 이동 순서

11729번: 하노이 탑 이동 순서 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 www.acmicpc.net 서론 재귀 함수의 기초적인 예제들을 다룰 때 하노이 탑 문제는 자주 등장합니다. 본문에서는 이 하노이탑 문제를 통해 재귀 함수를 이해해보도록 합시다. 문제 파악 하노이 탑이 어떻게 동작하는지에 대한 이해만 있다면 문제 자체는 어렵지 않을 수도 있습니다. 다만, 하노이 탑을 해결하는 문제가 어렵기 때문에 다소 복잡한 부분이 있습니다. 첫 번째 탑에 있는 원반 개수 N을 입력받는다. 세 번째 탑으로 원반을 옮기는 최소 횟수를 출력한다. 세 번째 탑으로 원..

2022.06.03

컴퓨터/문제풀이집

Commnet

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

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

2022.06.02

컴퓨터/Javascript

Commnet

백준 17478 - 재귀함수가 뭔가요? (C언어 구현)

17478번: 재귀함수가 뭔가요? 평소에 질문을 잘 받아주기로 유명한 중앙대학교의 JH 교수님은 학생들로부터 재귀함수가 무엇인지에 대하여 많은 질문을 받아왔다. 매번 질문을 잘 받아주셨던 JH 교수님이지만 그는 중앙대 www.acmicpc.net 서론 백준 단계별로 풀어보기에 재귀 영역에 있는 문제입니다. 재귀 함수를 통한 해결법을 제시하기를 바라는 문제입니다. 문제 파악 입력 N이 주어진다(N번 제출력) N은 1 이상 50 이하의 값이다. 입력에 따른 반복적인 출력을 한다. 출력 부분은 크게 3가지 부분으로 나눌 수 있다. "어느 한 컴퓨터공학과 학생이 유명한 교수님을 찾아가 물었다." - 첫 시작 부분 "재귀 함수가 뭔가요?"~그 선인에게 한 선비가 찾아와서 물었어." - 반복 부분 "재귀 함수는 자..

2022.05.31

컴퓨터/문제풀이집

Commnet

HTML & CSS - [CSS] Midia Query(미디어 쿼리 @media)

서론 반응형 웹이라는 말을 많이 들어보셨을 겁니다. 간단하게 반응형 웹이란 웹페이지를 보여주면 화면의 크기, 장비 등에 따라 웹페이지가 다르게 보이는 웹서비스들을 통칭하는 말입니다. 이미 다양한 웹 서비스에서 반응형 웹을 경험해 봤을 것입니다. 앞선 포스트들에서 웹페이지의 레이아웃을 제어하기 위한 여러 가지 요소, 속성, 사용방법 등을 배웠습니다. 이제 이 내용들을 가지고 반응형 웹을 만들려면 화면의 크기, 장비 등을 구분하여 다르게 제어하도록 CSS에서 명령해야 될 것입니다. CSS에서 이러한 것을 가능하게 해주는 것이 Midia Query(미디어 쿼리)입니다. 본문에서는 이 미디어 쿼리에 대해 알아보고 몇 가지 예제들을 살펴보도록 하겠습니다. @meida - 미디어 쿼리 사용하기 CSS에서 화면의 크..

2022.05.30

컴퓨터/HTML&CSS

Commnet

백준 2798 - 블랙잭

2798번: 블랙잭 첫째 줄에 카드의 개수 N(3 ≤ N ≤ 100)과 M(10 ≤ M ≤ 300,000)이 주어진다. 둘째 줄에는 카드에 쓰여 있는 수가 주어지며, 이 값은 100,000을 넘지 않는 양의 정수이다. 합이 M을 넘지 않는 카드 3장 www.acmicpc.net 서론 해당 문제는 브루트 포스 알고리즘(완전 탐색)을 이용하여 풀 수 있는 문제입니다. 백준 단계별 학습에서 나오는 가장 기본적인 브루트 포스 알고리즘 문제 중 하나입니다. 문제 파악 우선 해당 문제에 대한 내용을 정리해보도록 합시다. 카드의 개수 N개를 입력받는다. 원하는 카드의 합 M을 입력받는다. N개만큼의 카드의 번호를 각각 입력받는다. 카드(N)는 최소 3개 최대 100개만 존재할 수 있다. 각각의 카드 N은 0~100,..

2022.05.29

컴퓨터/문제풀이집

Commnet

HTML & CSS - [CSS] Boxmodel(박스모델 - 요소의 형태의 이해)

서론 지난 포스트들에서 웹 페이지의 레이아웃을 설정하기 위해서 요소의 크기나, 배치 방법에 관한 속성들을 배웠습니다. 직접 구현을 하는 과정에서 다양한 position 속성, size 속성들을 이용해도 원하지 않는 결과가 나오는 경험이 있을 것입니다. 본문에서는 요소의 형태가 어떻게 구성되어 있고 형태의 종류마다 특성을 살펴보면서 좀 더 효율적으로 웹 페이지의 레이아웃을 구성할 수 있는 능력을 키워보도록 합시다. Boxmodel(박스 모델) CSS에서 Element(요소) 또는 Tag(태그)를 하나의 박스의 형태로 관리합니다. 따라서 CSS에서 부르는 Boxmodel은 요소의 형태를 일컫는 말입니다. 그림처럼 모든 요소는 박스 형태로서 CSS에서 존재합니다. 이 요소의 박스단위를 어떻게 잘 제어하는가가 ..

2022.05.27

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS]position속성 (요소의 배치방법)

서론 지난 포스트에서 요소의 크기와 좌표를 제어하는 속성을 알아봤습니다. 원하는 위치에 요소들을 배치하기 위해서는 그것만으로는 한계가 있습니다. HTML에서 태그로 생성되는 요소들(Elements)을 어떻게 사용자에게 보여주는가는 매우 중요합니다. 본문에서는 이 요소들에서는 position속성이 존재합니다. 이 속성을 통해서 요소들을 원하는 방식으로 적절하게 배치할 수 있어야만 좋은 웹페이지를 구성할 수 있습니다. 본문에서는 position속성의 종류들을 이해하고 적용해 보도록 합시다. position 속성의 종류 CSS에서 position 속성은 요소를 어떤 방식으로 어떻게 위치시키는지 정할 수 있습니다. 우선 방식으로 종류를 구분하자면 다음과 같습니다. 종류 설명 static (기본 설정값) 순서대로..

2022.05.26

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] 요소의 크기와 위치 (width, height, left, top, right, bottom)

서론 HTML을 CSS를 통해 제어하고 디자인하는 데 있어 요소들의 위치와 크기는 중요합니다. 정렬하는 형태, 배치하는 방법, 특정 상황에서의 동작 등을 제어하고 디자인하기 전에 기본적인 위치와 크기를 어떻게 결정하고 사용할 수 있는지 알아보도록 하겠습니다. 요소의 크기 속성 - width 와 height HTML이 웹 브라우저에서 렌더링 되면 각각의 요소들은 width와 height속성을 가지게 됩니다. 각각의 요소마다 폭과 높이의 정보를 가지고 있다는 말입니다. 사용자는 이 width와 height속성의 값을 변경해서 요소의 크기를 결정할 수 있습니다. See the Pen Width & Height by Gon (@gon-91) on CodePen. 요소의 크기보다 내용물이 크다면? - overfl..

2022.05.25

컴퓨터/HTML&CSS

Commnet