[Java|HTML|CSS] 6주차 수업: 2024.03.25 - 2024.03.29

2024.03.25

-데이터베이스에 데이터를 삽입할 때  default를 sysdate로 지정해둔 경우 SQL문에서 명시하지 않아도 됨

 

*웹서버 연동

-tomcat9 다운로드 (zip 파일)

-패키지 생성 -> new -> other -> dynamic web project

-new runtime -> 아파치 톰캣 9.0 -> 실제 경로 연결(apache-tomcat 하위 폴더가 나올 때까지)

-java->src->main->webapp->html 파일 생성

-charset="utf-8"로 변경 (이게 더 최근에 사용되는 것)

-Run On Server -> 아파치 톰캣 9.0 서버 선택

 

 

2024.03.26

[HTML]

 

*www

-월드 와이드 웹(World Wide Web, www)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간

 

*ARPANET

-하이퍼링크라는 특수한 기능을 사용하여 문서와 문서 사이를 이동할 수 있는 간단한 문서 개념

 

*이클립스 환경설정

-CSS 파일, HTML 파일, JSP 파일 인코딩 -> UTF-8

 

 

 

2024.03.27

*정의 목록 태그

태그 이름	설명
dl	정의 목록 태그
dt	정의 용어 태그
dd	정의 설명 태그

 

*테이블 태그

<table> <caption>제목</caption> <tr> <td>첫번째 셀</td> <td>두번째 셀</td> </tr> </table>

 

*이미지 태그

<img src=”image.png” width=”100” height=”100” alt=”이미지”>

 

[개인 프로젝트] - 도서 대출 프로그램 만들기

*테이블 구조

CREATE TABLE member(
me_id VARCHAR2(10) PRIMARY KEY, --회원 ID
me_passwd VARCHAR2(10) NOT NULL, --비밀번호
me_name VARCHAR2(30) NOT NULL, --회원명
me_phone VARCHAR2(13) NOT NULL, --전화번호
me_regdate DATE DEFAULT SYSDATE NOT NULL --가입일
);

CREATE TABLE sbook(
bk_num NUMBER PRIMARY KEY, --도서 번호
bk_name VARCHAR2(90) NOT NULL, --도서명
bk_category VARCHAR2(30) NOT NULL, --분류
bk_regdate DATE DEFAULT SYSDATE NOT NULL --등록일
);

CREATE SEQUENCE sbook_seq;

--도서 대출 정보
CREATE TABLE reservation(
re_num NUMBER PRIMARY KEY,
re_status NUMBER(1) NOT NULL, --0.반납(미대출), 1.대출중
bk_num NUMBER NOT NULL REFERENCES sbook(bk_num), --도서 번호
me_id VARCHAR2(10) NOT NULL REFERENCES member(me_id), --회원 id
re_regdate DATE DEFAULT SYSDATE NOT NULL, --대출 날짜
re_modifydate DATE --반납 날짜
);

CREATE SEQUENCE reservaton_seq;

 

*클래스 구조

BookDAO	BookAdminMain	BookUserMain
<관리자> -도서 등록 -도서 목록 보기 -회원 목록 보기 -대출 기록 보기	<멤버변수> private BufferedReader br; private BookDAO dao; <생성자> callMenu() 호출 <메서드> -callMenu() -main()  :생성자 호출	<멤버변수> private BufferedReader br; private BookDAO dao; private String me_id; //로그인한 회원 아이디 private boolean login;  //로그인 여부(로그인 true, 로그아웃 false) <생성자> callMenu() 호출 <메서드> -callMenu()   [authentification]  1)로그인 체크 -> 로그인  2)아이디 중복 체크 -> 회원가입   [도서대출반납]  1)도서 대출 여부 체크 -> 도서 대출  2)MY 대출 목록  3)반납 가능 여부 체크 -> 대출 도서 반납
<사용자> -아이디 중복 체크 -회원 가입 -로그인 여부 체크 -도서 목록 보기 -도서 대출 여부 체크 -도서 대출 등록 -MY대출 목록 보기 -반납 가능 여부 체크 -반납 처리

 

