본문 바로가기
☁︎KOSTA/☂︎KOSTA-WEB

[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 33) - web 개발환경 구성, basic html, basic css

by 하_센세 2022. 9. 19.

2022.09.19 [MON]

- Day 33- 

 

수업 주요 목차

  • Web 개발환경 구성
  • html basic
  • css basic

🤖Review

 

  반정규화 (De-Normalization)

          : 시스템 성능 향상을 dnlgo 위해 정규화 된 데이터 모델을 통합

          : 의도적으로 정규화된 원칙을 위배하는 것을 말한다.

 

 

ON DELETE CASCADE

--기존 부서와 사원 테이블을 확인
SELECT^ FROM k-department;
SELECT^ FROM k-employee;

--foreign key로 참조되는 부모 테이블의 정보를 삭제할 수 없다.
-- 사원테이블에서 아이유, 김훈진, 문준호 사원이 부서 테이블의 10번 부서번호를 참조하여 정보가 생성되어 있는 상태
-- 이 상태에서 부모인 부서테이블의 10번 부서 정보를 삭제할 수 없다는 의미

--fail: 10번 부서를 참조하고 있는 자식 테이블의 데이터가 있기 때문에
DELETE FROM k-department WHERE deptNo=10;
--Succeed: 자식인 사원테이블 30번 부서 사원은 없으므로 삭제 가능
DELETE FROM k-department WHERE deptNo=30;

-- 10번 사원 정보를 먼저 삭제하면 10번 부서 테이블의 부서 정보를 삭제할 수 있다
DELETE FROM K_EMPLOYEE WHERE DEPTNO=10;
DELETE FROM K_DEPARTMENT WHERE DEPTNO=10;

/*
 * ON DELETE CASCADE : 
 *  부모인 부서 테이블의 특정 부서정보를 삭제하면 자식 테이블의 데이터까지 삭제되도록 하는 옵션
 *  예 ) 부모인 부서 테이블의 특정 부서정보를 삭제하면 자식인 사원 테이블의 특정 부서 사원들이 삭제되게 하는 옵션
 */

CREATE TABLE cascade_dept(
	deptno NUMBER PRIMARY KEY,
	dname VARCHAR2(100) NOT NULL,
	loc VARCHAR2(100) NOT NULL
)

CREATE TABLE cascade_emp(
	empno NUMBER PRIMARY KEY,
	ename VARCHAR2(100) NOT NULL,
	deptno NUMBER NOT NULL
	CONSTRAINT cascade_emp_fk FOREIGN KEY(deptno) REFERENCES cascade_dept(deptno) ON DELETE CASCADE
)

INSERT INTO cascade_dept(deptno,dname,loc) VALUES(10,'연구개발','판교');

INSERT INTO cascade_emp(empno,ename,deptno) VALUES(1,'아이유',10);
INSERT INTO cascade_emp(empno,ename,deptno) VALUES(2,'손석구',10);
INSERT INTO cascade_emp(empno,ename,deptno) VALUES(3,'강하늘',10);

COMMIT

SELECT * FROM cascade_emp;
SELECT * FROM cascade_dept;

-- 부모 테이블의 10번 부서 정보를 삭제해본다
DELETE FROM cascade_dept WHERE deptno=10;

 

WEB 개발환경 구성

  1. workspace 변경
  2. 아파치톰캣 WAS를 다운로드

https://tomcat.apache.org/

 

Apache Tomcat® - Welcome!

The Apache Tomcat® software is an open source implementation of the Jakarta Servlet, Jakarta Server Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations and Jakarta Authentication specifications. These specifications are part of the

tomcat.apache.org

 

맥북의 경우 Tomcat tar.gz (pgp, sha512)를 다운받는다.

 

3. port 와 encoding 설정

4. conf/context.xml 에서 reloadable="true" 를 설정

5. 이클립스에서 WAS를 제어하기 위한 설정

6. 서버 생성

7. Dynamic Web Project 생성

  • Frontend(Html, CSS, Javascript) => WEB-INF에 저장
  • Backend => Java Resources에 저장

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step4 경로연습</title>
</head>
<body>
step4 입니다.<br><br>
<!-- 
		상대경로 연습
			- 상위디렉토리로 2번 이동 후 이미지 폴더의 이미지에 접근한다. 
		
		절대경로 연습
			- http://localhost:8888/webstudy02-html/step3.html
-->
<img src="picture/자바.jpg"> <!-- 안됨 (위치때문에) --> <br><br>
<img src="../picture/자바.jpg"> <br><br>
<img src="../../picture/자바.jpg"> <!-- a폴더 안에 있을 경우 --><br><br>

<a href="../../step3.html">상대경로 step3으로 이동</a><br><br>
<a href="http://localhost:8888/webstudy02-html/step3.html">절대경로 step3으로 이동</a>
</body>
</html>

 

🔎 Eclipse 실습 내용

 

