탐구소년

안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 1 00000 정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @keyframes typing{ from{ width: 0; } } @keyframes cursor{ 50%{ border-color: t..

안녕하세요 탐구소년입니다. HTML로 웹문서를 만들 때 태그를 사용하면 데이터를 입력할 수 있는 양식을 만들 수가 있습니다. 이 양식에 입력된 데이터를 사용자가 서버 프로그램으로 전달하게 되면, 해당 서버가 그것을 처리할 수 있습니다. 이번 포스팅에서는 사용자가 직접 서버의 역할까지 수행할 수 있도록, HTML 웹문서에 자바스크립트 코드를 추가하여 폼에 입력된 데이터를 처리해보도록 하겠습니다. 사용자가 폼을 통해 몇가지 데이터를 입력하고 제출을 하면, 제출된 데이터를 화면 상에 출력하는 흐름으로 코드를 작성해 볼 것입니다. 먼저, 다음과 같이 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 ..

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

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

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

안녕하세요 탐구소년입니다. 시길(sigil)을 사용해서 전자책 만들기! 의 일환으로 작성하는 'epub 전자책 코딩을 위한 HTML/CSS' 두번째 글입니다. 오늘은 텍스트를 표시하는 HTML 태그들에 대한 내용을 준비했습니다. 태그 : 제목 표시용 태그 제목을 표시할 때 사용하는 태그이입니다. 그러나 꼭 제목을 표시할 때만 사용해야 하는 것은 아닙니다. 단지 일반 텍스트 태그보다 좀 더 진하고 크게 텍스트를 표시할 뿐이죠. 알파벳 h 뒤에 붙는 숫자는 크기를 의미하는데, 1일 때가 가장 크고 6일 때가 가장 작습니다. 아래는 ~ 태그 안에 작성된 코드와 그 결과물입니다. 태그 : 문단 표시용 태그 텍스트를 표시할 때 가장 많이 사용되는 태그입니다. 전자책에 들어가는 일반 텍스트는 모두 이 태그를 사용하..

안녕하세요 탐구소년입니다. 프로그래밍언어인 HTML과 CSS 코딩을 통해 전자책을 제작할 수 있는 프로그램인 시길(sigil)에 대한 글을 조금씩 올리다 보니, 어느 순간부터는 HTML과 CSS의 코딩 방법에 대한 설명을 따로 해야 할 필요를 많이 느꼈습니다. 지금까지는 그때그때 필요한 내용만 설명해가면서 글을 작성했었는데, 점점 그러기가 힘이 들어지고 있거든요. 그래서 앞으로는 시간이 날 때마다 HTML/CSS 언어에 대한 글을 조금씩 올려보려고 하는데요(난이도 최하부터 시작). 오늘은 그 첫번째 게시글로써 HTML에 대한 소개를 먼저 조금 해보려고 합니다. 그럼 바로 시작하겠습니다. HTML이란? - 웹사이트를 나타낼 때 쓰이는 웹 문서를 작성하기 위해 존재하는 고유한 문서 형식입니다. 전자책 또한 ..

안녕하세요 탐구소년입니다. 오랜만에 시길 관련 글을 작성하네요. 여러가지 개인적인 일들로 바쁘기도 했고, 딱히 소재가 생각이 안 나서 글을 거의 안 올리고 지냈는데, 블로그의 성장을 위해 이제부터라도 다시 정신을 차려서 블로그 관리에 힘을 좀 쏟아볼까 생각하고 있는 중입니다. 본론으로 들어가서, 오늘은 시길로 전자책 코딩을 해서 아래와 같은 글상자를 만드는 방법에 대해 기록해보려고 합니다. 이 글상자는 제가 좋아하는 리처드 파인만의 명언 중 하나를 전자책 화면에 표시해 본 것인데요. 붉은 테두리와 밝은 색의 배경색을 통해 명언을 좀 더 빛나보이게(?) 하는 효과를 기대하고 만들어 보았습니다. 이런 식으로 강조하고 싶은 내용을 글상자 안에 넣어두면, 독자로 하여금 책을 읽을 때 해당 메시지가 좀 더 깊게 ..

안녕하세요 탐구소년입니다. 일 때문에 CSS 속성을 정리할 일이 좀 있었는데, 그 김에 정리한 내용 중 일부를 블로그에 업로드하려고 합니다. 업로드할 내용은 CSS의 선택자 중에서도 '속성 선택자'를 사용하는 방법입니다. - [속성] 선택자 : 지정한 속성에 스타일 적용하기 특정 태그가 특정 속성을 가지고 있을 시 스타일을 적용합니다. 위의 예에서는 a 태그가 href 속성을 가지고 있을 경우에만 a 태그에 tomato 색을 지정한다는 내용의 스타일 코드가 작성되어 있습니다. - [속성=값] 선택자 : 특정 값을 갖는 속성에 스타일 적용하기 위의 예에서는 href 속성에 네이버 주소가 지정되어 있는 a 태그에 대해서만 스타일 코드가 적용되었습니다. - [속성*=값] 선택자 : 특정 값이 포함된 속성에 스..

안녕하세요 탐구소년입니다. 오늘은 전자책(epub) 제작 프로그램 중에서도 대중적으로 가장 잘 알려져 있는 시길(sigil)을 이용해서 아주 간단한 한 페이지 짜리 전자책 만드는 방법을 정리해보려고 합니다. 시길을 이용해 전자책을 만드는데 필요한 아주 간단하고 기본적인 기술부터 정리하기 시작해서 점차 관련 게시글을 늘려가며 그 수준을 높여갈 생각이고(어디까지나 생각이긴 하지만), 그러다 보면 언젠가는 제 블로그가 좋은 시길 참고서 역할을 하는 날도 올 수 있지 않을까 하는 헛된(?) 꿈을 꾸어보는 중입니다. 일단 오늘의 내용을 시작하기 위해, 시길 프로그램을 열어보도록 하겠습니다. 시길(sigil) 설치가 아직 안 되어있으신 분들은 아래의 링크를 참고하시면 좋을 것 같습니다. => https://peng..