- BookUserMain 클래스에서 도서 대출을 하려면 일단 도서 목록을 불러와야 한다. 관리자가 체크하는 도서 목록과는 다르게 이는 대출을 위한 것이므로 현재 대출여부가 표시되어야 하는데 이를 위해서는 sbook테이블과 reservation테이블의 조인이 필수이다. 그냥 조인을 하게 되면 한번도 대출되지 않은 도서(즉, reservation 테이블에 존재하지 않는 도서)가 화면에 표시되지 않으므로 OUTER JOIN을 이용해야 한다. 다만 OUTER JOIN을 그냥 이용하게 되면 여러번 대출되었던 도서(reservation 테이블에 여러번 존재하는 도서)가 여러 번 출력된다. 이는 reservation 테이블을 바로 조인하지 않고 인라인뷰를 이용해서 현재 대출중인 도서만을 불러오는 방식으로 해결할 수 있다.

SELECT bk_num,bk_name,bk_category,NVL2(re_status, '대출중', '대출가능') re_status 
FROM sbook LEFT OUTER JOIN (SELECT * FROM reservation WHERE re_status=1) USING(bk_num);

 

대출중인 도서의 re_status는 모두 1이고 아닌 도서의 re_status는 모두 NULL이다. 따라서 NULL값을 처리하는 NVL2 함수를 이용하여 처리한다.

 

 

 

2024.03.28

[HTML]

 

*form 태그

<form action=”signup.jsp” method=”post”>   ID <input type=”text” name=”name”><br>   비밀번호 <input type=”password” name=”password”><br>   좋아하는 계절<br>    <input type=”checkbox” name=”season” value=”봄”>봄    <input type=”checkbox” name=”season” value=”여름”>여름    <input type=”checkbox” name=”season” value=”가을”>가을    <input type=”checkbox” name=”season” value=”겨울”>겨울<br>   거주지<br>    <input type=”radio” name=”city” value=”서울”>서울    <input type=”radio” name=”city” value=”부산”>부산    <input type=”radio” name=”city” value=”대구”>대구    학력<br>  <select name=”school”>     <option value=”초등학교”>초등학교</option>     <option value=”중학교”>중학교</option>     <option value=”고등학교”>고등학교</option>     <option value=”대학교”>대학교</option>  </select>   자기소개<br>   <textarea rows=”10” cols=”30” name=”content”></textarea>  <input type=”submit” value=”전송”><br> </form>

 

*폼 관련 태그

-fieldset: 폼을 그룹핑하는 역할

-legend: 제목 지정

-label: 입력창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트

              label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음

              (label태그의 for 속성과 input 태그의 id를 맞추어야 함)

 

*input 필드 속성

-required: 필수 입력 지정

-autofocus: 페이지 로드시 자동 포커스 지정

-autocomplete: "on" / "off" 지정 가능. 자동 완성 기능.

-placeholder: 자리 표시자

-type: text, range, number, date, time, email, url, search, submit, password ...

 

*input에 입력 가능하게 하고 목록 주기: datalist

<label for="job">직업</label>
<input type="text" name="job" list="job">
<datalist id="job">
	<option value="학생">
	<option value="의사">
	<option value="경찰">
	<option value="프로그래머">
</datalist>

 

*HTML5

-시멘틱 태그 : 내용을 설명하는데 직접 연관된 요소 추가 (제목, 푸터, 내비게이션 절, 사이드바, 글을 정의하는 요소들) 

-플러그인에 덜 의존하는 멀티미디어 : 오디오, 비디오 기능 제공

-웹 소켓 : HTML5는 서버와의 연결을 유지시키는 웹 소켓을 지원

-클라이언트 측 스토리지 : 웹 스토리지와 웹 SQL 데이터베이스 API를 이용하면 브라우저에서 동작하긴 하지만 모든 데이터를 사용자의 컴퓨터에 보관하는 애플리케이션을 만들 수 있음