1. index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home</title>
</head>
<body bgcolor="skyblue">
Java Web Programming 수업목차 <br> <!-- html 주석 : br은 행변경 -->
- WAS (Web Application Server) 환경설정 <br>
-HTML, CSS, JavaScript 기초 <br>
- Servlet 기본 개념과 예제 <br>
- Http Request Method : Get 방식 과 Post 방식 <br>
- Form Tag 와 Servlet 연동 <br>
-Servlet LifeCycle의 이해 <br>
- ServletConfig 와 ServletContext <br>
- JSP 개념과 기본 문법 <br>
- EL과 JSTL <br>
- Model 2 Architecture, MVC Design Pattern <br>
- Front Controller Design Pattern <br>
- DBCP <br>
- Refactoring <br>
- Git <br>
- JavaScript 심화 Ajax 와 Json <br>
- Semi Project
</body>
</html>

↓

 

2. step1

<!DOCTYPE html> <!-- HTML5 선언부 -->
<html>
<head> <!-- 웹브라우저가 알아야 할 정보를 기술 -->
<meta charset="UTF-8">
<title>step1</title>
</head>
<body>
HTML <br><br>
W3C : World Wide Web을 위한 표준을 개발하고 장려하는 조직 <br><br>
참고사이트 : www.w3schools.com <br><br>
HTML : HyperText Markup Language 웹문서의 content(내용)를 담당 <br>
CSS : Cascade Style 웹문서의 디자인 스타일을 담당 <br>
JavaScript : 웹문서의 행위를 담당 <br>
XML : 설정 정보 및 데이터 통신
</body>
</html>

↓

 

3. step2 - <h>, <marquee>, <a href>

<!DOCTYPE html>  <!-- HTML5 선언부 -->
<html>
<head> <!-- 웹브라우저가 알아야 할 정보를 기술 -->
<meta charset="UTF-8">
<title>HTML basic tag</title>
</head>
<body>
<h1>h1 Hello HTML</h1>
<h2>h2 Hello HTML</h2>
<h3>h3 Hello HTML</h3>
<h4>h4 Hello HTML</h4>
<h5>h5 Hello HTML</h5>
<marquee>
<h5>h5 marquee Hello HTML</h5>
</marquee>
<a href ="step3.html" >step3으로 이동</a>
</body>
</html>

↓

 

 

🤮error🤮

 

4.step3 - <img src>

<!DOCTYPE html> <!-- HTML5 선언부 -->
<html>
<head> <!-- 웹브라우저가 알아야 할 정보를 기술 -->
<meta charset="UTF-8">
<title>step3 html</title>
</head>
<body>
현 페이지는 step3 html 페이지입니다. <br>
<a href="step2.html">step2로 돌아가기</a><br><br>
<img src="picture/자바.jpg">
</body>
</html>

↓

5.step4 - path

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step4 경로연습</title>
</head>
<body>
step4 입니다.<br><br>
<!-- 
		상대경로 연습
			- 상위디렉토리로 2번 이동 후 이미지 폴더의 이미지에 접근한다. 
		
		절대경로 연습
			- http://localhost:8888/webstudy02-html/step3.html
-->
<img src="picture/자바.jpg"> <!-- 안됨 (위치때문에) --> <br><br>
<img src="../picture/자바.jpg"> <br><br>
<img src="../../picture/자바.jpg"> <!-- a폴더 안에 있을 경우 --><br><br>

<a href="../../step3.html">상대경로 step3으로 이동</a><br><br>
<a href="http://localhost:8888/webstudy02-html/step3.html">절대경로 step3으로 이동</a>
</body>
</html>

↓

 

6. step4 - <ol>, <ul>, <li>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록태그</title>
</head>
<body>
<h3>순서있는 목록</h3>
<ol>
	<li>닭갈비</li>
	<li>곱창</li>
	<li>물회</li>	
</ol>
<h3>순서없는 목록</h3>
<ul>
	<li>떡볶이</li>
	<li>한우</li>
	<li>마라샹궈</li>
</ul>
</body>
</html>

 

↓

7. step5-table1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 연습</title>
</head>
<body>
<!-- 1행 3열 -->
<table border="3">
<tr>
	<td>상추</td><td>당근</td><td>양파</td>
</tr>
</table> <br><br>
<!-- 2행 3열 -->
<table border="3">
<tr>
	<td>상추</td><td>당근</td><td>양파</td>
</tr>
<tr>
	<td>3</td><td>4</td><td>5</td>
</tr>
</table><br><br>
<table border="3">
<tr>
	<td>글번호</td><td>작성자</td><td>제목</td>
</tr>
<tr>
	<td>1</td><td>지코</td><td>사람</td>
</tr>
<tr>
	<td>2</td><td>아이유</td><td>이지금</td>
</tr>
<tr>
	<td>3</td><td>Weekend</td><td>I feel it coming</td>
</tr>
</table><br><br>

</body>
</html>

↓

 

8. step6 - table2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step6-</title>
</head>
<body>
<!-- 
table td의 속성 
colspan : colspan="3" 열의 행을 합칠 때 사용
-->
<table border="2">
	<tr align="center", bgcolor="pink">
		<td colspan="2">신청서</td>
	</tr>
	<tr bgcolor="lightyellow">
		<td align="center">이름</td><td align="center">아이유</td>
	</tr>
		<tr bgcolor="skyblue">
		<td align="center">나이</td><td align="center">30세</td>
	</tr>
