본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

10일차 | flex 14,15,17 / sql

by Sharon kim 2021. 11. 26. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_14.html</title>
    <style>
        body {
            margin: 0;
            background-color: yellow;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background-color: #eee;
            width: 1000px;
            height: 700px;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        section {
            background-color: #ddd;
            width: 600px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class='container'>
        <section>
            <h1>수직 중앙 수평 중앙 중첩하기</h1>
        </section>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_15.html</title>
    <style>
        .container {

            display: flex;
        }

        .box {
            border: 5px solid crimson;
            height: 200px;
            width: 33.333%;
            display: flex;
        }

        .box div {
            width: 50%;
            background-color: yellow;
        }

        .box div:nth-child(2) {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div>1</div>
            <div>2</div>
        </div>
        <div class="box">
            <div>3</div>
            <div>4</div>
        </div>
        <div class="box">
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_16.html</title>
    <style>
        .con {
            display: flex;
        }

        .d1 {
            flex: 1;
            background-color: yellow;
        }

        .d2 {
            flex: 3;
            background-color: #ddd;
        }

        .d3 {
            flex: 1;
            background-color: crimson;
        }

        .d4 {
            flex: 1;
            background-color: skyblue;
        }

        @media (max-width : 768px) {

            .d2 {
                flex: 1;
                background-color: #eee;
            }
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="d1">logo</div>
        <div class="d2"></div>
        <div class="d3">gnb</div>
        <div class="d4">lnb</div>
    </div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_16re.html</title>
    <style>
        header {
            background-color: #eee;
            display: flex;
            justify-content: space-between;
        }

        .logo {
            flex-basis: 200px;
            background-color: yellow;
        }

        .navi {
            display: flex;
            flex-basis: 400px;
        }

        .navi div {
            flex: 1;
        }

        .gnb {
            background-color: red;
        }

        .lnb {
            background-color: powderblue;
        }

        @media (max-width : 768px) {

            header {
                flex-direction: column;
            }

            .logo {
                flex-basis: auto;
            }

            .navi {
                flex-direction: column;
                flex-basis: auto;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">logo</div>
        <div class="navi">
            <div class="gnb">gnb</div>
            <div class="lnb">lnb</div>
        </div>

    </header>
</body>

</html>

백업 & 복원

class_07.sql

-- 데이터 베이스 백업과 복원 
-- 다른 매체에 보관 : 데이터베이스에 문제가 생겼을 때 원상태로 돌려놓는 작업
-- DBA가 해야하는 가장 중요한 작업 중 하나가 백업과 복원

use shopDB; -- 더블 클릭한 효과

SELECT * FROM producttbl; -- 블록 설정 후 ctrl + enter (실행단축키)

-- 시나리오1 (사고치기)
DELETE FROM producttbl;

-- 시나리오2 (다른 데이터 베이스 선택)
use sys; 

-- 시나리오3 (복원하기)

-- 시나리오4 (확인)

SELECT*FROM producttbl;

class_08.sql

/*
모델링 
프로젝트 진행단계 : 현실세계에서 업무를 컴퓨터 시스템으로 옮겨 놓는 일련의 과정
(대규모 프로그램을 작성하기 위한 과정)

-- 복잡한 요구사항(여러명이 조합해서 만들어야한다.)
건물 : 계획, 분석, 설계도 작업, 시공

소프트웨어 공학 : (폭포수 모델)
프로젝트 계획
업무 분석 :    더 중요 : 50%
시스템 설계 :   더 중요 : 50%
프로그램 구현 : 코딩 단계
테스트 
유지보수

새로운 쇼핑몰을 오픈한다고 가정 -> 간단한 모델링 해보기 (고객 방문 기록)
*/

export  : 보낼 때 / import : 다시 부를 때

 

jar 파일 만들기

*강의 자료 참고

8 . 0 . 21
|    |    ㄴ자잘한 업데이트
|    ㄴ기능이 많이 추가됨(이 버전까지는 프로덕트 버전이 달라도 시도해볼 만함)
ㄴ굉장히 많은 버전이 바뀜

eclipse (다른 프로그램에서 데이터 가져오기)

결과

package ch01;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class mySqlConnection {
	
	private static Connection conn; //DB 커넥션 연결 객체
	private static final String USERNAME = "root";
	private static final String PASSWORD = "asd1234";
	private static final String URL = 
			"jdbc:mysql://localhost:3306/shopdb?serverTimezone=Asia/Seoul&characterEncoding=UTF-8";

	private static Statement stmt = null;
	private static ResultSet rs =null;
				   //결과를 담아두는 객체
	//main function 
	public static void main(String[] args) {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
			stmt = conn.createStatement();
			
			//질의어 생성
			String sql = "SELECT*FROM membertbl";
			rs = stmt.executeQuery(sql);
			while(rs.next()) {
				String memberID = rs.getString("memberID");
				String memberName = rs.getString("memberName");
				
				System.out.println("memberID : " + memberID);
				System.out.println("memberName : " + memberName);
			}
					
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}catch (SQLException e) {
			try {
				conn.close();
			} catch (SQLException e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
		}
	}
}

file>new model 모델링 생성, 저장

1 : n

file>open model로 불러오기 가능

Database>Forword Engineer 사용

워크벤치 Forward Engineer 툴로 DB 생성하기
출처: https://dololak.tistory.com/459 [코끼리를 냉장고에 넣는 방법]

Database>Reverse Engineer

워크벤치 Reverse Engineer 툴로 ERD 추출하기
출처: https://dololak.tistory.com/457 [코끼리를 냉장고에 넣는 방법]

 

'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글

12일차 | JavaScript, SQL  (0) 2021.11.30
11일차 | sql  (0) 2021.11.29
9일차 | flex , SQL  (0) 2021.11.25
8일차 | flex 정렬/wrap, 노드.js설치/사용, 자바스크립트 이론  (0) 2021.11.24
7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩  (0) 2021.11.23

관련글

티스토리툴바