탐구소년

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..

안녕하세요. 이번 포스팅에서는 정말 친숙하면서도 왠지 어색한 '그 존재', DOM에 대해서 소개해보려고 합니다. DOM을 친숙하면서도 어색한 존재라고 표현한 이유가 있습니다. 웹퍼블리싱이나 프론트엔드 코딩을 하는 사람들에게 DOM은 단어(약어이긴 하나) 자체만 봤을 땐 무척 친숙한 단어이지만, 누군가가 '도대체 그게 뭔데?'라고 물어보았을 때 'DOM이라는 건...!'하고 자신있게, 또 깔끔하게 답할 수 있는 경우가 그리 많지는 않은 것 같거든요. 머릿속에는 그게 뭔지, 어떤 개념인지에 대한 그림이 왠지 대충 그려지는 것 같은데, 막상 말로 표현하려니 어려운 느낌이랄까? 저역시 마찬가지고요 ㅎㅎ 그래서 이번 기회에 글로써 정리를 해두려고 하니, 필요하신 분들은 참고해보시면 좋을 것 같습니다. 내용 중 일..

소개 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..

안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 디지털 시계 구현하는 방법에 대해 정리해보도록 하겠습니다. 자바스크립트를 막 공부하기 시작한 초보자들에게 적합한 소규모 프로젝트 성격의 예제입니다. 목표 웹페이지에 위와 같은 모습의 단순한 시계를 표시할 것입니다. 처음 페이지가 열렸을 때는 페이지가 열린 시점의 시간이 표시되고 시계가 멈춰있습니다. 그러다 GO 버튼을 누르면 GO 버튼을 누른 시점에서부터 시간이 흐르기 시작합니다. 그러다 STOP 버튼을 누르면 다시 시계가 멈춥니다. 코드 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 디지털 시계 만들기 STOP GO 12 : 클래스가 clock인 div 요소가 실제 시계 역할을 ..

안녕하세요. 오늘은 웹문서에 바닐라 자바스크립트 코드를 추가하여 무한스크롤을 구현한 예를 기록해보려 합니다. 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식으로 구현한 코드입니다. 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..

안녕하세요! 곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 h1 태그를 만들고, 거기에 글자가 써지는 효과를 구현해 보았습니다. 좀 더 실감나는 효과를 만들기 위해 CSS로 간단한 애니메이션 효과도 적용해봤습니다. 코드는 index.html / style.css / script.js 세 파일로 구성되어 있습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 repl.it 웹문서에 필요한 기본적인 구조에 CSS파일(style.css)과 JS파일(script.js)을 추가해주었습니다. 표시되는 태그는 h1 하나 뿐인데, 이마저도 아무것도 쓰여있지 않습니다. 스크립트 및 스타일시트 적용을 위해 class를 "text"로 지정..

개요 안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 WOW.js의 사용법에 대해 정리해보려고 합니다. 다양한 종류의 애니메이션을 제공하는데다 사용법도 무척 간단해 개인적으로 강력 추천하는 라이브러리입니다. 그럼 바로 시작하도록 하겠습니다. 설치 WOW.js 의 메인 페이지로 이동합니다. 링크를 클릭 : wowjs.uk/ 그러면 위와 같은 페이지가 나타나는데, 여기에서 좌측 상단에 표시되는 메뉴 중 GITHUB 을 클릭합니다. 그러면 새 탭이 열리고 라이브러리를 다운로드할 수 있는 깃헙 저장소가 나타납니다. 깃헙 저장소 페이지를 보면 Code라고 적힌 초록색 버튼이 보이는데, 이를 클릭하면 박스가 하나 열립니다. 이 박스의 맨 아래에는 Download ZIP 이라는 메뉴가 있습니다. 이를 ..

안녕하세요! 오늘도 CSS 애니메이션 예제를 하나 만들어봤습니다. 이러한 효과를 어떻게 부르는지 정확히 알지 못해서 007효과라고 표현했는데, 구현한 효과는 다음과 같습니다. ...네! 펭귄군 캐릭터가 배경 이미지로 지정된 영역을 남색 영역이 덮고 있는 상태에서, 투명한 원이 왔다갔다 하면서 원에 해당되는 부분만 배경 이미지가 노출되게 만든 애니메이션 효과입니다. 영화 007 시리즈의 오프닝과 느낌이 비슷하여 '007 효과 애니메이션 구현하기'라 이름 붙여봤습니다(정확한 이름 아시는 분 알려주세요...). 여기에 필요한 프로그래밍 언어는 HTML과 CSS인데, 각 코드는 다음과 같이 구현하였습니다. 1 2 3 4 5 div 가 세 번 사용되었고, 각각의 class를 통해서 역할을 구분하였습니다. cont..