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

8일차 | flex 정렬/wrap, 노드.js설치/사용, 자바스크립트 이론

by Sharon kim 2021. 11. 24.

수업 진행

flex, DB : 윈도우 기준 my SQL

<!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_01.html</title>
    <style>
        .parent {
            border: 5px solid green;
            display: flex;
            justify-content: center;
            justify-content: flex-start;
            justify-content: fleend;
        }

        .parent div {
            width: 300px;
            color: #fff;
            text-align: center;
            font-size: 30px;
            margin: 5px;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">.child</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_02.html</title>
    <style>
        .parent {
            height: 300px;
            border: 5px solid green;
            display: flex;
            justify-content: space-between;
            /* justify-content: flex-start;
            justify-content: flex-end; */
        }

        .parent div {
            width: 300px;
            color: #fff;
            text-align: center;
            font-size: 30px;
            margin: 5px;
            background-color: crimson;
        }

        .child1 {
            height: 100px;
        }

        .child2 {}

        .child3 {
            height: 200px;
        }
    </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=device-width, initial-scale=1.0">
    <title>class_03.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 500px;
            display: flex;
            align-items: center;
            /* align-items: flex-start; */
            /*수직으로 쫙 펼치기*/
            /* align-items: stretch; */
            justify-content: center;
        }

        .parent div {
            width: 100px;
            color: #fff;
            font-size: 30px;
            background-color: crimson;

        }

        .child1 {}

        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">.child1</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_04.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 500px;
            display: flex;
            /* 정방향 */
            /* flex-direction: row; */
            /* 역방향 */
            flex-direction: row-reverse;
        }

        .parent div {
            width: 100px;
            height: 100px;
            background-color: crimson;
            margin: 5px;
            text-align: center;
        }
    </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=device-width, initial-scale=1.0">
    <title>class_04 and 05 ex</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 500px;
            margin: 5px;
            display: flex;
            flex-direction: row;
            flex-direction: column-reverse;
        }

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

        .parent2 {
            border: 5px solid crimson;
            height: 500px;
            margin: 5px;
            display: flex;
            flex-direction: row;
            flex-direction: row-reverse;
            flex-direction: column;
        }

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

