codingfarm

html에서 체크박스를 만드는 방법은 간단하다. 1 2 3 4 5 6 입력 cs input 타입에 "checkbox"를 넣으면 체크박스가 만들어진다. 그러면 이 기능을 jquery를 이용하여 javascript로 만들어 보자 구현 위 이미지를 체크박스로 사용하겠다. 이미지를 클릭할때마다 2개의 이미지가 각각 전환되게끔한다. 미체크상태 $\rightarrow$ 체크상태로 만드는방법 $체크박스.addClass("check"); addClass()메서드를 이용하여 노드에 크래스를 동적으로 추가할 수 있다. 체크상태 $\rightarrow$ 미체크상태로 만드는방법 $체크박스.removeClass("check"); removeClass() 메서드를 이용하면 노드에 적용된 클래스를 동적으로 제거할 수 있습니다. a..

응용프로그램이 실행되면, JVM은 시스템으로부터 프로그램을 수행하는데 필요한 메모리를 할당받고 JVM은 이 메모리를 용도에 따라 여러 영역으로 나누어 관리한다. 그 중 3가지 주요영역(method area, 호출스택, heap)에 대해서 알아보자. 1. 메서드영역(method area) $\bullet$ 프로그램 실행 중 어떤 클래스가 사용되면, JVM은 해당 클래스의 클래스파일(*.class)을 읽어서 분석하여 크래스에 대한 정보(클래스 데이터)를 이곳에 저장한다. $\bullet$ 그 클래스의 클래스변수(class variable)도 이 영역에 함께 생성된다. 2. 힙(heap) $\bullet$ 인스턴스가 생성되는공간. $\bullet$ 프로그램 실행 중 생성되는 인스턴스는 모두 이곳에 생성된다. ..

$\bullet$ 자바로 프로그래밍하기 위해 필요하다. JDK를 설치하면 JVM과 Java API외에 자바를 개발하는데 필요한 프로그램들이 설치된다. JDK의 주요 실행파일들 javac.exe $\bullet$ 자바 컴파일러 $\bullet$ 자바소스코드를 바이트코드로 컴파일한다. javac Hello.java java.exe $\bullet$ 자바 인터프리터 $\bullet$ 컴파일러가 생성한 바이트코드를 해석하고 실행한다. java Hello javap.exe $\bullet$ 역어셈블러 $\bullet$ 컴파일된 클래스파일을 원래의 소스로 변환한다. $\bullet$ 원래의 소스전체가 아닌 선언부만 저장된다. '-c'옵션을 통해 바이트코ㅡ로 컴파일된 내용도 볼 수 있다. javap Hello > H..

자바란? $\bullet$ 자바는 OS에 독립적이다. $\bullet$ 자바로 작성된 프로그램은 OS에 관계없이 실행이 가능하다. 그러므로 다양한 기종의 컴퓨터와 OS가 공존하는 인터넷 환경에 적합한 언어이다.(하지만 이는 Python, Ruby, PHP, JavaScript같은 고급언어 관점에서는 장점이라 보기 힘들다.) $\bullet$ C++의 장점을 채택하면서 잘 사용되지 않는 부분은 과감히 제외시킴으로써 비교적 배우기 쉽고 이해하기 쉬운 간결한 표현이 가능토록했다. $\bullet$ 풍부한 클래스 라이브러리(Java API)를 통해 프로그래밍에 필요한 요소들을 기본적으로 제공하므로 자바 프로그래머는 단순히 이 클래스 라이브러리만을 잘 활용해도 강력한 기능의 자바 프로그램을 작성할 수 있다. $\..