</table>
<br><br>
<!-- 
table td의 속성 
rowspan : rowspan="3" 3행의 열을 합칠 때 사용
-->
<table border="2">
	<tr align="center", bgcolor="pink">
		<td rowspan="3">신청서</td><td>아이유</td>
	</tr>
	<tr bgcolor="lightyellow">
		<td align="center">30세</td>
	</tr>
		<tr bgcolor="skyblue">
		<td align="center">종로</td>
	</tr>
</table>
</body>
</html>

↓

 

9. step7 - table3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="2">
<tr>
	<td colspan="2">자기소개</td>
</tr>
<tr>
	<td>이름</td><td>지코</td>
</tr>
<tr>
	<td rowspan="3">취미<td>독서</td>
</tr>
<tr>
	<td>여행</td>
</tr>
<tr>
	<td>산책</td>
</tr>
</table>
</body>
</html>

↓

10. css 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic css</title>
<style type="text/css">
/*
	css 주석 : 현 페이지의 모든 li 태그에 color lime 속성을 부여한다.
*/
	li{
		color: pink;
	}
	/*
	class 선택자 클래스 선택은 .클래스명으로 표현한다.
	*/
	.ct{
	color : skyblue;
	font-family: IBM Plex Sans KR
	}
		/*
	class 선택자 id 선택은 #아이디명으로 표현한다.
	*/
		#it{
	color : yellowgreen;
	font-family: IBM Plex Sans KR
	}
</style>
</head>
<body>
<h3>css 선택자()selector) 연습</h3>
<ul>
	<li>css 웹사이트의 디자인스타일 담당</li>
	<li class="ct">html 웹사이트의 content 담당</li>
	<li>javascript 웹문서의 행위 담당</li>
	<li class="ct">jsp 템플릿 엔진, 동적인 웹문서 생성</li>
	<li id="it">servlet은 java web application 기반 기술, MVC의 COntroller 역할 담당</li>
</ul>
</body>
</html>

↓

 

11. css 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	table{
	border-collapse:collapse;
	}	

/*
	여러 대상을 선택할 때 셀렉터, 셀렉터, 셀렉터
*/
	table,td{
		border: 1px solid black;
	}
	td{
			padding: 10px;
	}
</style>
</head>
<body>
<table>
<tr>
	<td>상추</td><td>당근</td><td>양파</td>
</tr>
</table> <br><br>
<!-- 2행 3열 -->
<table>
<tr>
	<td>상추</td><td>당근</td><td>양파</td>
</tr>
<tr>
	<td>3</td><td>4</td><td>5</td>
</tr>
</table><br><br>
<table>
<tr>
	<td>글번호</td><td>작성자</td><td>제목</td>
</tr>
<tr>
	<td>1</td><td>지코</td><td>사람</td>
</tr>
<tr>
	<td>2</td><td>아이유</td><td>이지금</td>
</tr>
<tr>
	<td>3</td><td>Weekend</td><td>I feel it coming</td>
</tr>
</table><br><br>
</body>
</html>

↓

 

12. css 3 - link

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 파일을 이용해 디자인 스타일 적용하기</title>
<link rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<table>
<tr>
	<td colspan="2">자기소개</td>
</tr>
<tr>
	<td>이름</td><td>지코</td>
</tr>
<tr>
	<td rowspan="3">취미<td>독서</td>
</tr>
<tr>
	<td>여행</td>
</tr>
<tr>
	<td>산책</td>
</tr>
</table>
<br><br>
<button type="button" onclick="hello()">자바스크립트</button>
<script type="text/javascript">
	function hello(){
		alert("눌렀구나 즐저녁 되세용!");
	}
</script>
</body>
</html>
@charset "UTF-8";
	table{
	border-collapse:collapse;
	}	
	table,td{
		border: 1px solid black;
		padding: 10px;
	}
		td{
			padding: 10px;
	}

↓

 

🤮ERROR🤮

다른 조원들과 jdk이름이 달라서 다시 다운받고 이 전에 있던 jdk 삭제했는데 갑자기 jdbc-seworkspace로 돌아가서 db 연결을 하려니까 안됐었다. 

 

//오늘의 숙제

복습+백준 3단계

'☁︎KOSTA > ☂︎KOSTA-WEB' 카테고리의 다른 글

[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 39) - Annotation, cookie, session  (0) 2022.09.27
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 38) - ServletConfig, ServletContext  (0) 2022.09.26
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 37) - Servlet Hierarchy, Servlet Life Cycle  (0) 2022.09.23
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 35,36) - operator, array, form, server, servlet, mvc, HTTP Request Method(Get, Post)  (1) 2022.09.21
[KOSTA] Spring 기반 Cloud 서비스 구현 개발자 양성 (Day 34) - div, span, bootstrap, JavaScript(basic, variable, function, src, confirm, DOM API)  (0) 2022.09.21

관련글

티스토리툴바