-향상된 접근성 : 스크린 리더 같은 프로그램을 사용해서 보조 기술에 의존하는 사람에게 더 좋은 웹 페이지 접근성을 제공

 

*웹표준

-웹 기술을 표준화하기 위한 일련의 단계와 요구사항

-플러그인 기술(예: 액티브X 등)과 같은 비표준 기술을 배제하고,

 W3C(World Wide Web Consortium)에서 나온 권고안을 사용하는 것

-웹 문서의 구조와 표현, 동작을 구분해서 사용하는 것 (구조는 HTML, 스타일은 CSS, 동적인 기술은 JS)

 

*HTML5 독타입

-독타입은 브라우저 혹은 다른 파서에게 지금 보고 있는 문서의 종류를 알려주는 수단

[HTML5이전 독타입] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional/EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd>   [HTML5 독타입] <!DOCTYPE html>

 

 

 

[CSS]

 

-기존 태그가 콘텐츠를 보여주는 방식을 재정의해(마크업 언어인) HTML의 기능을 개선하는 별도의 스타일시트 언어

-브라우저는 HTML에 링크되어 있는 또는 삽입된 CSS코드를 해석하고 이를 HTML에 적용

 

*CSS의 장점

-기능 확장성 : HTML 기능의 확장 가능
-양식 모듈화 : 흐름이 같은 문서 양식으로 전체 구성 가능
-간편성 : 문서 형식을 손쉽고 다양하게 구성 가능
-일관성 : 사용 환경에 영향 받지 않음

 

*CSS의 삽입방법 3가지

1)인라인 스타일 : HTML 태그 내의 스타일 추가
-CSS를 사용한다는 말은 개별 태그의 외양을 일일이 설정할 필요가 없다는 뜻이기는 하지만, 

 개별 태그 내에서 스타일을 설정하는 것도 가능

<h1 style="color:red;">인라인 스타일</h1>

 

2)임베딩 스타일

-단일 엘리먼트(인라인)나 전체 웹 사이트(외부 스타일)가 아니라 단일 웹 페이지에 적용할 스타일을 추가하면

 <style> 태그를 사용해 웹 페이지에 스타일 규칙을 직접 기입

-<style> 태그안에 모든 스타일 규칙이 들어감

-문서의 헤드에서 style 태그를 입력

-type 속성을 “text/css”로 정의해 임의 스타일이 아니라 CSS를 따르도록 스타일을 정의

<style type=”text/css” media=”all”>   h1 {color:red;} </style>

 

3)링크 스타일

-CSS에는 한 번 만들어둔 스타일 시트를 단일 웹 페이지나 전체 웹 사이트에서 재활용할 수 있음

-rel=”stylesheet” : HTML 문서에 대한 링크 관계를 스타일시트(stylesheet)로 지정

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />

 

*@import

-<style> 태그 내에서 다른 CSS 코드를 포함하기 전에 @import url()를 입력하고 괄호 사이에 임포트할 CSS문서의 URL을 입력

<style type="text/css" media="all"> @import url('style.css'); 또는 @import ‘style.css’; h1{ color:gray; } h2{ color:darkred; } </style>

 

*!important

-우선순위 적용

<style> .accent{color:red !important;} ← 우선 적용 .accent{color:blue;} </style>

 

선택자

*전체 선택자

-모든 요소에 스타일 적용

* {       margin:0;       padding:0; }

 

*태그 선택자

-특정 태그에 스타일 적용

p{ font-size : 1em; }

 

*클래스 선택자

-클래스 선택자를 사용하면 모든 HTML 태그에 적용할 수 있는 독립적인 스타일을 설정할 수 있음

-클래스명에는 주로 하이픈 사용

.author-name{ font-size:1em;}

 -여러 개의 클래스를 적용할 때는 공백을 구분자로 클래스명 추가

<p class="main-ft main-sp">오늘은 목요일</p>

 

*아이디 선택자

