탐구소년

안녕하세요 탐구소년입니다. 오늘은 HTML, CSS, JAVASCRIPT 공부를 갓 시작하신 분들이 도전해보시면 좋을 만한 프로젝트(?)를 하나 준비해봤습니다. 이름은 타이핑 게임으로 정해보았습니다. 프로젝트의 결과물은 다음과 같습니다. 페이지가 열리면 위와 같은 화면이 등장하고 여기에는 남은 시간, 영어 단어, 입력창 그리고 점수가 표시됩니다. 시간은 8초부터 시작을 하고, 남은 시간이 0초가 될 때까지 화면에 보이는 영어단어를 타이핑하는 게임입니다. 정확하게 타이핑을 마쳤을 때마다 스코어는 하나씩 올라가고, 영어단어는 새로운 것으로 교체되며 입력창은 리셋이 됩니다. 그리고 점수를 딸 때마다 시간은 소폭 증가하여 게임을 오래 지속할 수 있게 됩니다. 기본적으로 HTML과 CSS를 사용해서 형태를 구성했..

안녕하세요 탐구소년입니다. 오늘은 visual studio 2019 설치 절차를 준비했습니다. C언어 코드 작성 및 실행을 염두에 두고 환경을 설정해가며 설치한 과정이니 이를 참고해주세요. 먼저 설치 파일의 다운로드를 위해 다운로드 페이지에 방문하겠습니다. 페이지 링크는 다음과 같습니다. visualstudio.microsoft.com/ko/vs/ 페이지 들어가자마자 보이는 셀렉트 메뉴를 클릭하고, 가장 위에 있는 Community 2019를 선택합니다. 해당 버전은 무료이므로 교육 및 학습용으로 적합합니다. 설치 파일(Installer)의 준비가 진행될 동안 잠시 기다려주세요. 설치 파일이 준비되면 위와 같은 화면이 나타납니다. 화면에서는 visual studio 2019를 통해 개발 가능한 여러가지 ..

안녕하세요 탐구소년입니다. 오늘은 자바스크립트 코드를 작성해 텍스트를 복사하는 기능을 구현한 예제를 준비하였습니다. 예제 코드를 보관하기 위해 폴더 하나를 만들고, 거기에 index.html, index.css, 그리고 index.js 파일까지 총 세 개의 파일을 생성하였습니다. 그리고 다음은 각각의 파일에 작성된 코드입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 자바스크립트 텍스트 복사 내용 입력 복사 Colored by ColorScripter cs index.css 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 #container..

안녕하세요! 오늘은 개발도구 이클립스의 설치 절차에 대한 정리를 준비했습니다. 정확히는 자바 통합개발환경 설치를 진행하도록 할텐데요, 바로 시작해보도록 하겠습니다. 이클립스 설치를 위해서는 먼저 아래의 링크로 이동을 해주어야 합니다. https://www.eclipse.org/ 오른쪽 상단에 Download 버튼이 있는 게 보입니다. 이것을 클릭해줍니다. 그러면 페이지 이동이 이루어지고, 위와 같은 버튼이 상단에 나타납니다. 주황색 버튼을 클릭합니다. 그러면 설치파일의 다운로드가 시작되는데, 다운로드가 끝나면 곧장 설치파일을 실행시킵니다. 설치파일 실행중... 설치파일이 열리면 여러가지 항목 중 설치를 원하는 항목을 선택할 수 있는데, 이 중 가장 위에 있는 Eclipse IDE for Java deve..

안녕하세요! 이번 글에서는 윈도우 컴퓨터에서 자바 프로그래밍을 시작하기에 앞서 진행해주면 좋은 '자바 환경변수 설정'에 대해 정리해보도록 하겠습니다. 환경변수는 운영체제가 프로그램을 실행할 때 참고하는 데이터이고, 환경변수에 자바와 관련한 데이터를 설정하면 운영체제가 자바 프로그램을 실행하는 데 많은 도움이 됩니다. 자세한 내용이 궁금하신 분들은 조금만 찾아보시면 손쉽게 자료를 얻으실 수 있을 것이고요, 이번 글에서는 환경변수 설정에 대해서만 담백하게(?) 정리하도록 할게요! 환경변수 설정을 위해 제일 먼저, 제어판 > 시스템 및 보안 > 시스템 창을 열어보겠습니다. 여기에서 좌측 상단에 보이는 '고급 시스템 설정'을 선택해주시면 됩니다. 그러면 창이 하나 열리게 되는데 거기에서 '고급' 탭을 선택하시고..

