반응형 개발/Front-End19 이미지의 특정영역에 마우스 이벤트를 발생시켜야 할 때 프론트엔드 개발을 하다 보면 이미지의 특정영역에 마우스를 over, leave, click등의 이벤트를 발생시켜야 하는 경우가 있다. 이 때, 이미지를 div 태그 안에 img 태그를 사용하여 이미지를 띠우고 해당 div를 position: relative로 지정한다. 그리고 이벤트를 발생시킬 영역을 div로 만든다. 이 때, 안 쪽에 배치되는 div의 style은 이다. 위의 그림에서 보면 검은 박스가 이미지를 넣는 div 태그이며, 빨간색 박스는 이벤트를 발생시키기 위해 배치하는 div이다. 2번 div는 1 번 div 영역을 벗어날 수 있다. 하지만 좌표 위치는 바깥 div의 시작좌표와 동일하다. 이제 div의 배치를 지정해줘야 한다. absolute로 position을 지정하면 아래의 css 속성.. 2018. 2. 9. 반응형 페이지 만들 때 css 1. div로 각각의 영역을 지정한다. 2. width는 %로 지정하고, height의 경우 margin, padding으로 지정한다. div로 다른 태그들을 감싸고 있다면 padding과 margin을 추가하기가 수월하다. 3. ul, li 태그의 경우 div태그 안에 넣는다. ex) 단, li 태그의 경우 height가 원하는 대로 지정이 안될 때가 있다. 그 때는 li태그에 display:inline-block을 이용하여 높이를 지정하면 된다. 4. display:inline-block은 유용한 속성이긴 하지만 남발하면 나중에 괴로워질수 있다. 2018. 2. 5. JSP 페이지 구성 요소 - 스크립트 요소 - 스크립트 요소란? JSP 페이지에서 자바코드를 사용할 수 있는 영역을 의미합니다. - 스크립트 요소의 종류 선언문(), 스크립트릿(), 표현식() 3가지 입니다. 아래는 스크립트를 사용한 예제 파일입니다. 1. 선언문 () JSP 페이지의 멤버 변수 및 멤버 메소드를 선언할 때 사용합니다. JSP 페이지가 서블릿으로 파싱되면 자신의 workspace 폴더를 클릭 후 아래 경로와 같이 파일을 찾습니다. workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\프로젝트명\폴더명\파일명_jsp.java 이 파일을 확인해보시면 위의 사진 코드에서 선언된 멤버 변수와 메소드가 아래와 같이 보입니다. 지정된 Enco.. 2017. 11. 13. JSP 페이지 구성 요소 - Page directive(페이지 지시어) , , 로 3가지가 있습니다. 1. 란? 클라이언트의 요청에 의해 실행되는 JSP 페이지의 필요한 정보를 지정합니다. 속성 사용법 기본값 설명 info info = "설명" - 페이지를 설명하는 문자열을 지정하는 속성 extends extends="클래스명" - 상속받을 클래스를 지정 import import="패키지,클래스명" - import할 패키지, 클래스를 지정 session session="true" true HttpSession의 사용 여부 지정 buffer buffer="12kb" 8kb JSP페이지의 출력버퍼의 크기를 지정 autoFlush autoFlush="true" true 출력버퍼가 다 찼을 경우 처리방법을 지정 isThreadSafe isThreadSafe="true" true 다.. 2017. 11. 11. 이전 1 2 3 4 5 다음 반응형