-요소의 크기나 위치 등 레이아웃을 지정할 때 주로 사용

-클래스 선택자와 달리 문서 안에서 한 번만 적용

-아이디명에는 주로 언더바 사용

 

*선택자의 연계

-태그선택자와 클래스선택자의 연계

-공백을 넣지 않고 표시

h1.item {
	color: blue;
	background-color: skyblue;
}

 

-> h1태그이면서 item 클래스인 것 (일반 클래스 선택자보다 우선순위가 높음)

 

-태그선택자와 아이디선택자의 연계

h1#target {
	color: pink;
	background-color: red;
}

 

*그룹 선택자 (나열)

-그룹 지정은 여러 개의 태그에 동일한 스타일을 적용하고 싶을 때 태그를 가리키는 선택자들을 쉼표(,)로 나열해서 지정

h1, p {
	font-size: 20pt;
	background-color: yellow;
}

 

*후손 선택자

-공백으로 구분

-지정한 후손 태그와 일치하는 모든 태그를 선택함 (직계 자식 뿐 아니라 모든 후손을 선택)

body div {
	border: 3px solid blue;
}

 

*자식 선택자

-지정한 자식 태그(직계 자식만) 선택

body > div {
	border: 3px solid blue;
}

 

*동위 선택자

-선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B만 선택
-선택자A ~ 선택자B : 선택자A 뒤에 위치하는 태그 중 선택자B와 동일한 종류의 태그를 모두 선택

h1+h2 {
	color: red;
}

div ~p {
	color: blue;
}

 

*속성 선택자

-요소[속성] 특정 속성을 가지고 있는 태그를 선택

a[title] {
	color: yellow;
	background-color: pink;
	font-size: 20pt;
}

 

-요소[속성="값"] 속성 안의 값이 특정 값과 같은 태그 선택

a[title="홈페이지"] {
	color: red;
	background-color: gray;
	font-size: 30pt;
}

 

-요소[속성~="값"] 속성 안의 값이 특정 값을 단어로서 포함하는 태그

(구분자가 공백)

a[title~="email"] {
	color: blue;
	background-color: yellow;
	font-size: 25pt;
}

 

-요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 태그를 선택

(구분자가 없어도 됨)

a[title*=올림픽] {
	color: brown;
	background-color:yellow;
	font-size: 20pt;
}

 

-요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택

a[href^="https://"] {
	color: green;
	background-color: red;
	font-size: 25pt;
}

 

-요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택

a[href$=".net"] {
	color:white;
	background-color:black;
	font-size:20pt;
}

 

*가상클래스 선택자

형식	이름	스타일 적용 엘리먼트
:link	링크	href의 값이 히스토리에 없는 경우(링크를 방문하지 않은 경우)
:visited	방문 링크	href의 값이 히스토리에 있는 경우(링크를 방문한 경우)
:active	활성	엘리먼트를 클릭한 순간부터 놓기 직전까지
:hover	호버	마우스 포인터가 엘리먼트 위에 있는 경우

-:visited에 text-decoration:underline을 지정해도 :link의 text-decoration 지정과 동일하게 동작

 a:link {
 	text-decoration: none;    /* 링크 밑줄 제거 */
 	color:rgb(255,102,102);
 }
 
 a:visited {
 	/* :link의 text-decoration 지정과 동일하게 동작 */
 	text-decoration: underline;
 	color:rgb(89,71,71);
 }

->이미 방문한 링크에도 underline이 나타나지 않음

 

*상태 가상클래스 선택자

형식	스타일 적용 엘리먼트
:checked	체크 상태의 input 태그를 선택
:focus	초점이 맞춰진 input 태그를 선택
:enabled	사용 가능한 input 태그를 선택
:disabled	사용 불가능한 input 태그를 선택

 

/* input 태그가 사용 가능할 경우에 배경색을 yellow로 지정 */
input:enabled {
	background-color: yellow;
}

/* input 태그가 사용 불가능할 경우 배경색을 gray로 지정 */
input:disabled {
	background-color: gray;
}