www.acmicpc.net/problem/4485 4485번: 녹색 옷 입은 애가 젤다지? 젤다의 전설 게임에서 화폐의 단위는 루피(rupee)다. 그런데 간혹 '도둑루피'라 불리는 검정색 루피도 존재하는데, 이걸 획득하면 오히려 소지한 루피가 감소하게 된다! 젤다의 전설 시리즈의 주�� www.acmicpc.net 상하좌우 이동을 통해 각 칸으로 이동하면 해당 칸에 배정된 점수를 얻게된다. 이때 오른쪽 아래까지 이동하는동안 얻을 수 있는 최소 점수를 찾는 문제이다. 풀이 노드와 간선이 안주어젔을뿐 전형적인 다익스트라 문제이다. 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 33 34 35 36..

www.acmicpc.net/problem/1238 1238번: 파티 첫째 줄에 N(1 ≤ N ≤ 1,000), M(1 ≤ M ≤ 10,000), X가 공백으로 구분되어 입력된다. 두 번째 줄부터 M+1번째 줄까지 i번째 도로의 시작점, 끝점, 그리고 이 도로를 지나는데 필요한 소요시간 Ti가 들어� www.acmicpc.net 풀이자체는 복잡한것이 없으리라 생각했다. 각 마을에서 목적지 까지 가는거리와 오는거리의 최소 길이를 구해야 하므로 다익스트라를 갈때, 올때 2번 호출해서 구하면 왕복 거리가 나오리라 생각했다. 그래서 나온것이 아래 코드다. 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 3..

입력받은 좌표대로 물고기를 움직이게하는 코드를 작성하시오 이때 x값은 0~500, y값은 0~300 의 범위를 가저야하며 이를 벗어날경우 "입력된 값이 너무 큽니다. 다시 입력해주세요" 라고 출력되어야 한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 body { font-size: 9pt; } #panel { width: 600px; height: 400px; border: 1p..

프롬프트창에 값을 입력받아서 1이면 "당첨! 냉장고", 2이면 "당첨! 세탁기", 3이면 "당첨! TV", 이외의 경우는 모두 "꽝입니다."를 출력하는 코드를 구현한다. 1234567891011121314151617 var ret = window.prompt("두궁두궁! 행운의 번호를 고르세요."); if(ret == "1") document.write("당첨! 냉장고"); else if(ret == "2") document.write("당첨! 세탁기"); else if(ret == "3") document.write("당첨! TV"); else document.write("꽝입니다."); Colored by Color Scriptercs

