본문 바로가기

웹 프로그래밍 기초162

자바기반의 웹&앱 응용 SW개발자 양성과정 56일차 -87 for in 반복문 자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in 반복문을 제공한다. start.addEventListener("click", function st() { // boxs[0].classList.add("pose1"); // boxs[1].classList.add("pose2"); // boxs[2].classList.add("pose3"); for (var i in boxs) { boxs[i].classList.add("pose1"); } 일반적인 for문은 java와 비슷하다. var rotateIndex = 0; spin.addEventListener("click", function st() { // boxs[0].classList.add("pose1"); //.. 2020. 5. 25.
자바기반의 웹&앱 응용 SW개발자 양성과정 55일차 -86 콜백 함수란? 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. js에서 css문법을 지원하지 않으므로 box.style.background-color = colorInput.value; 로 작성 시 오류가 발생한다. 해결방법 1 box.style ["background-color"] = colorInput.value; 해결방법 2 box.style.backgroundColor = colorInput.value; HTML 상에서 script태그 위치 script태그를 body상단에 위치시켰을 때 오류가 발생한다. 그 이유는 실행 순서에 있다. 프로그램의 절차는 위에서 아래로 읽어 가기 때문에 자바스크.. 2020. 5. 22.
자바기반의 웹&앱 응용 SW개발자 양성과정 54일차 -85 HTML5 API 멀티미디어 네트워크 통신 로컬 저장소 애플 플랫폼에서는 호환이 잘되지 않는다. 브라우저 객체 window 자바스크립트 코드로 창을 제어할 수 있습니다. console창에서 window.open("http://www.daum.net"); window.close(); 를 실행하면 알 수 있습니다. window의 중요 객체 window.loaction Location 인터페이스는 객체가 연결된 장소(URL)를 표현합니다. Location 인터페이스에 변경을 가하면 연결된 객체에도 반영되는데, Document와 Window 인터페이스가 이런 Location을 가지고 있습니다. 각각 Document.location과 Window.location으로 접근할 수 있습니다. window.history.. 2020. 5. 21.
자바기반의 웹&앱 응용 SW개발자 양성과정 54일차 -84 DB구축 실세계 - 요구사항 수집 분석 먼저 실제 세계에서 어떤 시스템을 구축할 것인지에 대한 요구사항을 수집합니다. 요구사항에 대해 어떤 데이터들이 필요한지, 어떤 기능들이 필요한지 분석합니다. 개념적 설계 ER 다이어그램을 통해 요구사항을 개념적으로 표현합니다. 논리적 설계 관계 모델(Relation model)을 통해 개념적 설계를 논리적으로 표현합니다. 물리적 설계 실제 디스크와 같은 물리 저장장치에 데이터를 저장할 수 있도록 표현합니다. 회원이 무슨 행위를 하나. 행위로 인한 결과의 데이터가 쌓임 결과에 대한 여러 가지 행위에 대한 데이터를 넣을지의 진위를 판단. 그러한 행위는 주체와 대상과의 관계인 3 형식 3 형식? 가?을? 하다. 대상과 대상의 관계이며 대표적으로 포함관계가 있는 4 형식 .. 2020. 5. 21.
자바기반의 웹&앱 응용 SW개발자 양성과정 53일차 -83 파일 업로드하기. 글쓰기 페이지에서 제목과 내용 그리고 사진을 저장한 뒤 post를 했을 경우 개발자 도구의 Network화면이다. 데이터를 인코딩한후 서버에 보냈는데 파일은 전송이 되지 않았습니다. 왜냐하면 전송되는 타입은 문자열이 기본이기 때문이다. 즉 쿼리 스트링을 보내는 것처럼 url로 인코딩해서 보냈습니다. 파일을 전송하고싶다면 보내는 쪽의 설정을 변경합니다. form태그 안에서 전송방식의 기본 타입을 확인할 수 있습니다. 여러 가지 타입을 받기 위해 우리는 설정을 변경해 줍니다. multipart/form-data는 파일 업로드가 있는 양식 요소에 사용되는 enctype 속성의 값 중 하나이고, multipart는 폼데이터가 여러 부분으로 나뉘어 서버로 전송되는 것을 의미합니다. 요소의 met.. 2020. 5. 15.
자바기반의 웹&앱 응용 SW개발자 양성과정 52일차 -82 수정 페이지 수정 버튼 눌렀을 때 edit페이지 구현하기. 수정을 할 경우 가져가야 할 param은 페이지에 대한 id와 수정할 제목 , 내용이다. 폼을 edit컨트롤러에 연결해주고 name값이 title , content, id값을 getparameter로 컨트롤러에서 받는다. 공지사항 수정 제목 작성일 ${n.regdate} 작성자 ${n.writerId} 조회수 ${n.hit} 취소 컨트롤러에서는 비즈니스 로직을 처리한 뒤 비단으로 보낸다. 그리고 자신이 수정할 페이지를 확인할 수 있도록 해당 id의 detail페이지로 sendRedirect 해줍니다. package com.newlecture.web.controller.admin.board.notice; import java.io.IOExcepti.. 2020. 5. 14.
자바기반의 웹&앱 응용 SW개발자 양성과정 51일차 -81 tiles 집중화하기 tiles.xml에서 우리는 조각된 jsp를 layout파일에 붙여서 view단으로 전 송하기 위해서 각 설정을 해주었다. 이렇게 반복되는 것은 무조건 줄이는 방법이 있기 마련 이에 대한 해답은 Asterisk*입니다. 첫 번째 * 애스터리스크는 {1}과 매칭 되며 두 번째 * 는 {2}와 매칭 됩니다. 만약 너무 *을 많이 사용하게 되면 메모리나 무한루프에 빠질 수도 있습니다. 전산화 모든 업무 시스템은 전산화가 이루어지고 있다. 전산화는 업무시스템에서 문서라는 것을 전산화하는 것이다. 업무 시스템을 분석한다는 것은 행위자에 대한 분석입니다. 행위자는 우리는 액터라고 하는데 액터를 구분 짓는 방법은 행위로 구분을 짓습니다. newlecture에서 액터는 관리자 학생 선생님 들이 남.. 2020. 5. 12.
자바기반의 웹&앱 응용 SW개발자 양성과정 51일차 -80 Layout 집중화 jsp 액션 태그들은 view단에서 객체를 생성한 뒤 속성 값을 가져오도록 하는 예전 방식인데 이러한 방식들은 MVC방식에 어긋나는 방법입니다. 잘 사용하지 않지만 html의 코드의 반복을 줄이고 다른 페이지의 실행 결과를 현재의 페이지에 포함시킬 때 jsp의 액션 태그인 include를 사용합니다. 문법 예를 들면 문서상의 구조(header부분, footer부분)를 직접 복사해 다른 페이지에 붙여 넣고 수정하는 작업을 했습니다. 만약 header와 footer가 변경된다면 수많은 페이지를 직접 수정해야만 했는데 이러한 페이지를 하나의 페이지에 모아서 공유하여 관리를 편하게 하도록 위함입니다. 하지만 각 각의 html에 를 전부 넣는 것은 별로라고 생각할 수 있습니다. 따라서 tile.. 2020. 5. 11.
[CSS]all , unset , box-shadow , IR기법 ALL 속성 CSS 프로퍼티인 ALL은 부모로부터 전달받은 속성이나 현재 자신이 가지고 있는 모든 CSS속성을 제거할 수 있도록 도와줍니다. initial : 초기값으로 설정됩니다. inherit : 부모의 속성 값을 상속받습니다. unset : 초기 및 부모의 스타일 속성을 전부 제거합니다. 우리는 css의 초기값 설정을 위해 reset.css 파일을 import 해서 사용하기도 하는데 그 대신에 all : unset으로 초기 설정을 할 수 있습니다. UNSET 속성 CSS unset 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속 값을, 그렇지 않다면 초기값을 사용합니다. 전자 일 땐 inherit 키워드처럼 후자일 땐 initial 키워드처럼 동작합니다. BOX-SHADOW 속성 bo.. 2020. 5. 7.
CSS 상속과 우선순위 CSS의 스타일을 적용하는 여러 가지 방법 중 상속이라는 것이 존재합니다. 상속은 대표적인 CSS적용 규칙인데 중복된 속성을 매번 적용하는 일을 줄여 재사용성을 늘릴 수 있습니다. 상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 스타일을 매번 주지 않아도 됩니다. 하지만 모든 CSS 속성이 상속이란 특징을 갖게되면 문제가 발생합니다. 예를 들어 부모의 크기인 width속성이 상속된다면 하위 엘리먼트가 모두 같은 넓이 값을 가져버리게 되므로 문제가 발생되게 됩니다. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, boder)와 같이 크기와 배치에 관련된 속성들은 하위 엘리먼트로 상속이 되지않습니다. 또한 css적.. 2020. 5. 6.

티스토리툴바