<body>
    <div class="parent">
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child3">child3</div>
    </div>
    <div class="parent2">
        <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=device-width, initial-scale=1.0">
    <title>class_05.html</title>
    <style>
        .parent {
            border: 5px solid green;
            height: 500px;
            display: flex;
            /* 정방향 세로 배치 */
            flex-direction: column;
            /* 역방향 세로 배치 */
            flex-direction: column-reverse;
        }

        .parent div {
            width: 100px;
            height: 100px;
            background-color: crimson;
            margin: 5px;
            text-align: center;
        }
    </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_06.html</title>
    <style>
        /* flexwrap : nowrap | wrap | wrap-reverse */
        .parent {
            border: 5px solid green;
            /* display : grid는 변화 없지만 flex는 자동 인라인으로 바뀜 */
            display: flex;
            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;
        }

        .parent div {
            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>
</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_07.html</title>
    <style>
        /* flexwrap : nowrap | wrap | wrap-reverse */
        .parent {
            border: 5px solid green;
            /* display : grid는 변화 없지만 flex는 자동 인라인으로 바뀜 */
            display: flex;
            /* flex-direction과 fles-wrap을 축약한 속성 flex-flow */

            flex-flow: column nowrap;
        }

        .parent div {
            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>
</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_08.html</title>
    <style>
        /* 가로 방향으로 wrap 속성 만들어 보기 */
        /* flexwrap : nowrap | wrap | wrap-reverse */
        .parent {
            border: 5px solid green;
            /* display : grid는 변화 없지만 flex는 자동 인라인으로 바뀜 */
            display: flex;
            /* flex-direction과 fles-wrap을 축약한 속성 flex-flow */
            flex-flow: row wrap;
            /* 레이아웃은 grid 콘텐츠는 flex로 만들라 */
        }

        .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="child3">4</div>
        <div class="child3">5</div>
        <div class="child3">6</div>
    </div>
</body>

</html>

node.js 설치하기

<!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_01</title>
    <script>
        let message;

        message = 'Hello' // 문자열을 저장합니다.

        console.log(message);
        // alert('nice to meet you');
    </script>
</head>

<body>

</body>

</html>

let message;

message = 'Hello' // 문자열을 저장합니다.

console.log(message);

// 'use strict'
//엄격모드 -> ECMA6을 쓰겠다. 이 코드가 최상단에 와야 엄격모드 적용

// let user = 'John';
// let age = 25;
// let massage = 'Hello';

//let massage = 'test';
//선언을 한것을 잊고 다시 선언 할 수 있으므로 아래는 권장 안함
let user = 'John', age = 25, massage = 'Hello';

console.log(user, age, massage);

//변수 명명 규칙
//1. 변수명은 오직 문자와 숫자, 기호 $ , _만 사용할 수 있다.
//2. 첫 글자는 숫자가 될 수 없다.

//카멜 표기법

//대소문자 구별
//let apple 와 let Apple는 서로 다른 변수이다.
//예약어 변수로 사용할 수 없습니다.
//let, class, return, function

//use strict 사용해보기 
num = 5;
console.log(num);

//상수

const birthday = '2000.10.10';

// birthday = '1999.10.10';
console.log(birthday);

const COROR_RED = '#f00';
const COROR_GREEN = '#0f0';
const COROR_BLUE = '#00f';
const COROR_ORANGE = '#ff7f00';

let color = COROR_ORANGE;
console.log(color);

//자바스크립트 자료형
//여덟가지 기본 자료형

//no error
let message = "Hello";
message = 12345657;
console.log(message);
//변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

//1. 숫자형(number type)
let n = 123;
n = 12.345;
// *, /, +, -

//특수숫자값
//infinity (무한대)

console.log(1 / 0);

//NaN
console.log("숫자가 아님" / 2);

//2.BigInt (수 뒤에 n붙음)
const bigNumber = 1233333333311111111111111111n;
console.log(bigNumber);

//3.문자형
let str = "Hello";
let str2 = 'Hello';
let str3 = `hello`;

console.log(`this return value ${1 + 100}`);//문자열 안에 값을 받아내는 

//4. 불린형
let check = true;
let check2 = false;

let isGreater = 4 > 1;
console.log(isGreater);

//5. null 값 (null이라는 값이 있음)
let age = null; //존재하지 않는 값, 알 수 없는 값
console.log(age);

//6. undefined (값이 할당되지 않은 상태를 나타낸다.) 
let age2;
console.log(age2);

//7. 객체(object) --> 특수한 자료형

//8. 심볼(symbol) --> 객체에 고유한 식별자를 만들 때 사용합니다.

//9. typeof 연산자
console.log("------------------------");
console.log(typeof (undefined));
console.log(typeof (0));
console.log(typeof (10n));
console.log(typeof (true));
console.log(typeof ("foo"));
console.log(typeof (Math));
console.log(typeof (null));
console.log(typeof (alert));

// 형 변환 type conversion

//숫자 1이 true , 숫자 0이 false
let value = true;

value = String(value);
console.log(typeof (value));

value = "123";

value = Number(value);
console.log(value + 10);

let age = Number("임의의 문자열 123");
console.log(age); //NaN, 형변환이 실패합니다. 

//불린형으로 형변환 
let abc1 = Boolean(1);
console.log(abc1);
let abc0 = Boolean(0);
console.log(abc0);

//기본 연산자

let x = 1;
x = -x;
console.log(x);

// 거듭 제곱 연산자
console.log(2 ** 2);
console.log(2 ** 3);
console.log(2 ** 4);

let s = "my" + "String";
console.log(s);

console.log('1' + 2); //문자열 연산됨
console.log(2 + '1');


console.log(2 + 2 + '1'); //41

//연산자 우선순위
//단항 덧셈, 단항 부정

//증감 감소 연산자

let counter = 2;
counter++;
console.log(counter);//3
console.log(counter--);//3
console.log(counter);//2

// ++counter , counter++ 가 존재 

let a = 1;
let b = 1;
let c = ++a; //2
let d = b++; //1
console.log(c);
console.log(d);

//전위형, 후위형
a = 2;
b = 2;
c = 2;
d = 1;

let test1 = 2;
let test2 = 1 + (test1 *= 2); //5

console.log(test2);

 

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

10일차 | flex 14,15,17 / sql  (0) 2021.11.26
9일차 | flex , SQL  (0) 2021.11.25
7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩  (0) 2021.11.23
6일차 | 그리드 예제 최종, 자바스크립트 round1~5  (0) 2021.11.22
4,5일차 | code_grid3  (0) 2021.11.19

관련글

티스토리툴바