목록전체 글 (659)
겉바속촉
이번 목표는 1. 마우스 이벤트 객체 2. id값 지정한 곳에 출력해내기 먼저 마우스 이벤트에 대해서 만들어볼게요:) 사진 두장을 가지고 왔어요!! 마우스를 올렸을 때, 내렸을 때 사진에 변화가 오도록 코드를 작성해보려고 합니다:) 이따가 id값에 대해서 만들기 위해 버튼도 미리 작성해두었습니다 마우스를 올렸을 때 --> onmouseover 마우스를 내렸을 떄 --> onmouseout 그리고 컴파일 해보시면!! 마우스 안 올렸을 때 마우스 올렸을 때 이제 click me 에 대해서 효과주기 촛불 사진 위에 click me라는 button을 아까 만들어두었죠?? 그걸 클릭하면 안녕하세요가 뜨게 해볼게요 바로 id 지정한 곳에 뜨게 하는 방식입니다:) 버튼 누르면!! 다음과 같이 뜨는 게 보이시쥬?! 이..
이번에는 popup창을 만들어보도록 할게요!! 1. 자바스크립트 소스 파일 생성! 2. function 작성 window. open( url, 이름, 스펙) --->이렇게 해주시면 됩니다:) pop1과 pop2에 대해서 function 만들어주세요 pop1은 갖고있는 이미지가 뜰 수 있도록 pop2는 naver사이트로 이동될 수 있도록 만들고 싶습니다:) 코드와 함께 확인해주세요~ popup.js /** * */ //웹브라우져 새창열때 가장 간단(url, 이름, 스펙) function pop1() { window.open('../image/popup3.jpg','Event','width=430,height=430,scrollbar=yes,status=no'); } function pop2() { wind..
이번에는 재미있게 수강신청 했는지 물어보는 html을 꾸며봅시다:) 다음과 같이 우선 코드를 작성해주세요 질문은 태그를 활용해주시구요 수강신청 하셨나요? 수강신청확인 을 활용해서 이름을 넣어주었습니다 이라고 해주었구요:) 을 활용하시면 다음과 같은 결과가 나옵니다 이제 button을 만들어주세요 예, 아니오 가 써져있는 button입니다:) 수강신청 하셨나요? 수강신청확인 컴파일 해보시면 다음과 같이 나옵니다:) 이제 예 아니오 누르면 무언가 변화가 생기게 해주고싶어요:) 그럼 자바스크립트 활용해주시면 되겠쥬? function 2개를 각각 만들고 onclick에 소환해주세요! 전체 코드블럭은 수강신청 하셨나요? 수강신청확인 예 누르면 아니오 누르면
스크립트 안에다가 sampleConfirm명을 가진 함수를 만들었습니다:) 이 함수는 if문을 활용해줄게요 그래서 좋아요? 라고 물어봤을 때 확인 , 취소를 누른 결과가 alert창으로 뜨게 해줄게요! 다음과 같이 작성해주세요:) body부분을 보시면 button을 하나 만들었죠?? button에 써져 있는 값은 click me!! 라고 주었습니다:) click me 를 누르면 이동하게 해주려고 onclick="" 이라고 넣어줍니다 그리고 스크립트에서 작성해준 함수를 불러오는 거에요:) onclick에다가!!!!!!!!!!!! 완성된 전체 코드블럭 확인 누르면 취소 누르면
우선 함수의 종류에 대해서 알아보도록 할게요:) 1. 파라메타 와 리턴값이 없는함수 function 함수이름() { } 2. 파라메타 만 있고 리턴값이 없는함수 function 함수이름(pa1,pa2){ } 3. 파라메타 와 리턴값이 있는함수 function 함수이름(pa1,pa2){ return 반환값; } 함수명 형태에 따른 분류 1. 가장 기본적인 함수 function hello(){ document.write("자바스크립트 시작~"); } hello(); 2. 리터럴 방식-->함수명=function 형태 hello2= Function(){ document.write("리터럴 방식 함수 만들기"); } hello2(); 3. 이름없는함수...주로 어떤 내용을 외부와 완전히 분리시킬때 (functio..
이번에는 형변환에 대해서 알아보도록 하겠습니다. 다음과 같이 코드를 작성해주세요~ 여기서 사용하는 prompt는 두개의 인수를 받습니다. 실행이 되면 메세지, 입력란, 확인, 취소 버튼이 있는 창이 뜹니다. var num=prompt("메세지내용", "기본값"); /* prompt는 문자만 출력 */ var num=prompt("숫자입력", "0"); document.write(typeof(num)); 컴파일을 해보시면 다음과 같이 뜨게됩니다. 입력란에 숫자를 입력해보니 다음과 같이 string 이라고 뜨네요:) 이번에는 다음과 같이 코드를 작성해주세요 prompt를 또 이용해볼게요:) 수를 3가지 입력할 수 있도록 해볼거에요 그래서 3가지의 수 합이 나올 수 있게 해볼게요!! 여기서 포인트는 promp..
설치해주셔야 될게 있어요 아래링크 복사하신 후에 http://oss.opensagres.fr/tern.repository/1.2.0/ Index of /tern.repository/1.2.0 oss.opensagres.fr 이클립스 들어가시고 프로젝트 파일에서 우클릭 - Configure - Covert to Tem Project.. 클릭 그리고서 뜨는 팝업창에서 체크해주세요:) 체크할 사항들---> Browser, CKEditor, jQuery 세가지 체크체크체크 해주세요:) 그리고 Apply and Close 해주시면 됩니다~ 이제부터 자동완성이 가능합니다!^^! 지금부터 자바스크립트 시작입니다!! 오예!! alert이용해서 경고창이 뜨게 해줄게요:) 다음 코드를 살펴 보시면 바로 다음줄에 까지 치시..
이제 audio랑 video도 넣어볼 줄 알아야합니다:) 먼저 audio로 음악듣기를 해볼게요?? html파일 하나 생성해주신 후에 body사이에 다음과 같이 코드 작성해주세요 html5에 추가된 Audio&Video Audio로 음악 듣기 이미지 파일 넣어주듯이 가지고 계신 오디오파일 복사하신 후에 폴더에 붙여넣기 해주세요:) 그 다음 라고 해주시는 거에요 우리는 또 음악파일을 컨트롤 해줄 컨트롤 박스가 필요하겠죠?? 그래서 controls="controls"를 추가해주시면 됩니다 전체는 그리고 컴파일 해보시면 다음과 같이 나오것이쥬?! 블럭 하나 더 넣어주세요:) 이제 video 넣어주시면 됩니다!! 다음과 같은 코드를 작성해주시는데요 과정은 오디오 파일을 넣는 과정과 동일합니다. 여기서 포인트는 o..
우선 head까지 다음과 같이 작성해주세요:) 그리고 사이에 생성해주세요! 그다음 넣어주시고 시작해보겠습니다:) 행을 하나씩 넣어줄게요 블럭안에서 작성해주시면 됩니다 최종학력을 선택하세요 고등학교 전문대학 대학교 대학원 그리고 컴파일 해보시면 다음과 같이 나옵니다 아마 체크가 가능하실 거에요!! 행 추가; 본인이 가능한 컴퓨터 언어는? 본인이 가능한 컴퓨터 언어는? C언어 JAVA Spring Android 컴파일 이것 역시 체크가 가능합니다 행 추가; 이미지 선택 이미지선택 컴파일 파일 선택을 누르시면 파일탐색기가 열릴 거에요:) 행 추가; 우리반에서 가장 좋은사람? 우리반에서 가장 좋은사람? 보라돌이 뚜비 나나 뽀 텔레토비 컴파일 고를 수 있게 뜹니다:) 행 추가; 당신의 키는 몇cm입니까? 당신의 ..
이제 미적인 부분들을 추가해보려고 합니다 보기 좋은 떡이 먹기도 좋다는 말이 있잖아요?? 우리는 이제 CSS를 활용할 줄 알기 때문에 style 태그를 사용해줄게요? 2020/06/10 - [취업일기/블록체인] - [html] css 테스트 [html] css 테스트 웹 페이지에다가 기사를 정리보려고 합니다! 원하는 기사를 가지고 와서 블럭 사이에 넣어주세요:) 그리고서 제목, 소제목들 정리해주어야 하기 때문에 h1, h2 태그를 사용했습니다. 그리고 이제 2-juhyun-2.tistory.com 다음과 같이 작성해주세요:) 1. , 태그로 제목과 소제목 분류 2. 각 문단은 태그를 적용 + 클래스명 부여 ---> 3. 로 css설정 글꼴 -> font 배경색 -> background-color 영역 안..
혁오의 위잉위잉을 예쁘게 꾸며볼게요:) 일단 가사를 가지고 와서 붙여넣기 해주신다음 여러가지 태그들로 문장 하나씩 구분을 해주시면 됩니다 그리고 실행해주시면 다음과 같은 창이 뜨겠죠? 이제 이미지를 넣어줄건데요 가지고 계신 이미지를 복사해서 eclips창으로 오신 후에 WebContent - image폴더 클릭 - 붙여넣기 그리고 작성해주셔야합니다 저는 가사 맨 밑에다가 사진 넣어주었어요!! 넣고 싶은 위치에다가 넣어보세요:)
웹 페이지에다가 기사를 정리보려고 합니다! 원하는 기사를 가지고 와서 블럭 사이에 넣어주세요:) 그리고서 제목, 소제목들 정리해주어야 하기 때문에 h1, h2 태그를 사용했습니다. 그리고 이제 강아지 그림을 넣어볼게요:) image 폴더를 하나 생성해주신 후에 1. 가지고 있는 사진파일들 복사 2. image폴더에 붙여넣기 사진을 넣고 싶은 위치를 확인해줍니다:) 사이사이에 이런식으로 작성해 주시면 되는 거에요!! alt 속성은 이미지를 찾을 수 없을 때 출력될 텍스트입니다. 꼭 지정해주셔야해요:) 그리고 해당 폴더명을 src 속성에 저장해주세요 그리고 컴파일 해보시면 다음과 같이 강아지 사진들이 코드가 작성된 위치에 들어가게 됩니다:) 이제 우리는 CSS코드를 사용하려고 합니다 우리가 바꾸고 싶은 스타..
이번에는 여러가지 태그를 연습해보도록 할게요. 1. 우선 Hello~Html~~~ 적어주신 후에 양쪽에 해주시고 나머지는 다음 그림과 같이 적어주세요!! 그리고 컴파일해보시면 태그만 해준 부분이 bold처리 되어있습니다 2. pre 태그는 한마디로 enter라고 생각하시면 됩니다. 우리가 입력해준 화면에 보이는 그대로 줄바꿈이 크롬창에서도 그대로 줄바꿈이 되는 것이쥬!! 3. 은 선을 그어주는 것인데요 다음 그림처럼 (1) ----> 그냥 선 (2) (3) ---> width는 폭, 너비 size는 굵기 4. align 추가 align ---> left, right, center 처럼 어디에 배치할지!! 5. 태그는 문단처리라고 봐주시면 됩니다 위와 아래 줄이 간격이 생기게 되는 것이죠!!! 그럼 위에서..
참고하면 좋은 사이트 https://www.w3schools.com/css/ CSS Tutorial CSS Tutorial CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. Start learning CSS now » Examples in Each Chapter This CSS tutorial www.w3schools.com 자 tomcat은 모두 설치하셨죠?? 2020/06/09 - [취업일기/블록체인] - Tomcat 설치하기 Tomcat 설치..
html을 들어가기 전에 Tomcat을 설치해 주셔야되겠죠?? google창에서 Tomcat을 검색해주세요 사이트에 접속하신 후에 tomcat9클릭 64-bit Windows zip 클릭 다운 받으셨으면 압축파일까지 풀어주세요:) 그리고 이클립스 켜주신 후에 file - new - other 팝업창이 뜨면 Dyna..검색하셔서 뜨는 Dynamic Web Project 클릭 - next project name 설정해주세요!! 다시 또 file - new - other 새로 뜨시는 팝업창에서 html검색하시고 HTML File 클릭 후 next 다시 또 new - other - server검색 후 클릭 - next 그 다음 Apache 폴더에서 우리가 다운받아준 Tomcat 9.0 server 클릭 - ne..