탐구소년

안녕하세요. 이번 포스팅에서는 postion 속성 사용 시 상하좌우 오프셋을 지정하는 데 사용하는 top, bottom, left, right 속성에 대한 이야기를 살짝 해보겠습니다. position 은 요소의 배치 방법을 정의하는 속성입니다. relative, absolute 등의 속성값을 이용해 배치 방법을 결정하면, top bottom left right 속성값들이 오프셋을 정의하여 요소의 위치를 결정합니다. 가령 다음과 같이 코드를 작성하면 요소는 원래 있어야 할 곳보다 윗면(top)에서 100px 만큼, 왼쪽면(left)에서 200px 만큼 떨어져 다음과 같이 자리를 잡게 됩니다. 이 경우 left 속성이 왼쪽면에서 얼마만큼 떨어져야 할지를 정의해주고 있는 것인데, 만약 right와 left 위..

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

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

안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 스톱워치 구현하는 방법에 대해 정리해보도록 하겠습니다. 해당 코드에 대한 설명은 제 유튜브 채널에서 동영상으로도 만나보실 수 있으니 참고해주세요. => youtu.be/a01-IPc57Rk 목표 다음에 이미지와 같은 스톱워치를 웹페이지 상에서 구현하는 것이 목표입니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 스톱워치 스톱워치 00:00:00 START STOP RESET 12행 : container 는 스톱워치의 전체 영역을 표시합니다. 15행 : 분, 초, 미리초 단위의 숫자를 각각 span 태그로 묶어 분류해주었습니다. 17행 - 19행 : 각각의 버튼을..

안녕하세요. 이번 포스팅에서는 웹브라우저 환경에서 자바스크립트 코드를 작성할 때 써먹을 수 있는 유용한 메소드, 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 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src 속성에 url을 지정하는 몇 가지 방법에 대해서 소개하도록 하겠습니다. img 태그의 src 속성에는 다음과 같은 유형의 url들을 지정할 수 있습니다. 1. 상대경로 2. 절대경로 3. 웹서버 주소 각각에 대해 알아보겠습니다. 상대경로 상대경로는 이미지를 표시할 HTML 문서의 위치를 기준으로 이미지 소스 파일의 위치를 인식하는 방식입니다. 상대경로를 지정하기 위해서는 다음의 기호들을 적절히 사용해주어야 합니다. / : ~에 있는 . : 이미지를 표시할 HTML 문서의 위치 .. : 상위 폴더 예를..

안녕하세요! 이번 포스팅에서는 Visual Studio Code(이하 VSCODE)에서 리액트 앱을 개발할 때 무척 유용한 기능인 리액트 컴포넌트 기본 템플릿 자동완성 기능을 추가하는 방법에 대해 안내하도록 하겠습니다. VSCODE의 기존 사용자임을 가정하고 안내 진행하겠습니다^^ 시작 1. VSCODE 좌측 아이콘 메뉴 중 'Extensions'를 선택합니다. 확장기능을 설치하고자 할 때 선택하는 메뉴입니다. 여기에서 'reactjs code snippets' 라는 확장기능을 검색합니다. 2. Reactjs code snippets 를 찾으셨다면, 설치해주세요. 리액트JS snippet(토막글, 짧은 글)을 포함하는 확장 기능으로, 이를 이용하면 리액트 개발시 사용할 snippet을 커스터마이징할 수 ..

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

안녕하세요! 이번 포스팅에서는 웹 호스팅 서비스 netlify(네트리파이)를 이용해서 내가 만든 웹사이트를 배포하는 방법에 대해서 소개해보겠습니다. 시작하기에 앞서, 관련 내용에 대해서 글로 되어있는 포스팅을 보는 것보다 동영상을 통해 학습하기 원하시는 분들은 제 유튜브 동영상 링크를 미리 소개할테니 참고해 주세요. => youtu.be/hXuTQm1FVic 웹 호스팅이란? 웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것입니다. 내가 만든 웹사이트를 내 컴퓨터에 저장만 해 놓으면 나 말고는 아무도 볼 수 없습니다. 따라서 사람들에게 내 웹사이트를 공개하고 싶다면 웹 서버의 일부 공간을 할당받아 그곳에 내 웹사이트 자료를 올려놓고 사람들이 거기에 접근할 수 있게 해야 합니다. 이때 웹 서..