본문 바로가기

코딩58

코딩_타자게임_영어단어 안녕하세요. 행운공장 입니다. 코딩으로 타자게임을 한번 만들어 봤습니다. 영어단어를 타자를 쳐서 맞추는 게임인데, 다음에는 한글 버전을 도전해 볼 생각입니다. 타이틀을 영어로 할까 하다가, 그냥 타자게임으로 하였습니다. 그래서, 타자게임의 단어는 영어인데, 상단의 제목은 한글이 되었습니다. 물론, 많은 유튜버분들과 블로거분들의 도움으로, 게임코딩을 마무리 하였습니다. 처음에 타자게임의 코드를 보고 한 유튜브영상은, 유튜버 Scalper Frontend님의 타자게임 영상입니다. 기본적인것은 이분꺼를 보고 일단 한다음에, 다른 분들꺼를 검색해서 원하는 곳을 조금씩 수정하였습니다. 물론, 필자가 스스로 수정한 것도 포함되어 있습니다. 심심할때 심심풀이 땅콩처럼 간편하게 할 수 있는 게임을 계속 만들어 볼 예정.. 2020. 12. 10.
html_input_type html input 타입중에 button에 대한, 지난번 포스팅에 이어서 이번 포스팅에서는, 나머지 input 타입에 대해서 알아보도록 하겠습니다. html태그 중에서 사용자로부터 정보를 입력받고, 어떠한 기능들을 담고 있는 input태그의 type들은 아래와 같습니다. checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week input태그의 기본적인 표기방법은 아래와 같습니다. 별도의 열고 닫는 태그가 없는, 단독 태그로 사용하고 싶은 타입을 type안에 적어주면, 인풋타입을 사용할 .. 2020. 12. 8.
스크래치_피아노(pc버전)_건반음악 안녕하세요. 행운공장 입니다. 이번 포스팅의 내용은, 지난번 스크래치 블록코딩편의, 모바일버전 피아노에 이어서 pc버전 피아노입니다. 모바일버전의 피아노에서는 한번에 한음만 연주할 수 있어서, 진짜 피아노처럼 동시에 여러음이 연주되는것을 만들어 보고 싶었습니다. 스크래치홈에서 검색했을때는, 아예 하나의 음악이 연주되게 자동으로 피아노가 쳐지는 것도 있었는데, 스크립트를 아무리 보고 따라해 보려고 해도, 그렇게 까지는 도저히 안되겠어서, 그냥 건반처럼 연주되게 만들었습니다. 총 다섯개의 옥타브가 약간 넘는 음을 연주할 수 있습니다. 로딩이 생각보다 오래 걸릴 수 도 있습니다. 사용방법 1. pc버전의 피아노이기 때문에, 컴퓨터에서 연주할 수 있도록 최적화 되어 있습니다. 2. 녹색깃발을 클릭하면, 연주할 .. 2020. 12. 1.
스크래치_피아노(모바일) 이번 포스팅 내용은, 스크래치 블록코딩으로 만든 피아노 입니다. 모바일 전용으로 만들어 보았습니다. 건반을 피아노 치듯이 클릭하면, 피아노 소리가 납니다. 스크래치 블록코딩은 최종 작업물을 만들 수 있는 사이즈가, 한정되어져 있어서 피아노의 옥타브롤 더 길게 만들지 못하였습니다. pc에서는 마우스로 건반을 클릭하면, 됩니다. 하지만 모바일에서 하는것 보다는 다소 불편할 수 있습니다. 스크래치 홈페이지의 상태에 따라서, 로딩이 굉장히 느리게 될 수 있습니다. 로딩이 바로 될 수 도 있지만, 길게는 대략 몇십분 정도는 걸릴 수 있습니다. 유튜브에서 알 수 없는 알고리즘때문에, 클릭해서 보게된 베토벤의 월광 피아노 연주곡을 듣고, 문득 생각이 나서 만들게 되었습니다. 그런데, 한가지 단점이 있습니다. 건반을 .. 2020. 11. 25.
html_input_button과 <button> 이번 포스팅은 input태그의 타입중에 하나인 button과, 독립적인 태그로 쓰이고 있는 에 관한 내용입니다. ● input태그의 타입 button과 은, 각각 어디에 사용되는가? input태그는 html태그들 중에서, 사용자로부터 어떠한 정보를 입력받고, 웹상에서 실행을 유도하는 기능을 담고 있는 태그입니다. input태그의 다양한 타입을 표현하는 방법은 처럼, type를 써서 표현합니다. ● input태그의 타입 button과 은, html에서 어떻게 표현하는가? 만으로는 브라우저상에 버튼모양만 생성되기 때문에, 사용자에게 텍스트를 보여주기 위해서는, value=""요소를 추가합니다. 아래의 코드를 보아주세요. input_button 위의 코드가 적용된 화면은 아래의 이미지와 동일하게 나타납니다. .. 2020. 11. 18.
html_iframe 활용하기(파일 인크루드 include) 이번 포스팅은, 지난번에 iframe에 대한 내용의 후속편인 iframe 활용하기 입니다. iframe은 html문서내에, 다른 html문서를 특정한 부분에 보여지게 하는 기능입니다. index파일 하나만 작성하건, 파일의 길이가 짧을 경우에는 굳이 iframe을 사용할 필요가 없습니다. 하지만, 우리들이 html코딩을 하다보면, 항상 index파일의 길이가 짧거나, 문서 하나로 사이트를 만들 수 없다는것을 알게 됩니다. 그럴때는 파일의 수정을 용이하게 하고, 좀 더 효율적인 업무작업을 하기 위해서 include방식인 iframe을 html에서는 사용하게 됩니다. 예를 들어서, 사이트 하나가 만들어질때 top의 영역, side영역, body영역, footer영역으로 나누어서 관리하려고 할때, iframe.. 2020. 11. 11.
html_iframe 이번 포스팅은 html에서 외부페이지를 내부로 불러오는 tag인, iframe에 대한 내용입니다. html로 코딩을 할때, 외부페이지를 내가 구현하고 있는, 웹에 보여지게 하고 싶은 순간이 있습니다. html에서 외부의 웹페이지를 보여지게 하려면, 전체를 코딩으로 표현하는 방법밖에는 없을 거라고 짐작되지만, 몇가지 방법이 있습니다. 그중에 첫번째는 인크루드를 이용하여, 다른 언어로 외부페이지를 불러오는 방법이 있습니다. 그리고, iframe이라는 태그를 사용하는 방법이 있습니다. ● iframe 태그의 표현방법은 아래와 같습니다. 위의 iframe태그의 표현방법을 활용한, 아래의 코드를 잘 살펴봐 주세요. iframe 태그 아래의 화면은, 위의 코드중에서, iframe 태그를 표현한 것입니다. 웹 url.. 2020. 11. 4.
html_span 태그 이번 포스팅은 html 태그 중에서, 텍스트 본문내용 일부분에 변화를 주고 싶을때 사용되는 태그에 대한 내용입니다. ● 예전에 올렸던 포스팅중에서, html 태그로만 텍스트의 모양을 바꿀 수 있는 태그들을 다루었던 적이 있습니다. 그런데, 좀더 유동적이고, 다양하게 텍스트의 변화를 주어야 할때가 코딩을 하다보면, 발생하게 됩니다. 그럴때, 흔하면서도 유용하게 쓰이는 것이 바로 태그 입니다. 아래의 태그를 잘 보아주세요. span 태그 span 태그는 본문 내용중에서, 특정한 텍스트 부분에 스타일을 주고 싶을때 사용됩니다. span 태그 부분스타일 span 태그는 본문 내용중에서, 특정한 텍스트 부분에 스타일을 주고 싶을때 사용됩니다. span 태그 라인 전체스타일 span 태그는 본문 내용중에서, 특정한.. 2020. 10. 28.
html_div 태그 이번 포스팅은 html중에서, div라는 태그에 대한 내용입니다. 코딩 카테고리를 만들고, 포스팅을 하기시작했을 초창기에도 언급했었지만, 필자는 html코딩을 어디에서 정식으로 배운것이 아닌, 쇼핑몰관리자라는 일을 하면서, 익히게되었다고 한적이 있습니다. 특히, 지금은 웹뷰앱으로 앱까지 만들고 있으니, 너무나 감사한 html코딩입니다. 이렇게 되기까지 가장 결정적인 도움이 된것은, 바로 카페24라는 쇼핑몰솔루션 시스템의 디자인수정 메뉴안의 코딩이었습니다. 처음 카페24의 코딩을 할 당시만해도, 쇼핑몰스킨의 기반이 table코딩으로 이루어져 있었습니다. 한마디로 레이아웃이 table코딩으로만 되어있었습니다. 어쨓거나, 그 당시에는 모바일기기에서의 웹페이지 자체가 굉장히 희귀하던 시절이라서, table의 소.. 2020. 10. 21.
html_li_ul_ol_태그 이번 포스팅은 html중에서, 리스트를 표현하는 태그인 li, ul, ol에 대한 내용입니다. 웹문서를 보다보면 아래의 화면과 같은, 요소들을 많이 보셨을 것입니다. 필자는 about google의 상단부분을 예로 들겠습니다. 구글 어바웃의 상단 화면의 소스를 보면, 아래의 이미지와 같습니다. ul, li, ol은 html로 웹을 표현할때, 일반적인 리스트를 나타내는것과, 위의 화면과 같이 카테고리 메뉴의 기능을 하는 것에도 많이 쓰입니다. 스크립트의 표현 방법이 세월이 갈수록 발전을 하여, 요즘은 다른 방식으로도 카테고리 메뉴와 리스트를 표현하는 방식도 있다고 합니다. ul, li, ol은 상단과, 본문 내용을 표현하는 것뿐만이 아니라, 하단요소의 다양한 메뉴들을 표현하는데도 쓰입니다. 예를들어서, 이.. 2020. 10. 14.