shine의 개발 노트

** 웹프로그래밍? : 웹어플리케이션을 만드는 행위 ** 웹어플리케이션이란? : 웹을 기반으로 동작하는 프로그램을 의미 ** 웹? : 인터넷 서비스의 형태 의미 ** 인터넷? : 하나 이상의 네트워크가 연결되어 있는 형태를 의미 1. JAVA 웹 : JAVA플랫폼(JavaSE, JavaEE, JavaME)중에서 JavaEE를 이용한 웹프로그래밍 [상식!] 오라클이 JAVA플랫폼 중의 JavaEE를 아파치에 팔았으나 이름은 팔지 않았기 때문에 자바라는 이름 대신 jakarata를 사용하고 있다고 한다. 2. 웹프로그램의 동작 웹 브라우저 -> request -> webServer -> WebApplicationServer -> 데이터베이스 웹 브라우저 웹어플리케이션 서버] : 톰켓이 이 역할을 하고 있음 ..

1. JSP 개발 환경 설정(Tomcat 9 설정하기) 1) 서버 설치할 디렉토리 만들기 : C드라이브에 tomcat 폴더 만들기 2) Tomcat 서버 다운로드 : 구글에 톰켓 검색, tomcat.apache.org/ > Download > Tomcat 9 클릭 > core의 64bit Windows zip 다운 3) C드라이브에 만든 tomcat 폴더에 다운받은 파일 압축 풀고 복사 4) Eclipse 와 연동 ① Server 뷰 띄우기 : Window > Show view > Servers ② Tomcat Server 정의 : No servers are available. Click this link to create a new server... 클릭 > Apache, Tomcat v9.0 Serv..

1. 주제/소재 자유 2. 분량 : 3~5 페이지 내 (메인페이지 포함) 3. 사용 기술 : HTML, CSS, JavaScript (필수) 4. 제작 툴 : 자유 5. 옵션 : jQuery (추천 + 포인트) 반응형 웹 (추천 + 포인트) AJAX 사용한 동적인 웹 (추천 + 포인트) 6. 모든 웹 리소스는 myweb/ 폴더 이하에 작성하세요 7. 최대 용량 2M를 넘지않게 해주세요. (외부 리소스 링크 가능) 8. 최소한 한 페이지 (이상)은 form 적용 (필수), form validation 기획 구현 9. 메뉴를 활용한 네비게이션 구현 (필수) 10. CSS, JS 는 기본적으로 external 방식으로 외부 파일로 만들기 [내가 만든 결과물] ** UI 설계 문서 작성(화면흐름도 flow ch..

1. JS(JavaScript)는 Prototype 기반 언어(Prototype oriented language)이다. 2. 15_비구조화할당.js // const 상수 const ironman = { name: '토니 스타크' , actor: '로다쥬' , alias: '아이언맨' }; const captain = { name: '스티브로져스' , actor : '크리스 에반스' , alias: '캡틴 그분' }; console.log(ironman); console.log(captain); // 객체를 매개변수로 받기 function print(hero){ let text = `${hero.alias}(${hero.name}) 배우: ${hero.actor}`; console.log(text) } p..

1. 레이어드 팝업 ** ModalBoxes1.html Modal 팝업 × 팝업창의 내용입니다. 어쩌구 저쩌구 ** ModalBoxes1.css @charset "UTF-8"; .modal { width: 100%; /* 윈도우 전체 차지 */ height: 100%; /* 윈도우 전체 차지*/ position: fixed; background-color: rgba(0, 0, 0, 0.4); left: 0; top: 0; z-index: 1; /* 최상단에 보이게 하기 */ overflow: auto; /* 필요한 경우 스크롤바 생기기 */ display: none; /* 기본적으로 팝업 안보이기 */ } .modal-content { width: 80%; background-color: #FEFEFE;..

1. jQuery010_AJAX4.html : 어제 코드에서 form element 의 serialize()를 사용하여 재작성함 $.ajax()+post : 도로명 주소 현재페이지: 페이지당출력개수: 승인키: 검색어: 2. jQuery008_Dimension1.html btn01 dimension btn02 set width&height btn03 doc & window btn04 anim btn05 position 3. jQuery008_Dimension2.html 화면을 클릭해보세요! 4. jQuery009_DomTraversing1.html body div div ul li span div p span div (parent) #sibling p span h2 h3 h4 h5 h6 p btn11 pa..

1. 온라인 프로토타이핑 툴(웹 기획, Oven) : https://ovenapp.io 2. 프레임워크 : 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것 3. jQuery001_Intro.html 없어지는 마술을 보여줄께. 요것도. 따다~~! 4. jQuery001_Intro2.html jQuery로 없어지는 마술을 보여줄께. 요것도. 따다~~! 5. jQuery001_Intro3.html Hide 버튼을 누르면 사라지는 매직! Hide Show 6. jQuery002_Syntax.html jQuery 기본구문 p 요소 입니다 이것도 p 요소 입니다 클릭 7. jQuery003_Selector1.html This is a headin..

1. Js008_BOM1_window.html window 객체 전역 변수 x : 전역 변수 x 3증가 : a = 40 : a = a + 20 : : : open() 함수 open() close() ** Js008_BOM1_pop.html ~~~ 닫아보세요 ~~~ 닫기 2. Js008_BOM2_screen.html 3. Js008_BOM3_location.html location assign() location.href = reload() 4. VSC workspace 설정 해지 : 단축키 Ctrl + Shift + P > remove 검색 > Workspaces: Remove Folder from Workspace... 클릭 > Select workspace folder를 현재 작업페이지로 선택 > F..

1. [과제] Css013_RWD_practice1.html ** 과제를 하면서 배운점 : 직접 생각하고 만들어보면서 반응형 웹 기술(RWD) 대해 확실하게 알게 되었다. 2. HTML에서 JS 적용하기 1) inline 방식 2) internal 방식 3) external 방식 3. Js001_Intro.html 1. JavaScript 는 Content 를 바꿀수 있다 클릭하면 날짜와 시간이 보여집니다. 클릭하면 Content 가 바뀝니다 클릭해보세요 2. JavaScript 는 attribute 를 바꿀수 있다 Light On Light Off 3. JavaScript 는 Style 를 바꿀수 있다 마우스를 올렸다, 내렸다 해보세요. ** myScript.js /** * JS의 external 방식..

1. Css_RWD5_Image1.html Responsive Images 브라우저 윈도우를 확대 축소 시켜서 확인해보세요 2. Css_RWD5_Image2.html 브라우저 창 크기를 조정해보세요 background-size: contain background-size: 100% 100% background-size: cover 3. Css_RWD5_Image3.html Resize the browser width and the background image will change at 400px. 4. Css13_RWD6_SideBar.html Home News Contact About Responsive Sidebar Example This example use media queries to tran..