box 크기 = border(윤곽) + 컨텐츠크기 + padding padding(패딩) [매우 중요] 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 속성 border(윤곽)을 기준으로 안쪽으로 들어오는 여백 width 속성과 height 속성과 별도로 적용 margin(마진) [매우 중요] 윤곽을 기준으로 바깥쪽 여백 상자와 상자간의 거리를 벌릴 때 사용 width 속성과 height 속성과 별도로 적용 box-sizing width 속성과 height 속성을 변경할 수 있는 CSS3 속성 float 쌓아올릴 때 사용 (넘어가는 것을 방지) 1. 기본 너비 공식 content-box = width + border + padding 2. 기본 너비 공식 - padding, border box..
CSS 문법 각각의 스타일 속성에 다양한 값을 입력 동일한 속성 중첩가능 ▶ 마지막 속성만 적용 css 적용방법 = 순서는 가장 가까운 순서부터 1. 인라인 시트 태그 style 속성 { } 중괄호 빼고 style만 적기, color:green; 따로 특별히 주고 싶을 때 사용 2. 내부 스타일 시트 3. 외부 스타일 시트 .css 가장 많이 사용 /* css를 하기 전 꼭 들어갈 기본 값 */ * {margin: 0; padding: 0; list-style: none;} a {text-decoration: none;} img {max-width: 100%; height: auto;} 가장 기본 속성 더보기 실습 외부스타일시트 외부스타일시트 외부스타일시트 css 단위..
Visual Studio Code 설치 및 폴더 연결 홈페이지로 들어가 다운로드 받은 후 폴더 연결 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 사용할 폴더의 영역을 확인하고, 파일을 생성함 ..
게시판 기본 header / footer jsp 파일에 태그 기준 위, 아래로 header, footer 넣기 (상대경로 사용) 게시판 작성 게시글 작성 1. 데이터베이스 만들기 -- 테이블 생성 create table board ( bno number(10) primary key, writer varchar2(30) not null, --암묵적인 fk title varchar2(50) not null, content varchar2(500), regdate date default sysdate, hit number(10) default 0 ); -- 시퀀스 생성 -- bno에 들어갈 시퀀스 create sequence board_seq nocache; 테이블 긁어와서 메모로 저장 후 확인하면서 쓰기 2..
MVC2 //web.xml JSPWeb index.html index.htm index.jsp default.html default.htm default.jsp 웹 애플리케이션의 루트 URL에 접근했을 때 서버가 제공하는 기본 파일을 지정 공통 부분 처리 (header, footer) //include 사용 예시 header와 footer를 jsp 파일로 만들고, include 사용하여 코드를 간편화 header.jsp에 사용할 JSTL(JavaServer Pages Standard Tag Library) 코어 태그 라이브러리를 선언 header.jsp 에 포함되어있는 메뉴들은 모두 링크가 걸려있는데 이를 a태그를 통해서 작성할 수도 있지만 MVC Model2에 부합하도록 모든 요청이 하나의 서블릿을 통..
디자인 패턴: 클래스를 설계하는 기술 MVC2 컴포넌트 설계 / MVC2 패턴 1. 화면의 자바코드 없애기 2. 컨트롤러 만들기 1. 자바코드 없애기 / 제어문 없애기 EL (Expression Language) JSP에서 저장객체를 출력할때 스크립팅을 전혀 쓰지 않을 수 있는 기술 표현식을 대체 표현식 ▶ EL ${ value } 내장 객체 의미 pageScope JSP의 page 객체를 참조하는 객체 requestScope 생략가능/ ${ 객체명.이름 } JSP의 request 객체를 참조하는 객체 sessionScope 생략가능/ ${ 객체명.이름 } JSP의 session 객체를 참조하는 객체 applicationScope 생략가능 JSP의 application 객체를 참조하는 객체 param $..
예외 처리 예외 상황이 발생했을 경우 웹 컨테이너에서 제공되는 기본적인 예외페이지가 보여짐 개발 과정에서는 문제없지만 배포시에는 따로 만들어 둔 에러 페이지로 유도하여 사용자에게 친숙한 페이지를 보여줌 HTTP 응답 상태 코드 404: 요청한 URL을 찾을 수 없음 = 경로를 잘 못 적음 500 번대: 서버측 내부 오류 (java, JSP 페이지 내의 오류 코드) 200: 요청을 성공적으로 처리 307: 임시로 페이지를 리다이렉트 400 번대: 클라이언트의 요청 잘못, 통신하는 사람의 잘못 405: 요청 방식(get, post)을 허용하지 않음 503: 서버가 일시적으로 서비스를 제공할 수 없음 (일시적 서버과부하, 서버 임시 보수 등) 예외 처리 방법 1. 직접 예외 처리 깔끔하지 않음 try ~ ca..
JSP 내장 객체 jsp 파일 내에 객체 생성 없이 바로 사용할 수 있는 객체 jsp 컨테이너에 의해 서블릿으로 변환될 때 자동으로 객체 생성 Requset 웹 브라우저를 통해 서버에 어떤 정보를 요청 요청 정보가 담기고 관리되는 곳이 request 객체 생명주기: 페이지 별로(요청 영역마다) 생성되고 사라짐 request 객체가 제공하는 기능 (읽기) 클라이언트, 서버와 관련된 정보 읽기 / 클라이언트가 전송한 요청 파라미터 읽기 / 클라이언트가 전송한 쿠키 읽기 name = 변수명 value = 값 checkbox, radio, select = value 필수 태그를 통해 데이터를 전송할 때는 request.getParameter() 메서드를 사용하여 요청(request)에서 데이터를 받고, 받은 데..