madori4 madori4

문서에 같은 태그가 여러가지 있는 경우 class나 id를 사용해 제어할 수도 있지만 jQuery에서는 빈번하게 사용되는 패턴의 탐색들에 대해 미리 정의해놓았다. 그중 : 필터를 통해 여러 방법으로 태그에 접근하는 PSEUDO Classes와 그것을 보완하기 위해 나온 DOM Traversing에 대해 포스팅. 1) 특정 구간의 처음과 끝 태그에 접근하는 방법. 'destinations'를 id로 가지고 있는 태그의 li 태그 중 첫번째와 마지막 태그에 ':first', ':last' 키워드를 통해 접근할 수 있다.2) 마찬가지로 ':odd'와 ':even' 키워드로 홀수, 짝수 태그에 접근할 수 있으며, 이때 처음 시작하는 태그의 index가 0이기 때문에 짝수부터 시작한다는 점에 유의하자. 다음과 같..

자바스크립트에서도 css와 같이 원하는 태그만을 취사선택 해 각기 다른 디자인을 할 수 있다. css 포스팅에서 말했었던 Cascading( > ) , 클래스, id에 대해 각각 다른 디자인을 부여할 수 있다. 다음과 같이 태그, id, class에 대해 $("셀렉터명") 을 통해 접근할 수 있다.다음 명령어는 destinations 라는 id를 가진 태그의 하위에 있는 모든 li를 가리킨다.바로 아래 단계의 li 태그들만 탐색하고 싶다면 css와 마찬가지로 '>' 기호를 사용한다. 예제를 통해 확인해보자. ※모든 예제는 아톰(atom)으로 코드 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러..

jQuery는 JavaScript Query의 약어로 자바스크립트 라이브러리이다. 자바스크립트만으로 작성하기 복잡한 기능들에 대해 함수로 구현해 둔 것이다. 특정 태그의 값을 읽어오기 위해 자바스크립트에서 사용했던 번거로운 절차를 줄여준다는 말이다. 자바스크립트에서는 문서의 모든 태그들을 객체화 해 브라우저에 DOM(Document Object Model) 형태로 저장한다. 다음과 같이 문서를 DOM 형태로 변환하는 작업을 렌더링이라 한다. 이를 통해 각각의 태그들을 객체화 해 이들에 하나하나 접근하고 제어할 수 있다. 객체화 된 태그들을 자바스크립트에서는 Element라 칭한다. 예를 들어 h1 태그의 Text 값을 읽어오고 싶다면 var h1 = document.getElementByTagName("..

CSS 는 Cascading style sheet의 약자로 웹페이지를 꾸미기 위한 스타일들을 저장해두는 문서이다. jsp 페이지에서 사용할 css 파일을 등록한 후 div 태그중 "class"를 통해 css 파일에 작성해 둔 클래스를 적용시키는 방식으로 사용한다. 예제를 통해 확인하자. 1. signUp.jsp 파일. 회원가입 페이지를 작성하는 데 css를 적용시킨다. 1) css 파일을 import 하는 방법. link를 통해 rel, type을 다음과 같이 등록하고 href에는 경로를 작성해준다. 이때 경로는 프로젝트명/ContextRoot 이후의 경로를 작성해주면 된다. Context root를 모른다면 이전 포스팅 참조. 2) div의 class에서 css에서 지정해둔 클래스명을 적는다. 이후 닫..

java와 jsp 두가지 언어가 혼합되어 있는 코드 작성 방식을 Model 1이라고 한다. 코드가 길어지면 굉장히 복잡해져 알아보기 힘들어지는 경우가 빈번하다. 이를 극복하기 위해 jsp와 java를 분리하려는 시도를 했고, 그 결과 등장한 객체가 서블릿(servlet)이다. Client는 URL을 통해 원하는 파일의 정보를 요청(Request)한다. 이때 Tomcat은 Client로부터 받은 URL을 통해 서버에 요청한 파일이 있는지 없는지 확인하고 그에 대한 결과를 Client에 반환(Response)하는 역할을 한다. 이것이 HTTP의 기본 동작 원리이다. 이러한 요청들 중 특정 url들에 대해서 Web.xml에 등록을 해놓으면 해당 url에 대해서는 Tomcat이 아닌 Servlet을 통해 브라우..

톰캣(Tomcat)에서 url 요청을 받으면 web.xml에 등록되어 있는 url pattern에 대해서는 해당 서블릿이 수행돼 그 결과를 response 객체에 담아 톰캣에 반환한다. 이때 필터(Filter)를 두어 서블릿들에서 중복되는 로직을 한번에 처리할 수 있다. 필터에는 주로 인코딩, 로그인 체커 로직을 담는다.필터 또한 web.xml에 등록되어 있으며, web.xml에서 호출 우선순위가 서블릿보다 높음을 짐작할 수 있다. 작성 절차 1. common.web 패키지 만들어 관리한다. 만든 common.web 패키지에 마우스 오른쪽 - New - Others 클릭2. filter 입력해 찾아 클릭 후 Next3. 이름 입력 후 Next4. url 자동 작성 되어 있다. Edit 버튼 클릭5. ur..

서블릿이 익숙하지 않은 경우 파일 경로에 대한 고민을 분명히 할 것이다. 필수적인 위치명 두가지 Context path와 Context root 에 대해 설명. Context Path : 프로젝트 명을 의미하며 url의 호스트, 포트명 다음에 나온다. Context root : Content directory의 경로. 해당 경로에 메타 정보와 웹 정보를 관리하는 META-INF와 WEB-INF 파일이 자동생성되며 JSP파일은 여기 하위에 저장되어야 경로를 찾을 수 있다. Dynamic web project 생성시 마지막 페이지이다. 작성 중 url mappings는 path로 설정했다. 따라서 이를 url에 넣어줘야 한다. Context root와 Content directory의 경로를 설정할 수 있는..

JSP 체크박스(checkbox), 셀렉트/옵션(select/option) 는 웹사이트를 구성하는 데 필수적인 태그들이다. 실무 사용 패턴 포스팅 1. 체크박스 빨간 박스 부분으로 태그당 하나가 생성된다. 체크박스의 특징은 특정한 데이터만을 취사선택 할 수 있다는 것이다. JSP에서는 이를 지원하기 위해 name 속성을 제공한다. 같은 name 속성을 가지고 있는 태그들의 값을 서블릿에서 String 배열로 받을 수 있다. 서블릿은 배열을 받기 위해 사용하던 메소드 request.getParameter 대신 request.getParameterValues를 사용한다. 2. 셀렉트 / 옵션 셀렉트는 녹색 박스 부분으로 여러가지 옵션 들 중 하나를 선택할 수 있는 박스를 의미한다. 여기서 셀렉트는 옵션들을 ..