친효스킨 2.4버전 이상부터 적용되는 디데이(D-Day) 카운터 모듈에 대한 안내 겸 다른 스킨에는 어떻게 적용하는지에 대한 소개입니다. 현재 이곳 친절한효자손 취미생활 티스토리에도 적용된 기능입니다. PC 해상도 기준으로 왼쪽 사이드바에 위치한 디데이 모듈을 주목해 주시기 바랍니다. 아래의 스크린샷 이미지는 과거에 스샷해 놓은 것이기에 현재의 날짜와 맞지 않을 것입니다. 그냥 이미지로서만 봐주시면 됩니다. 두 가지의 기능을 담은 디데이 모듈입니다. 첫번째는 지정한 날짜로부터 계속 카운터가 되는 형태이며 마지막 두번째는 지정한 날짜까지의 남은 날을 계산해주는 카운터입니다. 둘 다 쓰임새가 다를 것입니다. 첫번째의 경우는 예시에서처럼 홈트레이닝 ~일째라는 것을 보여줄 때 요긴할 것입니다. 두번째는 예시처럼..
오늘은 산술연산자에 대해서 배웠습니다. 이항 연산자라고도 하는데, 쉽게 말씀드리면 수학의 덧샘, 뺄샘, 곱샘, 나눗샘 이라고 생각하시면 됩니다. 다만 수학적 기호가 자바스크립트에서는 일부 다르게 사용됩니다. 한번 알아보겠습니다. 보시는 것 처럼 각 산술 연산자에 의해서 정의된 변수의 값이 계산되어 출력됩니다. 위의 코딩 중 다음에 나오는 숫자들이 현재의 결과값 입니다. 각 산술 연산자에 대한 뜻은 아래와 같습니다. 산술 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 그리고 브라우저에서의 결과 화면 입니다. 이렇게 출력이 됩니다. 차후에는 산술 연산자를 이용해서 다양한 응용을 할 수가 있습니다. 끝. 브라우저 유효성 검사 오류를 막는 CDATA 선언 방법CSS3 transform 사용법 ..
자바스크립트에서 사용하는 산술 연산자라던지 기타 선언에 대한 결과화면이 정상적으로 나와도 오류를 띄우는 경우가 간혹 있습니다. 보통 유효성 검사 오류를 출력하는데, 원인은 스크립트 안에 포함된 HTML 태그 때문인 경우가 가장 흔합니다. 그래서 이와 같은 경우에는 CDATA (C데이터) 선언을 해줘야 합니다. 참고로 내부 스타일에서만 해당되는 방법이며, 만약 js 파일을 별도로 만들어서 외부 스타일로 불러들이는 경우는 유효성 검사는 정상적으로 출력이 됩니다. 또한 브라우저에 따라서 유효성 검사 오류가 생길수도, 안 생길수도 있습니다. 요즘 나와있는 각 브라우저의 최신 버전에서는 오류를 띄우지는 않습니다. 여기 보시면 // 와 //]]> 가 스크립트의 내용을 감싸고 있는것을 살펴보실 수 있습니다. 이렇게 ..
[자바스크립트 기초] 2차원배열 명령어 스크립트 알아보기 이번 시간에도 게임만들기에 도움이 되는 2차원배열에 대해서 알아보겠습니다.한번 차근차근히 학습을 해 보도록 합시다. 지난시간에 배웠던 2차원배열에 이어서이번 시간은 어떻게 보면 심화학습 시간인데요, 2차원배열에 대한 응용을 하는 시간으로서,다양한 명령어들을 알아보도록 하겠습니다. 메소드는 2차원배열에서 쓰는 명령어들 입니다.indeOf, slice, splice, join 등등 자주 쓰는 명령어들은 반드시 숙지를 해 두시면 좋구요~ 이제 하나하나 알아보도록 할께요. join은 위에서 보시는 것처럼, 중간중간에 문장을 넣을 수 있도록 도와주는 명령어 입니다.위의 예제를 보시면 아시겠지요???ㅎㅎㅎ reverse는 역순으로 만들어 줍니다.말 그대로 반..
[자바스크립트 기초] 배열함수 및 2차원 배열 알아보기 유니티 수업과 같이 하는 자바스크립트 수업!이번시간엔 배열에 대해서 알아보도록 합니다. 배열은, 게임에서 많이 쓰이는 스크립트 입니다. 예를들어서, 디펜스 같은 게임에서,레벨 1때는 쪼랩 몬스터만 나오게 하고...점점 레벨이 오르면서 강한 몬스터가 출연을 하는데, 이 때 필요한 것이 바로 배열 입니다. 자, 이것이 배열의 기본 구조 입니다.[] 이런 괄호안에 넣고자 하는 오브젝트를 넣습니다. 그리고 녹색 박스안의 것은 지난시간에 배운 for 문 아시죠??? 배열 변수는 여기서는 S를 주었네요?그리고, s.length 라는 것은, 바로 [] 안의 갯수들을 말하는 것입니다. 저기서는 소녀시대 맴버들을 모두 등록했는데,그러면 모두 7명이죠? 따라서, s...
[자바스크립트 기초] 간단한 기초계산기 Javascript 구성하기 이번 시간은, 자바스크립트로 아주아주 간단한기초계산기를 한번 구성을 해 보도록 하겠습니다. 매우 쉽습니다. 너무너무요~! ...사실 쉽습니다...라고 말해놓긴 했어도...말이 쉽지...그게...ㅠ_ㅠ 이해력이 좋으신 분들에 한해서 말이죠. 어쨌든~ 한번 스크립트가 어떤식으로 짜여져 있는지 한번 보도록 하지요. 일단, 계산기 레이아웃은 이렇게 구성되어 있습니다.간단하죠?? ㅎㅎㅎ 점차점차 늘려나갈 계획이에요^^ 덧샘, 뺄샘, 곱샘, 나눗샘만 되며, 차후에여러가지 기능을 추가적으로 등록할껀데...음...더 공부를 해야...ㅠ_ㅠ 아무튼, 이렇게 간단히 구성을 해 본 자바스크립트 계산기는 어떻게 구성이 되어 있는지 한번 알아봅시다! 부분 입니..
[자바스크립트 기초] Function 함수호출 및 연산 스크립트 오랫만에 자바스크립트에 대해서 글을 씁니다^^오늘 배웠던 것은, 자바스크립트 중에서도 함수 부분에 대해서 좀 더 자세히 들어가기 위한기초단계라고 생각해 주시면 될 것 같습니다. 기존에 포스팅 했던 자바스크립트 강의 내용들과 중복되는 부분이 많으므로,함수 부분은, 저번에 BMI 비만도 계산기 스크립트를 보시면, 많이 나와요^^ 그 부분의 태그를 보시면서 연구하셔도 좋은 도움이 되지요! 우선은, 아래의 스크린샷을 보시길 바래요. 보시면, 함수의 기본 개념을 도형으로 표현해 놓았는데,간단하게 말해서, 함수는 일종의 마술상자 라고 하면 되겠어요. 이 마술상자에는 공식이 들어가 있고, 우리는 그걸 트릭 이라고 하죠^^마술에서 표현하는 방식이 트릭~ ..
[자바스크립트 기초] 프롬프트로 문자열을 입력받아 문장 변경하기 이번 시간에는 자바스크립트에서 프롬프트창 (입력창) 이 뜨면,사용자가 직접 원하는 문자열을 입력하여, 바꿔보는 스크립트를 배우도록 하겠습니다^^ 하나하나 열심히 따라하다 보면, 분명 도움되는 부분들이 있을 것이오니끝까지 인내를 가지고 한번 따라해 주시길 바래요! 우선, 늘 하던데로 노트패드를 열어서기본틀을 작성해 주시구요~! 그 다음부터 본격적으로 스크립트를 구성해 나가 보도록 합니다. 바디 부분에 스크립트를 구성해 보도록 했구요,X라는 변수를 만들고,X에다가 0.1 을 e를 이용해서 표현해 보았습니다. 그리고, document.write 출력부분에 변수는, 입니데이^^ 를 별도로 출력하게 하고그 가운데에 X가 출력되도록 하였지요. 그, 결..
[자바스크립트 기초] Alert(경고창), Confirm(선택창), Prompt(입력창) 알아보기 오랫만에 자바스크립트 포스팅을 하나 하도록 할께요.지금 엄청나게 밀려있는데...ㅠ_ㅠ 바빠서 못하고 있어요... 그리고..요새 프로그램 슬럼프에 빠져서...뇌에 안들어 오네요...ㅠ_ㅠ 어쨌든! 아는만큼 무조건 포스팅 할께요^^ 이번 시간은, Alert , Confirm, Prompt 스크립트 용어에 대해서 어떤건지짤막하게 스크린샷을 보면서, 이용부분도 한번 알아보도록 하겠습니다. 우선, Alert (경고창) 의 사용법 입니다. 익스플로러에서 노란색 삼각형안에 느낌표 있는 경고창 아시나요?그걸 띄워줍니다. 위의 예시대로 작성하고, 익스플로러에서 시험을 해 보도록 하겠습니다. 이렇게 나옵니다. ㅎㅎㅎ확인버튼을..
[비만도 계산하기] 자바스크립트로 구성한 비만도 계산기 Ver 2.0 입니다 지난시간에 올렸었던 BMI 비만도지수를 나타내는 자바스크립트 구성에서몇가지를 조금 더 추가를 하였습니다. 우선, 알림창은 결과가 뜨게끔 해주고~ 나머지 수치들은 한번에 입력할 수 있게끔 해주었습니다. 그리고, 엔터키는 안먹히고, 반드시 확인버튼을 클릭하게 해두었으니 참고하시구요^^; 지난번에 썼던 BMI 계산기의 기본틀과 비슷하구요,헤드 부분에 스크립트가 구성되어 있습니다. 위의 두가지 스크린샷이 헤드부분 입니다. 보시면, if 문이 들어가 있는것을 확인하실 수 있구요,자신의 키 cm 에 곱하기 0.01을 해주는 이유는, 입력하실때, 소수점으로 굳이 입력 안하게끔 해준것 입니다. 예를들어, 170이면, 그냥 170 입력하면, 스..
[자바스크립트 기초] FOR문 연산 기초, 1부터 10까지 덧샘연산 C++과 자바스크립트는 같은 프로그램은 아니지만, 그래도기본이 C언어 였기에... 그 쓰임새와 생김새도 조금 비슷하지요. 이번 시간은, FOR문에 대해 알아볼건데요,이게 뭐냐면 쉽게 말씀을 드려볼께요! 예를 들자면, 1부터 20까지의 숫자를 출력하는 스크립트 라던지,1부터 10000까지 짝수들의 합을 구하는 스크립트 라던지~ 이런것들 있죠?? 이런 계산들을 자바스크립트의 FOR문을 활용해서 구성 할 수 있습니다. FOR문의 기본 구조구요, 1번과 2번, 3번 이렇게 3파트로 나뉘며, 그 사이에는 세미콜론(;) 으로 구별을 짓습니다.순서는 저렇게 계산이 되어지구요~! 참고하시면 됩니다^^ 그럼, 예제로 쉽게 이해를 해보겠습니다. 1부터 2..
[자바스크립트 기초] if, else 태그를 이용하여 BMI 비만도 계산기 프로그램 만들기 오늘은 좀 고급진 방법을 배웠어요^^바로, 자바스크립트에서 if 문을 이용해서 프로그램을 짜는 방법이죠^^ 이것은 무슨소린고...하니, if 라는 뜻이, 만약~하다면 이라는 뜻이죠?이것을 이용한 것입니다. 이 방법을 활용하여, BMI (비만테스트) 에 이용을 할 수 있겠는데요,한번 과정을 알아보도록 하겠습니다^^ 우선, 연산기호들을 알아야겠죠?? 위에 보시는 것처럼 a,b 라는 변수를 주고,a는 10, b 는 9 라고 정의하고나서, 참이냐 거짓이냐를 밝혀냅니다. a>b 라고 했으니, 당연히 10이 9보다 크므로, 이것은 참(true) 이 됩니다.그래서, 자바스크립트에서도 true 라고 처리를 하게 되죠. 이번엔 b..
[자바스크립트 기초] 마우스 오버 및 클릭 했을때, 글씨 및 이미지변환 태그 알아보기 자바스크립트에 대해서 조금씩 재미를 찾고 있습니다.물론...쉽진 않습니다만...그렇다고 손 놓기에는 너무 아까운지라~! 일단, 무조건 따라하고, 눈에 익히자! 라고 마음먹고 시작했는데잠시 초심을 잃다가...다시 시작했어요. 그랬더니 조금씩 눈에 들어오기 시작했어요^^; 이번시간엔, 마우스 이벤트들에 대해서 알아볼께요~! 그...왜 이미지위에 마우스가 올라가면 그림이 바뀐다거나,마우스 커서가 빠지면, 다시 원래대로 돌아오거나~ 그런 여러 이벤트들 있지요??? 의외로 쉬운 자바스크립트 태그를 구성해서 꾸밀 수 있어요^^ 자~ 그러면 한번 알아보도록 하자구요. 우선, 스타트는 아시죠??? 도쿠먼트로 시작해서~~~ 이렇게 하구..
[자바스크립트 기본] 전역변수와 지역변수 개념 이해하기 이번시간에도 저번시간에 이어서, 변수에 대한 간단한 이해를 돕는 건데요~특히, 전역변수와 지역변수의 개념을 이해해야 할 것 같습니다^^ 말이 어렵게 보이지, 사실은 엄청 쉬운 개념이에요. 함수내에서도 쓰일수있는 변수~! 일단 용어에 대해서 익숙해 져야 겠는데요,변수에 대한 개념은 간단하게 말씀을 드리자면, 내가 수치라던지 뭔가 변할수 있는 값을 임의로 부여할때그것을 기호화 한다고 보심 되어요~! 자, 그리고 전역변수와 지역변수에 대한 개념이구요~글만 보면 잘 모르시겠지요??? ㅎㅎㅎㅎ 스크립트 안에서 사용이 되어지구요, 한마디로, function 안에서 쓰이는 var 는 지역변수!그리고, 그 밖에 쓰이는 var는 전역변수~! 전역변수는 모든 스크립트..
[자바스크립트 기초] JAVA 변수연습 이번시간에는 자바 변수를 넣는 연습을 한번 해볼께요^^뭐...간단해서;;; 딱히 설명한 건 별로 없지만, 한번씩 스크린샷 한것들을 보시면 아마 이해가 다들 되실거라 믿어요! 자, 그럼 일단 변수에 대해서 간단한 개념을 알아봐야 겠죠??? 변수란? 말그대로 변하는 수치를 말하는 겁니다.즉! 사용자가 별도로 지정해 놓은 값을 JAVA 태그코드에 대입해서 변화를 주는건데, 쉽게 말씀드리면, 지금 이렇게 블로그에 포스팅을 할때, 위에 다양한 도구들이 있죠?도구를 활용하여, 글씨색이라던지, 크기나 폰트변화, 그리고 그림도 넣고~ 하잖아요? 이런 모든것들이 다 변수라고 할 수 있겠습니다^^ 우선, 본문에 이렇게 스크립트를 구성했습니다. 변수를 넣을때는, var 로 스타팅을 하..
[자바스크립트 기초] JAVA 태그로 현재시간 출력하기 아침부터 신나는 포스팅의 시간입니다^^이번 시간에는, 짧긴 하지만, 유용하게 쓰일 수 있는 JAVA 태그중 하나로서, 현재시간을 출력하는 태그를 알아볼께요. 저번시간에 잠시 기초를 다뤘었는데,복습겸사겸사~ 다시한번 여기에 언급하자면, 라는 코드를 사용하며, 자바는 헤드 안에도 들어갈 수 있고, 바디에도 들어갈 수 있습니다.좀 자유롭다 해야하나요??? ㅎㅎㅎ 그리고, 다음시간에 다시 언급하겠지만, 쌈박한걸 하나 포스팅 할꺼에요.그걸 보시고, 이 부분은 어떻게보면 자바의 문법인데,잘 이해해 주시면 됩니다. 자, 이렇게 바디 안에 코드를 구성해 보았구요,var 라는 단어로 스타트를 하는게 일반이구요, var는 variable 의 약자로서 해석하면,변화를 ..
[자바스크립트 기초] JAVA Script 의 기본! 문장 출력하기 어제부터 자바를 배우기 시작했어요!음....근데 C++ 을 그래도 조금 들어봐서 그런진 몰라도, 대~충 어떻게 돌아가는 바닥인지는 조금은 알듯~말듯~ 하네요^^; 전혀 듣보잡 내용들이 아니라서, 일부는 이해하기도 하고,또 일부는 처음 듣고~ ㅎㅎㅎ 자! 그래서, 제가 이해한 부분만큼은 확실하게 이제 알려드릴 수 있도록자바스크립트 기본을 익힐 포스팅을 꾸준히 작성하도록 하겠습니다^^ 우선, 첫시간인만큼, 간단한 문장을 자바를 이용해서 띄워보도록 할께요. 우선, 헤드는 헤드안에, 그리고 HTML 스타일시트는 스타일 안에 들어가는전 지금까지 포스팅을 보시면 이해가 되실거구요~자바도 마찬가지로, 헤드 안에 들어가기도 하고, 본문(BODY) 에 ..