본문 바로가기

(12)
HTML / JS / XML - JS사용해서 XML 파일로 내보내기/가져오기 index.html Add Delete Export Import fileControl.js function exportBoxes() { var boxes = document.getElementsByClassName("box"); var xml = '\n\n'; for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; var left = box.style.left; var top = box.style.top; var gate = box.querySelector("select").value; xml += ' \n'; } xml += ''; var blob = new Blob([xml], {type: 'text/xml'}); var url = URL.crea..
CSS ::before ::after (가상 선택자) 필자는 이 글의 주제인 ::before와 ::after 선택자를 유튜브에서 처음 활용하는 법을 배웠다. 해당 선택자를 사용하여 입체적인 3D 버튼을 만드는 법을 알게됐다. 각설하고, 이번에는 가상 선택자를 사용하는 방법을 빠르게 알아보겠다. 편의를 위해 css는 html파일 내에 작성하겠다. 이번 글의 목표는 가상 선택자를 사용해서 3D 박스를 제작해보겠다. 먼저 box 클래스를 가진 div를 생성한다. 3D button 위 코드를 웹에서 돌려보면 이렇게 보인다. 그러면 이제 가상 선택자를 사용해볼 차례이다. .box::before{ } .box::after{ } 우선 가상 선택자를 사용하려면 content 속성을 무조건 넣어야한다. content 속성은 위 가상 선택자들이 실체를 가질 수 있도록 도와준..
게임 디자이너 [2] - DB 설계 json을 사용해서 DB를 설계하겠다. 일단 게임에서 대표적으로 사용하는 요소들을 정리하보겠다. 종족 직업 건축 아이템
게임 DB 툴 프로젝트 [1] - JSON 설정 사용 예정인 모듈 NodeJS React Nodemon excel 관리 : js-excel 이번 프로젝트는 게임 기획을 진행하며 게임 DB의 속성값들을 일일이 적는것이 귀찮아서 해당 기능을 좀더 쉽게 바꾸고 자동화 하기 위해 기획하였다. 먼저 이 툴은 DB 작성을 자동화 하기 위해 제작했다. 따라서 DB관련된 기능을 최우선으로 생각할 것이다. JSON파일을 생성하여 일단 무기와 관련된 스탯을 생성하는 기능을 위한 구조를 제작하였다. "Knife": { "Basic":{ "name": "", "Damage": "", "Range": "", "CriticalChance": "" }, "Advanced":{ "UseMana":"", "UseHealth":"", "CritialChance":"", "Confus..
Clash Of Clans API 불러오기 오늘은 클래시 오브 클랜 게임을 하다가 설정에 들어가 봤는데 api를 사용할수 있어서 시도해 보았습니다. 딱히 할것도 없고 해서 바로 작업에 들어갔습니다. -시작 https://developer.clashofclans.com/#/login Clash of Clans API Channel Your Inner Builder with the Clash of Clans API. Access Clan Search, Global and Local Leaderboards, Clan and Player Profiles and Leagues. developer.clashofclans.com 이곳은 클래시 오브 클랜 api를 사용할 수 있는 공식 사이트입니다. 회원가입을 하고 사용하면 됩니다. -키 생성 로그인 후 우측 ..
웹 css - 태그1 1. font-size px : 고정된 값, 모든 장치에서 같은 크기로 보임 em : 부모태그의 영향을 받는 상대적인 값 rem : html태그의 영향을 받는 상대적인 값 p{ font-size='10px'; font-size='10rem'; font-size='10em'; } 2.color 색상을 표현하는 방법으로는 이름, 16진수, rgb값이 있다. p{ color: red; color: rgb(255,255,255); color: #fffff; } 3.background-color p{ background-color: red; background-color: rgb(255,255,255); background-color: #ffffff; } 4.text-shadow text-shadow: x축 y축..
웹 css - 선택 웹에서 css란 빠질 수 없는 존재이다. 물론 없어도 우리가 필요한 일을 하기위한 기능들은 html에서 모두 얻을 수 있지만, 거의 검은색과 흰색만있는 페이지가 우리 눈에 잘 들어올까? 그래서 css가 생겼다. css는 Cascading Style Sheets의 약자로 기능을 간략히 말하자면 웹의 디자인을 맏고 있다. 오늘은 css에서 꼭 필요한 선택자에 대해 알아보도록 하자. 먼저 css의 구조를 살펴 보자. p {background-color=='red';} -p는 선택자 이다. -중활호 {} 는 p선택자에 대한 명령어를 적는 칸을 만든다. 이를 선언블록이라고 한다. -background-color=='red';는 명령어, 즉 선언이다. -background-color는 속성, 'red'는 속성 값이..
Lord of Injection 2번 보호되어 있는 글입니다.