.container .heroes .hero .image{
/* 부모 .hero의 크기를 기준으로설정, 크기 줘야 배경이 보임 */
width: 140%;
height: 100px;
/* 이미지 가운데 정렬 */
background-position: center;
/* 이미지 축소 */
background-size: 90px;
/* 이미지 반복 제거 */
background-repeat: no-repeat;
/* 기울임 제거, 왼쪽+위로 이미지 이동 */
transform: skewX(14deg) translateX(-16px) translateY(-10px);
}
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus vel tempor ex, sit amet dignissim nulla. In vel libero arcu.
In faucibus, libero sed fringilla hendrerit, dolor lectus pulvinar ante, in aliquam ligula neque sed ante.
Ut tortor purus, mollis ac dui nec, finibus dignissim elit. Aliquam at ipsum erat. Aenean vitae porttitor lectus, eu mollis est.
Etiam blandit felis ut tellus accumsan tempus. Quisque dapibus risus id finibus sagittis.
Maecenas semper nisl ac quam commodo, in pharetra neque condimentum.
</p>
</body>
<body>
<a href="https://google.com">Google</a>
<p>
1. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
</body>
<style>
div{
width: 300px;
height: 400px;
background-color: #24272b;
background-image: url("../img/Jinx.png");
/* background-size: 300px 400px; 위 이미지를 늘린것 */
/* 이미지 사이즈(비율 유지 확대/축소): 기본값(auto), px */
background-size: contain;
background-repeat: no-repeat; /* 반복 안 함 */
/* 방법1: top, bottom, left, rifht(조합 가능), center
방법2: x축:100px y축:30px */
background-position: center;
background-attachment: fixed; /* 스크롤해도 이미지는 움직이지 않음 */
}
body{
height: 3000px;
}
</style>
cover: 더 넓은 너비에 맞춤
contain: 더 짧은 너비에 맞춤
9. 띄움
9-1) float
<body>
<img id="img1" src="../img/Viego.png" alt="비에고" width="150">
<img id="img2" src="../img/Jinx.png" alt="징크스">
<!-- <div style="border: 1px solid rgb(118,118,180);">영역</div> -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vehicula tempus sagittis.
Ut non sagittis velit.
Integer pretium commodo erat eget pellentesque.
Proin in malesuada arcu, a tincidunt neque.
Integer turpis libero, mollis mollis eros vitae, ullamcorper
pulvinar dolor.
</p>
<p class="second">
Cras volutpat odio ac aliquam mattis.
In fermentum purus massa, id congue dolor lacinia eu. Nulla facilisi.
Vivamus a scelerisque tortor, sit amet maximus mi.
Morbi condimentum velit eget felis commodo, vel ornare lectus volutpat.
In ac gravida neque.
Suspendisse ex enim, efficitur et nunc quis, ullamcorper sollicitudin magna.
</p>
</body>
<style>
#parent{
/*부모 Div는 overflow:hidden을 무조건 설정
부모보다 자식의 width,height가 큰 경우 잘라내기 위해 */
border:3px solid black;
overflow:hidden;
/*z-index: 부모가 무조건 자식 아래에 위치한다.*/
}
.child{
border:1px solid blue;
float:left;
/*디테일하게 영역을 설정하기 위해선 float을 사용할 것.*/
/*display: inline-block;*/
height: 100px;
background-color: antiquewhite;
margin:10px;
}
</style>
11. 배치
11-1)
<body>
<!-- position속성: 요소의 위치 지정 기준
static: 기준없음(기본값)
relative: 요소 자신을 기준(부모 역할)
absolute: 위치 상 부모 요소를 기준(자식 역할)
fixed: 뷰포트(브라우저)를 기준
<position과 같이 사용하는 방향속성들:음수 가능>
top, bottom, left, right, z-index(중요)
-->
<div class="wrap">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
<style>
.wrap{
width: 400px;
height: 300px;
background-color: tomato;
/* 여기도 위치상 부모가 아니면 브라우저가 부모가 된다. */
/* position: relative; */
}
.container {
width: 300px;
background-color: royalblue;
/* absolute, fixed는 위치상의 부모 구조가 무너지는 경우가 있다. */
position: relative;
}
.container .item {
border: 4px dashed red;
/* background-color: orange; */
}
.container .item:nth-child(1) {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.container .item:nth-child(2) {
width: 140px;
height: 70px;
background-color: azure;
/*relative는 원래영역은 차지하고 있고 지정 좌표에 나타나므로 사용되지 않음*/
/* position: relative; */
/*absolute는 위치상 부모요소를 기준으로 배치하므로 형제들을 신경쓰지 않고 위치한다.*/
position: absolute;
top: 30px;
right: 30px;
/*container div가 위치상 부모요소가 되려면
position: relative;로 설정해야 함
만약 relative가 아니고 할아버지 요소가 relative면
위치상 부모는 할아버지 요소가 된다.
그것도 아니면 화면(뷰포트)기준으로 배치한다. */
/*fixed: 뷰포트(브라우저)를 기준으로 생성:스크롤시 위치 고정 */
/* position: fixed; */
}
/* position: fixed; 테스트시 설정*/
body{
height: 3000px;
}
.container .item:nth-child(3) {
width: 70px;
height: 120px;
background-color: aquamarine;
}
</style>
11-2)
<body>
<!-- 요소 쌓임 순서: Stack order
1.요소에 position속성의 값이 있는 경우 위에 쌓임(static 제외)
2.1번 조건이 같은 경우, z-index속성의 숫자 값이 높을 수록 위에 쌓임
3.1번2번 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임
-->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
<body>
<!-- z-index속성: 값이 높을수록 위에 쌓인다(기본값:auto(0), 너무큰수는 관리가 힘듬)
1.요소에 position속성의 값이 있는 경우 위에 쌓임(static 제외)
2.1번 조건이 같은 경우, z-index속성의 숫자 값이 높을 수록 위에 쌓임
3.1번2번 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임
-->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<hr>
<span>Hello!</span>
</body>
<body>
<!-- 인라인 방식: 다른 것보다 우선순위가 높지만 관리가 힘들다.
같은 디자인을 입력하고 싶을 때 코드가 길어지고 귀찮음 -->
<div style="color:rgb(118,118,180); margin: 40px; border: 1px solid rgb(25,25,112);">영역</div>
</body>
</html>
<style>
/* 인접 형제 선택자: .orange의 다음 형제 요소를 하나 선택 */
.orange+li{
color: rgb(118,118,180);
}
/* 일반 형제 선택자: .orange의 다음 형제 요소들을 선택 */
.orange~li{
color: rgb(25,25,120);
}
</style>
+ 코드블럭을 추가하면 한가지만 설정되는 것이 너무 거슬린다..SQL은 SQL, Java는 Java 이런 식으로 저장하고 싶은데 ㅠㅠ
수업내용 정리(Jdbc)
1. 과제
이전에 하던 전화번호부 프로젝트를 조건에 맞춰 완성하기 1. HashSet 대신 전화번호 리스트를 MySQL 서버 테이블에 저장 2. 저장 테이블(칼럼명): PHONEMEMBER(name,phone,major,year,company,kind) 2-1. PK키: name, phone 2-2. 자료형: VARCHAR(20) / 단, year은 int, kind(N,U,C)는 CHAR(1)로 한다. 3. 메뉴 입력 오류 시 예외처리 4. JDBC를 활용하여 DB 접속
등 이 외에도 전체 출력 시 AllayList 활용 등 조건이 있었지만 전부 작성하진 않았다.
create table PHONEMEMBER(
PM_NO int unsigned auto_increment not null,
NAME varchar(20),
PHONE varchar(20),
MAJOR varchar(20),
YEAR tinyint unsigned,
COMPANY varchar(20),
KIND char(1) not null,
constraint primary key PK_PM(PM_NO, NAME, PHONE)
);
desc phonemember;
DB 테이블
조건에 맞춰 칼럼을 작성했고, 추가적으로 정렬할 때 전화번호를 입력한 순서대로 정렬하기 위해 자동으로 번호가 정렬되는 PM_NO 칼럼을 하나 더 작성했다.
auto_increment는 기본키에 사용할 수 있다고 떠서 PK가 조건인 NAME, PHONE과 묶었다. (PK키인데 not null을 붙인 이유는 PK를 붙이기 전에 적고 넘어갔기 때문이다..)
desc phonemember;는 phonemember 테이블에 대한 구조를 확인하는 코드다.
create or replace view pm_view
as select PM_NO, NAME, PHONE, MAJOR, YEAR, COMPANY, KIND
from phonemember order by pm_no;
select로 검색할 때 어느 테이블에서 무엇을 어떻게 검색할 것인지 적은 view 생성
-- 검색 수정 삭제용 더미데이터
insert into phonemember(name, phone, kind) values('a', '1234', 'N');
insert into phonemember(name, phone, major, year, kind) values('b', '2222', 'af', '1', 'U');
insert into phonemember(name, phone, company, kind) values('c', '3333', 'ge', 'C');
-- 연습용
delete from phonemember;
select*from pm_view;
select*from pm_view where name='a';
update phonemember set name='aa' where name='a';
private void plusAns() {
major = null;
year = 0;
company = null;
System.out.println("\n > 추가로 입력하시겠습니까?");
System.out.println("""
------------------
0. 다른 번호 선택 시 입력을 종료합니다.
1. 대학
2. 회사
------------------""");
System.out.print(" 메뉴선택> ");
int ans = JdbcPBMain.sc.nextInt();
if(ans<0 || ans>2)
if (ans == 1) {
System.out.print("\n ✏️ 전공 입력\t: ");
major = JdbcPBMain.sc.next();
System.out.print("\n ✏️ 학년 입력\t: ");
year = JdbcPBMain.sc.nextInt();
} else if (ans == 2) {
System.out.print("\n ✏️ 회사 입력\t: ");
company = JdbcPBMain.sc.next();
} else {
System.out.println(" > 입력을 종료하셨습니다.");
}
}
insert (정보 입력)
Manager에서 입력받아온 매개변수를 통해 정보가 있는지 확인(이름과 전화번호가 같은지)하고 만약 정보가 없다면 plusAns 메소드를 통해 정보를 입력받을지(대학이나 회사) 물어보고 만약 입력한다면 정보를 입력받은 뒤 다시 돌아온다. (입력받지 않아도 돌아온다.)
만약 필드 변수 major과 company가 null 값이라면, 그렇지 않고 필드 변수 company가 null 값이라면, 그렇지 않고 major이 null 값이라면. 세 경우에 따라 sql 문장을 달리해서 insert로 db에 값을 저장한다.
저장이 성공적으로 완료되었다면 true를 return하고, 저장에 실패했다면 false를 return한다.
public void selectAll() {
addArray();
print(mList);
}
private void addArray() { // 전체출력을 위한것
con = JdbcUtil.getConnection();
String sql = "select*from pm_view";
try {
pstmt = con.prepareStatement(sql);
rs = pstmt.executeQuery();
mList = new ArrayList<>();
while (rs.next()) {
Member m = null;
if (rs.getString("MAJOR") == null && rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"));
} else if (rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("MAJOR"), rs.getInt("YEAR"));
} else if (rs.getString("MAJOR") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("COMPANY"));
}
mList.add(m);
}
} catch (SQLException e) {
System.out.println(" > 정보 불러오기 실패");
e.printStackTrace();
} finally {
JdbcUtil.dbClose(rs, pstmt, con);
}
}
private void print(ArrayList<Member> list) {
if(list.size()!=0) {
System.out.println(" > 입력한 순서대로 출력됩니다.");
column();
for (Member m : list) {
if(mList.get(0) != m) {
System.out.println(" |----\t-----\t------\t----------\t-------|");
}
System.out.println(m);
}
System.out.println(" +=============================================+");
}else {
System.out.println(" ⚠️ 저장된 정보가 없습니다.");
}
}
addArray 메소드를 통해 DB의 모든 값을 Member 객체에 저장한 후 ArrayList(mList)에 하나씩 추가한다. Member 객체에 저장할 때, 타입(kind)에 따라 저장하는 값을 다르게 했다.
addArray 메소드가 끝나고 selectAll 메소드로 돌아오면 print(ArrayList<Member>) 메소드를 통해 모든 멤버를 출력하도록 했다.
column 메소드는 꾸밈용 메소드다.
public void select(String serchN) {
addArray(serchN);
if(serchList.size()==1) {
serchList.get(0).sel();
}else if(serchList.size()==0){
System.out.println(" > 정보를 찾을 수 없습니다.");
}else {
print(serchList);
}
}
private void addArray(String name) { // 중복된 이름을 위한 것
con = JdbcUtil.getConnection();
String sql = "select*from pm_view where name=?";
try {
pstmt = con.prepareStatement(sql);
pstmt.setString(1, name);
rs = pstmt.executeQuery();
serchList = new ArrayList<>();
while (rs.next()) {
Member m = null;
if (rs.getString("MAJOR") == null && rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"));
} else if (rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("MAJOR"), rs.getInt("YEAR"));
} else if (rs.getString("MAJOR") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("COMPANY"));
}
serchList.add(m);
}
} catch (SQLException e) {
System.out.println(" > 정보 불러오기 실패");
e.printStackTrace();
} finally {
JdbcUtil.dbClose(rs, pstmt, con);
}
}
private void print(ArrayList<Member> list) {
if(list.size()!=0) {
System.out.println(" > 입력한 순서대로 출력됩니다.");
column();
for (Member m : list) {
if(mList.get(0) != m) {
System.out.println(" |----\t-----\t------\t----------\t-------|");
}
System.out.println(m);
}
System.out.println(" +=============================================+");
}else {
System.out.println(" ⚠️ 저장된 정보가 없습니다.");
}
}
select (검색)
다른 것들보다 검색이 쉬울 것 같아서 검색부터 진행했다.
addArray(String) 메소드를 통해 DB에서 매개변수로 받아온 이름과 중복된 이름이 있다면 Member 객체에 저장한 후, 새로운 ArrayList(serchList)에 하나씩 추가했다. 이때, 전체 출력과 마찬가지로 타입(kind)에 따라 저장하는 값을 다르게 했다.
select로 돌아오면 serchList의 길이(size)에 따라 if문으로 나눴다.
만약 serchList의 길이가 1이라면 그대로 출력한다.
그렇지 않고 serchList의 길이가 0이라면 정보를 찾을 수 없다는 문구를 출력한다.
전부 아니라면 print(ArrayList<Member>) 메소드를 통해 serchList의 값을 출력한다.
public void update(String corN) {
addArray(corN);
if(serchList.size()==1) {
update(corN, serchList.get(0).getPH());
}else if(serchList.size()==0){
System.out.println(" > 정보를 찾을 수 없습니다.");
}else {
print(serchList, 1);
System.out.println(" ⚠️ 이름이 중복됩니다.\n > 수정할 번호를 선택해주세요.");
System.out.print(" ✏️ 수정할 번호: ");
int corNum = JdbcPBMain.sc.nextInt();
String corPH = serchList.get(corNum-1).getPH();
update(corN, corPH);
}
}
private void addArray(String name) { // 중복된 이름을 위한 것
con = JdbcUtil.getConnection();
String sql = "select*from pm_view where name=?";
try {
pstmt = con.prepareStatement(sql);
pstmt.setString(1, name);
rs = pstmt.executeQuery();
serchList = new ArrayList<>();
while (rs.next()) {
Member m = null;
if (rs.getString("MAJOR") == null && rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"));
} else if (rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("MAJOR"), rs.getInt("YEAR"));
} else if (rs.getString("MAJOR") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("COMPANY"));
}
serchList.add(m);
}
} catch (SQLException e) {
System.out.println(" > 정보 불러오기 실패");
e.printStackTrace();
} finally {
JdbcUtil.dbClose(rs, pstmt, con);
}
}
private void print(ArrayList<Member> list, int i) {
column();
for (Member m : list) {
if(list.get(0) != m) {
System.out.println(" |----\t-----\t------\t----------\t-------|");
}
System.out.println(m.tS(i++));
}
System.out.println(" +=============================================+");
}
private void print(ArrayList<Member> list, int i) {
column();
for (Member m : list) {
if(list.get(0) != m) {
System.out.println(" |----\t-----\t------\t----------\t-------|");
}
System.out.println(m.tS(i++));
}
System.out.println(" +=============================================+");
}
select(검색)처럼 addArray(String) 메소드를 통해 중복된 이름은 serchList에 저장했다.
updata로 돌아오면 serchList의 사이즈가 1이면 바로 매개변수와 serchList에 저장된 번호를 updata(String, String)의 매개변수로 적는다.
serchList의 사이즈가 0이면 정보를 찾을 수 없다고 출력한다.
serchList의 사이즈가 1, 0 둘 다 아니라면 print(ArrayList<Member>, int) 메소드를 통해 중복된 이름의 정보들을 출력한 후, 이름이 중복된다고 출력한다. 수정할 번호를 입력받아 해당 번호의 1을 뺀 인덱스에 저장된 번호와 매개변수를 updata(String, String)의 매개변수로 적는다. 이때, int는 출력 순서의 시작 번호이기 때문에 고정값 1을 적는다. 출력이 모두 끝나고 다시 돌아오면 수정할 번호를 입력받고, updata(String,String) 메소드에 매개변수와 serchList의 입력받은 수정할 번호에서 1을 뺀 인덱스에 저장된 번호를 적는다.
updata(String, String)에서 입력받은 매개변수들을 통해 정보를 select(검색)해오고 kind 값에 따라 if문으로 나누어 수정하게 했다.
public void delete(String delN) {
addArray(delN);
if(serchList.size()==1) {
delete(delN, serchList.get(0).getPH());
}else if(serchList.size()==0){
System.out.println(" > 정보를 찾을 수 없습니다.");
}else {
print(serchList, 1);
System.out.println(" ⚠️ 이름이 중복됩니다.\n > 삭제할 번호를 선택해주세요.");
System.out.print(" ✂️ 삭제할 번호: ");
int delNum = JdbcPBMain.sc.nextInt();
String delPH = serchList.get(delNum-1).getPH();
delete(delN, delPH);
}
}
private void addArray(String name) { // 중복된 이름을 위한 것
con = JdbcUtil.getConnection();
String sql = "select*from pm_view where name=?";
try {
pstmt = con.prepareStatement(sql);
pstmt.setString(1, name);
rs = pstmt.executeQuery();
serchList = new ArrayList<>();
while (rs.next()) {
Member m = null;
if (rs.getString("MAJOR") == null && rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"));
} else if (rs.getString("COMPANY") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("MAJOR"), rs.getInt("YEAR"));
} else if (rs.getString("MAJOR") == null) {
m = new Member(rs.getString("kind"), rs.getString("NAME"), rs.getString("PHONE"),
rs.getString("COMPANY"));
}
serchList.add(m);
}
} catch (SQLException e) {
System.out.println(" > 정보 불러오기 실패");
e.printStackTrace();
} finally {
JdbcUtil.dbClose(rs, pstmt, con);
}
}
private void delete(String delN, String delPH) {
con = JdbcUtil.getConnection();
String sql = "select*from pm_view where name = ? and phone = ?";
try {
pstmt = con.prepareStatement(sql);
pstmt.setString(1, delN);
pstmt.setString(2, delPH);
rs = pstmt.executeQuery();
if (rs.next()) {
if (rs.getString("KIND").equals("N")) {
selN(rs.getString("KIND"), rs.getString("NAME"), rs.getString("PHONE"));
} else if (rs.getString("KIND").equals("U")) {
selU(rs.getString("KIND"), rs.getString("NAME"), rs.getString("PHONE"), rs.getString("MAJOR"), rs.getInt("YEAR"));
} else if (rs.getString("KIND").equals("C")) {
selC(rs.getString("KIND"), rs.getString("NAME"), rs.getString("PHONE"), rs.getString("COMPANY"));
}
sql = "delete from phonemember where name=? and phone = ?";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, delN);
pstmt.setString(2, delPH);
pstmt.executeUpdate();
System.out.println("\n > 삭제가 완료되었습니다.");
}
} catch (SQLException e) {
System.out.println(" ❌ 삭제 실패 ❌");
e.printStackTrace();
}
}
delete (삭제)
delete(String,String) 코드 줄이기를 안 한 상태이다.
select(검색), updata(수정)처럼 addArray(String) 메소드를 통해 중복된 이름은 serchList에 저장했다.
돌아오면 serchList의 사이즈가 1이면 바로 매개변수와 serchList에 저장된 번호를 delete(String, String)의 매개변수로 적는다.
serchList의 사이즈가 0이면 정보를 찾을 수 없다고 출력한다.
serchList의 사이즈가 1, 0 둘 다 아니라면 print(ArrayList<Member>, int) 메소드를 통해 중복된 이름의 정보들을 출력한 후, 이름이 중복된다고 출력한다. 수정할 번호를 입력받아 해당 번호의 1을 뺀 인덱스에 저장된 번호와 매개변수를 delete(String, String)의 매개변수로 적는다. 이때, int는 출력 순서의 시작 번호이기 때문에 고정값 1을 적는다. 출력이 모두 끝나고 다시 돌아오면 수정할 번호를 입력받고, delete(String,String) 메소드에 매개변수와 serchList의 입력받은 수정할 번호에서 1을 뺀 인덱스에 저장된 번호를 적는다.
delete(String, String)에서 입력받은 매개변수들을 통해 정보를 한 번 더 select(검색)해오고 kind 값에 따라 if문으로 나누어 출력을 한 번 해준 후, 삭제를 진행했다.
테이블은 하나이든 셋이든 상관이 없다고 하셨는데 나는 DB는 내 길이 아닌지 너무 어려워서 비교적 간단한 하나로 진행했다.
과제에서 메인 메뉴 부분을 이전에 만들었던 것으로 재활용했다가 서브 메뉴들에서 메뉴 입력 오류 시 예외처리 하는 것을 잊고 제출해버렸다. 처음부터 끝까지 직접 짰면 하지 않았다는 것을 기억했을텐데, 하는 아쉬움이 남았지만 간단하지만 조금 귀찮은 부분을 타이핑하느라 시간을 보내기 싫었던 탓이라 나중에는 조금 더 꼼꼼히 확인해야겠다.
코드를 줄이고 싶어서 메소드를 생성해두고 메소드 안에서 그 메소드를 사용하는 식으로 했는데 너무 메소드 안에 메소드인가 싶어지기도 해서 고민이 많았다.
