탐구소년

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

심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...? 마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 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..

이번 포스팅에서는 자바스크립트를 이용해 웹문서를 조작할 때 사용하는 메소드 중 append와 appendChild의 차이에 대해서 정리해보려고 합니다. 두 메소드 모두 어떤 요소에 자식 요소를 추가하기 원할 때 사용하는 메소드인데, 둘 사이에는 사소한 듯하면서도 중요한(?) 차이가 몇 가지 존재합니다. append vs appendChild 1. 대표적인 차이점은 두 메소드의 이름만으로 예측 가능한 차이입니다. append를 이용하면 요소에 노드 객체 또는 DOM문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있습니다. 2. 또 한 가지 차이점은, appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다는 점입니다. 이상입니다..

안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. 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..

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

이번 포스팅에서는 HTML 요소 공통 속성인 textContent와 innerText의 차이에 대해서 정리해보려고 합니다. 그놈이 그놈같아 늘 헷갈리지만, 그 차이에 대해 생각하려 하기 보다는 외면하고 넘어가는 경우가 많은 속성이 바로 이 두 속성인데, 사실 그 차이를 알아보려고 열심히 구글링을 해 보아도 시원하게 '이거다!'하고 차이를 알려주는 자료를 찾기가 쉽지 않은 것 같습니다(개인적인 생각이지만). 저 또한 마찬가지 였지만, 스택오버플로우를 뒤지다가 나름대로 시원한(정말?) 글을 보게 된 것 같아 반가운 마음에 정리를 해보게 되었습니다. 저 자신이 편하게 두고두고 볼 수 있도록 짧게 리스트업 하는 형식으로 정리해두려 합니다. 또한 새로운 사실을 알게 되면 계속적으로 업데이트하도록 하겠습니다. te..

HTML 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src 속성에 url을 지정하는 몇 가지 방법에 대해서 소개하도록 하겠습니다. img 태그의 src 속성에는 다음과 같은 유형의 url들을 지정할 수 있습니다. 1. 상대경로 2. 절대경로 3. 웹서버 주소 각각에 대해 알아보겠습니다. 상대경로 상대경로는 이미지를 표시할 HTML 문서의 위치를 기준으로 이미지 소스 파일의 위치를 인식하는 방식입니다. 상대경로를 지정하기 위해서는 다음의 기호들을 적절히 사용해주어야 합니다. / : ~에 있는 . : 이미지를 표시할 HTML 문서의 위치 .. : 상위 폴더 예를..

안녕하세요. 이번 포스팅에서는 윈도우에 기본적으로 탑재되어 있는 텍스트 에디터인 메모장(Notepad)을 이용해서 HTML 문서 만드는 방법을 소개해드리겠습니다. HTML은 웹사이트를 개발하기 위해 사용하는 언어이기 때문에 '코드를 작성하기 위해서 특별한 소프트웨어가 필요할 것 같다'라고 생각하시는 경우가 있는데, 사실 프로그램 코드란 한낱 텍스트에 불과하므로 키보드 타이핑만 가능하다면 어떤 소프트웨어를 사용해도 작성할 수 있습니다. 사람의 언어가 허공에 대고 읊조릴 때는 단순한 소리에 불과하지만 다른 사람에게 말할 때는 중요한 의사 소통 수단이 되는 것처럼, 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"로 지정..