input:focus {
	background-color:orange;
}

/* 동위선택자 이용해서 체크박스 체크될 때 div 숨기기 */
input[type=checkbox]:checked+div {
	height: 0px;
}

div {
	width:300px;
	height:100px;
	overflow: hidden;  /* 지정한 넓이와 높이를 벗어난 데이터는 숨김 */
}

 

-자기자신에게 스타일을 부여하는 경우가 아닐 때 동위선택자를 이용할 수 있음

 

*일반 구조 가상클래스 선택자

형식	스타일 적용 엘리면트
:first-child	다른 엘리먼트의 첫 번째 자식인 엘리먼트
:last-child	부모 엘리먼트의 마지막 자식 엘리먼트

 

*float 속성

-요소 왼쪽이나 오른쪽에 배치

-float 속성을 사용하면 필요한 너비만 콘텐츠를 차지하고 다른 요소가 들어올 만큼의 공간을 비워둠

 

*text-decoration 속성

-텍스트에 밑줄이나 취소선, 윗줄 등을 추가
-text-decoration 속성이 블록 레벨 요소에 적용된다면 하위 체계에도 모두 적용

속성	설명
none	형태가 없음
underline	밑줄 생성
overline	윗줄 생성
line-through	취소선 생성
color	텍스트의 색상을 적용

 

*text-align 속성

-텍스트를 정렬하는 프로퍼티

속성	설명
left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	좌우 정렬
<문자열>	테이블 행에만 적용되는 값으로, 지정된 문자열을 중심으로 정렬

 

*text-indent 속성

-텍스트의 첫 번째 행을 들여쓰기나 내어쓰기로 설정
-내어쓰기 경우 음수값 지정

속성	설명
<길이>	고정된 길이로 지정
<백분율>	포함된 블록의 너비를 기준으로 지정

#t1 {
	text-indent: 2em;  /* 1em은 글자 하나를 의미 */
}

 

*letter-spacing 속성 / word-spacing 속성

-글자 간격이나 단어 간격을 조절

-보통은 px로 지정

프로퍼티 값	설명
normal	웹 브라우저에 의존하도록 지정
고정 길이	기본 문자 간격에 추가적인 공간을 확보하는 경우에 사용

#t1 {
	letter-spacing: 2em; /* 글자 간격 */
}

#t2 {
	word-spacing: 2em; /* 단어 간격 */
}

 

*white-space 속성

-공백 처리 방법 결정

※pre: preformatted text

속성	설명
normal	공백 줄바꿈 불인정
pre	공백 줄바꿈 인정 (디바이스의 넓이를 줄여도 다음라인으로 이동하지 않음)
pre-line	공백 불인정 줄바꿈 인정 (디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동)
pre-wrap	공백 인정 줄바꿈 인정 (디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동)
nowrap	공백 불인정 줄바꿈 불인정 (디바이스의 넒이와 관계없이 줄바꿈 불인정) 태그에 의한 줄바꿈만 인정

 

*text-transform 속성

-텍스트의 특정 부분의 알파벳을 대문자 혹은 소문자로 전환

속성	설명
capitalize	각 단어의 첫 글자를 대문자로 전환
uppercase	텍스트의 모든 글자를 대문자로 전환
lowercase	텍스트의 모든 글자를 소문자로 전환
none	대소문자를 전환하지 않음

 

*text-shadow 속성

-텍스트에 그림자 효과 추가하기

text-shadow:h-shadow 값 v-shadow 값 blur 값 color 값;

속성 값	설명
h-shadow	그림자의 가로 오프셋 거리. 양수 값은 글자 오른쪽에 음수 값은 글자 왼쪽에 그림자를 만듬
v-shadow	그림자의 세로 오프셋 거리. 양수 값은 글자 아래쪽에 음수 값은 글자 위쪽에 그림자를 만듬
blur	그림자가 번지는 정도를 지정. 생략할 수도 있는데, 이 경우 그림자가 번지지 않고 선명하게 표시됨.
color	그림자 색상을 지정. 16진수. 색상 이름 표기로 값을 입력.

