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

9일차 | flex , SQL

by Sharon kim 2021. 11. 25. 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>class_09.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .parent div {
            display: grid;
            align-content: center;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
            margin: 5px;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child4">4</div>
        <div class="child5">5</div>
        <div class="child6">6</div>
        <div class="child7">7</div>
        <div class="child8">8</div>
        <div class="child9">9</div>
        <div class="child10">10</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=
    , initial-scale=1.0">
    <title>class_10.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .parent div {
            display: grid;
            align-content: center;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
            margin-left: 10px;
            background-color: crimson;
        }

        .child1 {
            flex-grow: 1;
            /*부모 전체의 4분의 1만큼 차지함 */
        }

        .child2 {
            flex-grow: 2;
            /*부모 전체의 4분의 2만큼 차지함 */
        }

        .child3 {
            flex-grow: 1;
            /*부모  전체의 4분의 1만큼 차지함 */
        }
    </style>
</head>

<body>
    <div class="parent">

        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child3">child3</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=
    , initial-scale=1.0">
    <title>class_10.ex</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .parent div {
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
            margin-left: 10px;
            background-color: crimson;
        }

        .child1 {
            flex-grow: 2;
        }

        .child2 {
            flex-grow: 6;
        }

        .child3 {
            flex-grow: 2;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">1</div>
        <div class="child1">2</div>
        <div class="child2">3</div>
        <div class="child2">4</div>
        <div class="child2">5</div>
        <div class="child2">6</div>
        <div class="child2">7</div>
        <div class="child2">8</div>
        <div class="child3">9</div>
        <div class="child3">10</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=
    , initial-scale=1.0">
    <title>class_11.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .parent div {
            width: 100px;
            height: 200px;
            color: #fff;
            text-align: center;
            line-height: 200px;
            background-color: crimson;
        }

        /* flex -shrink 기본값은 항상 1
            플렉스 자식요소의 감소 너비 비율을 설정  */
        .child1 {
            flex-grow: 1;
            margin: 1px;
            flex-shrink: 1;
        }

        .child2 {
            flex-grow: 1;
            margin: 1px;
            flex-shrink: 1;
        }

        .child3 {
            flex-grow: 1;
            margin: 1px;
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <div class="parent">

        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child3">child3</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=
    , initial-scale=1.0">
    <title>class_12.html</title>
    <style>
        .parent {
            border: 5px solid green;
            display: flex;
        }

        .parent div {
            width: 100px;
            height: 200px;
            color: #fff;
            text-align: center;
            line-height: 200px;
            background-color: crimson;
            /* flex-grow: 1; */
        }

        /* flex - basis : auto 가 기본값
           플렉스 자식요소 공간 배분 전 기본 너비 설정  */
        .child1 {
            flex-basis: 100px;
            margin: 1px;
        }

        .child2 {
            flex-basis: 200px;
            margin: 1px;

        }

        .child3 {
            flex-basis: 300px;
            margin: 1px;

        }
    </style>
</head>

<body>
    <div class="parent">

        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</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=
    , initial-scale=1.0">
    <title>class_13.html</title>
    <style>
        .parent {
            display: flex;
        }

        .child {
            background-color: purple;
            height: 50px;
            line-height: 50px;
            color: #fff;
            text-align: center;
            margin: 5px;
            flex: 1;
        }

        /* 자식요소에서 사용하는 단축속성
        flex :[증감너비][감소너비][기본너비]
        flex : [flex-grow][flex-shrink][flex-basis]
        flex : 1 1 50px; // 증가너비, 감소너비, 기본너비
        flex : 1 1; //증가너비, 감소너비
        flex : 1 50px; //증가너비, 기본너비
        flex 단축속성에서 flex-grow 를 제외하고 모두 생략가능함.
        flex 1;로만 작성하면 flex-grow : 1;과 같다.
          */
    </style>
</head>

<body>

    <div class="parent">
        <div class="child">1</div>
    </div>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>

    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
    </div>
    <div class="parent">

        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
        <div class="child">12</div>
    </div>
</body>

</html>

class_01.sql

-- C R U D 
select * from membertbl;

select memberID, memberAddress from membertbl; 

select * from membertbl where memberName = '당탕이';
--  jee 조회 해주세요 
select * from membertbl where memberID = 'Jee';

create table mytable(id int);

class_02.sql

SELECT * FROM shopdb.indextbl;


insert into indextbl values('firstKim1', 'hong1', '2021.11.25');
insert into indextbl values('firstKim2', 'hong2', '2021.11.25');
insert into indextbl values('firstKim3', 'hong3', '2021.11.25');
insert into indextbl values('firstKim4', 'hong4', '2021.11.25');
insert into indextbl values('firstKim5', 'hong5', '2021.11.25');

select * from indextbl;

select * from indextbl where first_name = 'firstKim5';

-- 인덱스 생성 방법 
-- CREATE INDEX <인덱스명> ON <테이블명> (컬럼명1, 컬럼명2, ...); first_nameindextbl
create index idx_indextbl_firstname on indextbl(first_name);


select * from indextbl where first_name = 'firstKim5';



/*
	인덱스 개념 
    
*/

class_03.sql

-- 인덱스 개념 

create table indextbl
	(first_name varchar(14), last_name varchar(16), hire_date date);
    
select * from indextbl;

class_04.sql

/**
	뷰(view)란 가상의 테이블 이라고 생각하면 된다 ( 그래서 뷰를 뷰 테이블) 이라고도 부른다. 
    하지만 엄밀히 말하면 정확한 말은 아니다. 
	즉, 사용자의 입장에서 테이블과 동일하게 보이지만, 뷰는 실제 행 데이터를 가지고 있지 않다. 
    진짜 개념은 테이블에 링그된 개념이다. 
	
    새로운 아르바이트 생을 고용해서 회원 정보를 수정하려는 일을 시킨다고 생각해 봅시다. 
    주소만 변경하는 작업이 필요한데 아르바이트 생에게 회원 정보 테이블에 접근 권한을 부여하게 
    되면 주민번호, 전화번호, 모든 데이터를 오픈하게되서 중요한 개인정보를 열람하게 된다. 
    고의든 실수든 개인정보 유출이라는 심각한 상황이 발생될 있다. 
    
    -- CREATE VIEW 뷰이름 AS 쿼리구문; 
    
	
    
*/

create view uv_membertbl
as 
	select memberID, memberAddress from membertbl;
    

select * from uv_membertbl;

select * from membertbl;

class_05.sql

-- 스토어드 프로시저 
-- stored procedure란 Mysql에서 제공해주는 프로그래밍 기능을 말합니다. 
-- 일련의 쿼리를 마치 하나의 함수처럼 실행하기 위한 쿼리의 집합이다. 

select * from membertbl where memberName = '당탕이';
select * from producttbl where productName = '냉장고'; 

-- 스토어드 프로시저 생성 방법 
DELIMITER // 
create procedure myProc()
begin

	select * from membertbl where memberName = '당탕이';
	select * from producttbl where productName = '냉장고'; 
    
end //
DELIMITER ;

-- 프로시저 사용방법 
call myProc();

class_06.sql

/*
	테이블, 인덱스, 뷰, 프로시저
    트리거
    
    트리거란 테이블에 부착되어서  insert, update, delete 작업이 발생되면 실행되는 코드를 말한다.
    
    학생 테이블 --> 자퇴(행을 삭제)
    나중에 와서 다녔던 기록을 달라 부탁
    
    자퇴생 테이블을 따로 만들어서 테이블에 데이터를 옮겨두면 된다.
    
    --> 트리거를 알게 되면 자동으로 자퇴생 테이블에 데이터를 옮겨 둘 수 있다.
	
*/

-- 시나리오1
insert into membertbl (memberID, memberName, memberAddress)
values('figure', '연아','경기도 군포시 당정도');

select*from membertbl;

-- 시나리오2 업데이트 사용법

-- update 구문

-- db만질 때 조심해서 천천히 할 것
update membertbl set memberAddress = '서울시 강남구 역삼동' where memberName = '연아';

-- delete 구문
-- 삭제시 조심 !!!!!

delete from membertbl where memberName = '연아';

-- 시나리오3
-- 탈퇴한 회원에 대해 관리하고 싶다면 따로 탈퇴 테이블을 만들어 둔다.

-- 테이블 생성
create table deletedMembertbl(
	memberID char(8),
    memberName char(5),
    memberAddress char(20),
	deletedDate date -- 삭제한 날짜
);

-- 시나리오4
-- 트리거 구문 생성

DELIMITER //
CREATE trigger tgr_deletedMembertbl -- 트리거 이름
	AFTER DELETE -- 삭제 후에 작동하게 지정
    ON membertbl -- 트리거를 부착할 테이블을 지정
    FOR EACH ROW -- 각 행마다 적용시킴
BEGIN
	-- OLD 테이블의 내용을 백업 테이블에 삽입
	INSERT INTO deletedMemberTBL
		VALUE(OLD.memberID, OLD.memberName, OLD.memberAddress, CURDATE());

END //

-- 시나리오 5

select*from deletedmembertbl;

-- membertbl에 삭제구문을 실행
delete from membertbl where memberName = '연아';

-- 트리거는 내가 실행하는 것이 아닌 자동으로 구문이 실행 되는 것

 

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

11일차 | sql  (0) 2021.11.29
10일차 | flex 14,15,17 / sql  (0) 2021.11.26
8일차 | flex 정렬/wrap, 노드.js설치/사용, 자바스크립트 이론  (0) 2021.11.24
7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩  (0) 2021.11.23
6일차 | 그리드 예제 최종, 자바스크립트 round1~5  (0) 2021.11.22

관련글

티스토리툴바