1. 준비 jQuery를 사용하려면 기본적으로 아래의 2가지 세팅을 해야 한다. 1. jQuery 기능이 들어있는 라이브러리 파일을 연결한다. 2. ready()라는 jQuery 기능을 이용해 초기 시작점을 정한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(document).ready(function(){ //여기에 노드를 다루는 코드를 작성한다. alert("hello world"); }) lorem ipsum Colored by Color Scripter cs 위 코드를 브라우저로 열면 알림창이 뜨는것을 확인 할 수 있다. 2. jQuery를 이용한 노드 찾기 jQuery에는 수많은 노드찾기 기능을 제공한다. 우선은 가장 기초적인 방법을 배워보겠다. jQue..

jQuery란? $\bullet$ HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 크로스 브라우징 JavaScript 라이브러리이다. $\bullet$ jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. jQuery의 기능 1. DOM $\bullet$ DOM 객체의 필수 프로퍼티와 메서드 $\bullet$ 노드 추가, 삭제, 찾기, 이동시키기 $\bullet$ 스타일 추가, 수정, 값 구하기 $\bullet$ 속성 추가, 수정, 값 구하기 $\bullet$ 이벤트 등록, 제거, 발생시키기 $\bullet$ 위치, 크기와 관..

$\bullet$ JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. $\bullet$ 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. $\bullet$ 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. $\bullet$ 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질..

위와 같은 형태의 웹페이지를 만드려 한다. 우선 레이아웃을 대략적으로 만들어보자. 위 레이아웃과 같은 형태의 웹페이지를 만든다 기본적인 구조는 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 cs header 일단 header부터 작성해보겠다. 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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81..

웹페이지를 만들때 가장 많이 사용하는 스타일속성이다. 부유하는 대상을 만들 때 사용하며 처음 float속성을 개발했을때는 아래처럼 img태그를 일반 태그와 함께 쓰기위해 고안됐다. 아래의 예로 확인해보자 1 2 3 4 5 6 7 8 9 10 11 12 13 Float Style Property Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. D..

요소의 위치를 2가지 방법으로 설정할수있다. $\bullet$ 절대 위치 좌표 : 요소의 $X$좌표와 $Y$좌표를 설정해 절대 위치를 지정한다. $\bullet$ 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정한다. 1. position 상대위치 좌표를 쓸때는 position속성에 static 또는 relative 키워드를 적용한다. static키워드를 적용하면 태그가 "위에서 아래로"아 "왼쪽에서 오른쪽으로" 순서에 맞게 배치된다. relative 키워드를 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동할 수 있다. 반면 절대 위치 좌표를 사용할 때는 position 속성에 absolute 키워드 또는 fixed 키워드를 적용한다. 키워드 설명 stati..

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 CSS3 Font Property .font_big { font-size: 2em; } .font_italic { font-style: italic; } .font_bold { font-weight: bold; } .font_center { text-align: center; } .button{ width: 150px; height: 70px; background-color: #FF6A00; border: 10px solid #FFFFFF; border-radius: 30px; box-shadow: 5px 5px 5px #A9A9A9; } .butto..

웹 페이지의 레이아웃 구성에 가장 중요한 스타일 속성이다. 이 절에서는 border속성을 제외한 width, height, margin, padding속성에 대해 알아보겠다. width 속성과 height 속성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 CSS Property Basic div{ width: 100px; height: 100px; background-color: red; } Colored by Color Scripter cs 위코드를 실행하면 div태그의 너비와 높이가 100픽셀로 지정되었음을 확인 가능하다. 그렇다면 div태그 내의 문자들이 박스영역을 벗어날정도로 많이 쓰이면 어떻게 될까? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ..

태그가 화면에 보이는 방식을 지정하는 속성이다. html5 시대가 되면서 다양한 display속성이 존재하게 되었다. 하지만 모든 display속성을 제대로 지원하는 웹브라우저는 없다. 따라서 예제 코드와 함께 제일 중요한 속성 몇가지만 정리한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 CSS3 Style Property Basic Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dummy Colored by Color Scripter cs none 화면상에서 해당태그를 사라지게 만든다. 1 2 3 4 5 #box{ display : none; } cs 이는 태그의 존재를 지워버리는것이므로 레이아웃 자체를 변경시킬수도 있..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #a{color : rgb(82,124,180)} #b{color : #32F6A4} AAA BBB Colored by Color Scripter cs

font-size 기능을 이용하여 문자의 크기를 조정가능하다. 이때 단위는 크게 px와 rem 2가지로 나뉜다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #px{font-size:16px;} #rem{font-size:1rem;} PX REM cs 이제 웹브라우저의 설정창에서 글꼴의 크기를 줄여보겠다. 기존의 16으로 설정된 크기를 9로 줄여본다. 단위를 px로 설정한 문자PX는 그대로지만 rem으로 설정한 REM은 작아젔다. 즉, 사용자에게 글자 크기의 조절을 위한 권리를 주고싶다면 rem단위로 설정하는것이 유용하다.

각 element의 상태에 따라 여러가지 특수한 선택들을 가능케 하는 선택자이다. 클래스 선택자처럼 행동하지만 클래스 선택자는 아니다. 1234567891011121314151617181920212223242526272829303132333435363738394041 a:link{ /*방문 안한곳일 경우 글자색 변화*/ color : black; } a:visited{ /*이미 방문한 링크일 경우 글자색 변화*/ color:red; } a:hover{ /*마우스를 올릴경우 글자색 변화*/ color:yellow; } a:active{ /*좌클릭 중일 경우 글자색 변화 좌클릭할경우 hover와 active가 동시에 활성화 되며 나중에 있는것이 최종적으로 덧씌워지기 때문에 active를 hover보다 뒤로 ..