탐구소년

개요 폰트어썸(fontawesome)은 개발자, 디자이너, 기획자를 위한 유/무료 아이콘을 제공하는 라이브러리입니다. 사용법이 어렵지는 않으나, 자신의 웹사이트에 외부 리소스를 추가해 본 경험이 없는 초보자들에게는 다소 낯설게 느껴질 수 있는 접근 방식(?)을 요구하기 때문에 그에 대한 내용을 정리해보았습니다. 폰트어썸을 사용해 본 경험이 전혀 없는 사람을 대상으로 설명합니다. 폰트어썸에는 유료 아이콘도 많이 있지만, 여기에서는 무료 아이콘 사용에 대해서만 이야기합니다. 폰트어썸 홈으로 : https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icon..

이전에 블로그에 네트리파이 사용법을 안내하는 글을 게시한 적이 있는데, 오랜만에 네트리파이에 접속해 보니 홈페이지가 리뉴얼되어 있었습니다. 이에 발맞춰 네트리파이 사용법에 대한 안내글도 리뉴얼하는 게 좋겠다고 판단해 이 글을 씁니다. 누군가에게는 도움이 되길 바라는 마음을 담아서... 네트리파이(netlify)? 네트리파이는 웹 호스팅 서비스입니다. 웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것으로, 이러한 서비스를 제공하는 웹 사이트는 무척 많습니다. 그 중에서도 네트리파이는 사용법이 무척 간단하고, 일정 수준의 용량까지는 무료로 이용할 수 있어 초보자들에게도 부담없는 서비스입니다. 네트리파이 서비스 이용 방법 네트리파이를 이용해 내가 만든 웹사이트를 호스팅하여 다른 사람들에게 배포..

심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...? 마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 div.pointer 요소가 새로 생기고, 기존의 div.pointer 요소는 제거되는 방식으로 동작합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45..

Sass 설치하기 Sass 구문을 기반으로 작성된 코드는 Sass 전처리기와 컴파일러의 도움을 받아 CSS 파일로 빌드(build)됩니다. 따라서 우리의 개발 환경(PC)에는 Sass가 준비되어 있어야 하며, 여기에서는 이를 위한 방법 두 가지를 제안합니다. - Visual Studio Code 확장 기능 Live Sass Compiler 설치하기 (Visual Studio Code 설치 필수) - Sass 명령행 인터페이스 설치하기 (Node.js 설치 필수) 두 가지 방법 모두를 차례대로 설명할 것이지만, 둘 중 아무거나 한 가지만 진행 하셔도 됩니다. 앞으로 이 포스팅에서는 두 번째 방법을 기반으로 설명을 이어갈 예정입니다. Visual Studio Code 확장 기능 Live Sass Compil..

" Sass 는 기능이 뛰어나고 안정적인 CSS 확장 언어이다." - Sass team - Sass란 Sass에 대해 얘기하기에 앞서, CSS에 대한 이야기를 먼저 해야 할 것 같습니다. CSS는 그 자체로도 충분히 재미있고, 훌륭한 형식 언어입니다. CSS는 웹 콘텐츠를 위한 스타일시트 형식 언어로써 (대체 언어가 사실상 존재하지 않는다는 사실이 한 몫 했겠지만)오랜 기간 사랑 받아 왔고, 아마 앞으로도 오래도록 사랑 받을 것입니다. 그러나 CSS를 조금이라도 다뤄 본 경험이 있는 개발자라면, 특유의 치명적 단점에 대해 아주 잘 알고 있을 것입니다. 예상하고 계실 테지만, CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 ..

안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. HTML, CSS, JavaScript 순서로 하나씩 코드를 살펴보겠습니다. 코드가 무척 간단하므로 이해하기 어렵지 않으실 것 같지만, DOM에 대한 이해가 부족하신 분들에게는 다소 어렵게 느껴지실 수 있습니다(직접 해보지 않고 코드만 읽어 볼 경우에도 어렵게 느껴집니다, 꼭 직접 해보세요!). 해당 코드에 대한 설명은 제 유튜브에서 동영상으로도 만나보실 수 있으니 참고해주세요. 감사합니다. => https://youtu.be/r3G0U5fva1c HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 HTML 문서 1번2번3번 1 2 3 0..

소개 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN). 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있습니다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없습니다. 사용법 linear-gradient() 함수 사용법은 다음과 같습니다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달합니다. 이는 선택사항이나, 지정하지 않을 경우 'to ..

안녕하세요. 이번 포스팅에서는 웹브라우저 환경에서 자바스크립트 코드를 작성할 때 써먹을 수 있는 유용한 메소드, setInterval과 clearInterval에 대해서 간단히 정리해보도록 하겠습니다. setInterval setInterval 메소드는 일정한 시간 간격마다 함수를 반복 실행할 수 있도록 해주는 타이머 메소드입니다. 사용 방법은 아래와 같습니다. 1 setInterval(반복_실행할_함수, 반복_주기_ms_단위로); 보이는 바와 같이 메소드의 첫 번째 인자로는 반복 실행하고자 하는 함수를, 두 번째 인자로는 반복 실행할 주기를 정수 값으로 전달해주면 됩니다. 이 때 주기는 미리세컨즈(ms) 단위입니다. 다음은 실제 사용 예입니다. 1 2 3 setInterval(function(){ co..

안녕하세요. 오늘은 웹문서에 바닐라 자바스크립트 코드를 추가하여 무한스크롤을 구현한 예를 기록해보려 합니다. 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식으로 구현한 코드입니다. HTML, CSS, 자바스크립트 코드를 차례대로 살펴보고, 마지막에 전체 코드를 공개하였습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 무한스크롤 1번째 블록 2번째 블록 section 태그에는 두 개의 div 가 포함되어 있는데, 각각에는 class="box"가 추가되었습니다. 이 box 요소가 무한하게 추가될 요소입니다. 스크롤을 내리면 내릴수록 section의 하위 태그 개수가 증가할 예정입니다. CSS 1 2 3 4 5 6 7 8 html..

안녕하세요! 오늘은 라이브러리 없이 적은 양의 자바스크립트 코드만으로 간단한 이미지 슬라이더를 구현해보았습니다. 이미지 슬라이더 구현하는 방법이야 한트럭이지만, 그 중에 한 가지 방법으로써 '이렇게도 하는구나~'하는정도로 참고해주시면 감사하겠습니다. 그럼 HTML, CSS, JS 순으로 코드를 보겠습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Simple Slider SIMPLE SLIDER PREV NEXT 제목을 나타내는 h1 태그와 이미지 네 장을 품고 있는 div 태그들, 그리고 button 태그 두 개를 작성해주었습니다. 스타일시트는 styles.css 파일을, 자바스크립트 코드는 script.j..