안녕하세요! 오늘은 자바 프로그래밍의 첫걸음인 JDK 설치 절차에 대해 정리해보도록 하겠습니다. JDK의 설치를 위해서는 제일 먼저 아래의 링크로 이동을 해주셔야 합니다. https://www.oracle.com/kr/java/technologies/javase-downloads.html 클릭하면 이동합니다. 옛날에는 이렇지 않았던 것 같은데.. 인터페이스가 무척 깔끔하네요. 가운데에 있는 JDK Download가 보이시죠? 여기를 클릭해주시면 됩니다. 그러면 각 운영체제에 맞는 설치파일을 다운로드할 수 있는 페이지가 나타납니다. 저는 윈도우에서의 설치를 가정하고 있습니다. 테이블 내용 중 밑에서 두번째에 있는 Windows x64 Installer의 링크(?)를 클릭해주세요. 그러면 창이 하나 뜰 것입..

안녕하세요 탐구소년입니다. 오늘은 HTML의 태그를 사용할 때 항상(?) 등장하는 action 속성과 onsubmit 이벤트 핸들러의 차이에 대해서 정리해보겠습니다. 벌써 하나는 속성이고 하나는 이벤트 핸들러라는 차이를 말해버리고 말았는데, 아무튼 차이를 알아보도록 하겠습니다. action action은 다음과 같은 역할을 합니다. 'form 데이터를 처리할 프로그램의 URI를 지정한다.' URI(Uniform Resource Identifier)는 하나의 리소스를 가리키는 문자열입니다. URL(Uniform Resource Locator)도 URI의 일종이라고 할 수 있는데요, 따라서 action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면, 브라우저의 루트(route..

안녕하세요 탐구소년입니다. epub 전자책 코딩을 위한 HTML/CSS, 세번째 글입니다. 두번째 글을 쓴지 일주일쯤 지난 시점에 세번째 글을 작성하게 되었네요. 오늘은 전자책을 꾸미기 위해 사용하는 태그 몇 가지에 대해 정리를 해보려고 합니다. 긴말 않고, 바로 시작하겠습니다. 태그 : 텍스트 감싸기용 태그 태그는 태그 자체가 가진 기능은 아무 것도 없는 태그입니다. 그러나 특정 영역을 구분짓는 데 곧잘 사용되는 상당히 유용한 태그입니다. 위와 같은 코드에 태그를 사용해 특정 영역을 묶어보도록 하겠습니다. '정말정말' 부분을 묶어주었습니다. 그러나 이렇게만 한다고 해서 전자책의 모습이 달라지는 것은 아닙니다. 현 코드에서 전자책의 모습을 보겠습니다. 정말로 달라진 게 없죠? 그러나 태그에 특정 속성을 ..

들어가며 안녕하세요 탐구소년입니다. 최근 저는 '나만의 콘텐츠가 담긴 영상을 만들고, 그것을 유튜브에 업로드해보고 싶다'라는 생각을 정말로 많이 하고 있습니다. 블로그에 글을 올리는 것도 물론 저만의 콘텐츠이긴 하지만, 비디오 형식으로 만든 나만의 콘텐츠에는 또 그만의 매력이 존재할 거라는 생각에서입니다. 그래서 요즘에는 어떤 식으로 동영상을 만들면 좋을까 하는 고민을 많이 하고 있는데요. 열심히 조사해보고 고민한 끝에 현재는 동영상을 만드는 여러가지 방법 중 컴퓨터 화면을 녹화하는 방법에 관심을 가지고 연습해보고 있는 중입니다. 그러다 문득 제가 알아 본 방법을 블로그를 통해 공유하면 좋을 것 같다는 생각이 들어서 이렇게 포스팅을 해봅니다. 개요 제 컴퓨터는 애플(APPLE) 사의 맥북에어입니다. 운영..

안녕하세요 탐구소년입니다. 프로그램 코드 작성을 위한 여러가지 편리한 기능을 제공하는 소프트웨어, 코드 편집기를 알고 계시나요? 오늘은 여러 종류의 코드 편집기 중에서도 많은 이들의 사랑을 받고 있는 비주얼 스튜디오 코드(이하 VSCODE)의 다운로드 및 설치방법에 대해서 준비해봤습니다. VSCODE는 이름에서도 알 수 있듯 마이크로소프트사에서 만든 코드 편집기입니다. VSCODE는 다운로드는 아래의 링크에서 가능합니다. https://code.visualstudio.com/ 링크를 타고 들어가시면, 위와 같은 페이지가 펼쳐집니다. 위 이미지를 기준으로, 왼편의 가운데 쯤에 있는 파란색 'Download for Windows 버튼을 누르시면 설치가 시작됩니다. 당연히 윈도우를 사용하지 않으시는 경우 버튼..