text-shadow: -3px -3px 2px rgb(62, 163, 89);

 

*text-overflow 속성

-넘치는 텍스트 표기하기

속성값	설명
clip	넘치는 텍스트를 잘라버림
ellipsis	텍스트가 잘렸다는 의미로 말줄임표(“...”)를 표시

 

*font-family 속성

-텍스트를 표현할 때 어떤 글꼴을 사용할지를 지정
-여러 가지 비슷한 스타일의 글꼴이 모여서 이루어진 일종의 글꼴 집단

 

*font-style 속성

-글꼴이 어떠한 형태를 가지고 있는가를 설명

프로퍼티 값	설명
normal	웹 브라우저에 설정되어 있는 기본 글꼴이 지정
oblique	normal 글꼴을 약간 기울인 형태로 지정
italic	보통 기울임체의 형태로 지정

 

*font-variant 속성

-텍스트가 small cap 효과를 적용할지 결정
-어떤 글꼴은 표준 모양만을 지원, small cap 형식만 지원도 가능

프로퍼티 값	설명
normal	웹 브라우저에 설정되어 있는 기본 글꼴이 지정
small-caps	소문자의 경우 대문자로 전환되면서 원래의 대문자보다 약간 작은 형태로 표시, 대문자와 한글의 경우 원래의 문자보다 약간 큰 형태로 표시

 

*font-weight 속성

-같은 글꼴 가족에 있는 다른 글꼴에 비해 두껍거나 얇게 표시하는 경우에 사용
“100-900”까지의 지정된 숫자 사용도 가능

프로퍼티 값	설명
normal	글꼴의 두께는 400
bold	글꼴의 두께는 700
bolder	상속된 두께보다 두꺼운 두께를 지정(600 이상은 똑같이 적용)
lighter	상속된 두께보다 얇은 두께를 지정(500 이하는 똑같이 적용)

 

*font-size 속성

-글꼴 크기 조정

프로퍼티 값	설명
<절대적인 키워드>	Xx-small, x-small, small, medium, large, x-large, xx-large로 설정
<상대적인 키워드>	관련된 글꼴 크기나 상위 태그의 글꼴 크기에 연관되어 계산
<길이>	절대적인 글꼴의 크기를 지정
<백분율>	상위 태그의 글꼴 크기에 연관된 절대적인 글꼴 크기

-크기값 단위

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 함
ex	X-height 해당 글꼴의 소문자 x의 높이를 기준으로 함
px	픽셀. 모니터에 따라 상대적인 크기가 됨
pt	포인트. 보통 문서에서 많이 사용하는 단위

 

*font 속성을 이용한 글꼴 관련 스타일 일괄 지정

아래와 같은 순서로 스타일을 한 번에 명시 font: font-style font-variant font-weight font-size/line-height font-family

 

*웹폰트

-웹폰트를 이용해서 사용자의 pc에 폰트가 설치되어 있지 않아도 폰트 적용이 가능

-서버에 있는 폰트를 읽어서 브라우저에서 디스플레이

@font-face {     font-family:글꼴 이름;     src:url(글꼴 파일 경로) format(파일 유형); }

-구글폰트 사용

 

*list-style-type 속성

-list-style은 ul에 지정
-목록의 불릿과 번호 스타일 지정하기

속성	설명
disc(•)	속이 찬 원
circle(◦)	속이 빈 원
square(■)	속이 찬 사각형

 

*list-style-position 속성

-목록에 들여쓰는 효과 내기

속성	설명
inside	불릿의 왼쪽 끝을 이어지는 텍스트의 왼쪽 끝에 맞춘다.
outside	텍스트의 첫 줄을 이어지는 텍스트와 정렬해 불릿 내어쓰기를 적용한다.

 

*list-style-image 속성

-불릿 대신 이미지 넣기

list-style-image:url(이미지 파일 경로)