close
프로필 배경
프로필 로고

도로그

HTML/React · 2023. 8. 28. fullscreen 넓게보기

[React]backtick, nullish, dataset, encode, decode, formData, function, structure, promise then, catch, boot strap, layout

backtick

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/01_backtick.js"></script>
</body>
</html>

js

// 백틱(backtick)
// 모던자바스크립트 === 이크마(ECMA Script) 자바스크립트
// 메타버스 === 가상환경
// 예제 : 아래와 같이 문자열과 변수를 같이 써서 출력하세요
// 출력 : num = 10
//       num2 = 20
//       num3 = 30
// let num = 10;
// let num2 = 20;
// let num3 = 30;
// console.log("num = " + num + "\n"
//            + "num2 = " + num2 + "\n"
//            + "num3 = " + num3
//            )
// ``(백틱) : 키보드 왼쪽 위에 1 숫자 옆에 자판(홑따옴표 아님)
// 문자열을 표현하는 새로운 방법
// 사용법 : `문자열${변수명}`;
// let num = 10;
// let num2 = 20;
// let num3 = 30;
// console.log(`num = ${num}
// ,num2 = ${num2}
// ,num3 = ${num3}`);

// 연습문제 1) 변수 2개를 사용해서 백틱으로 화면에 출력하세요
// 입력 : x
// 출력 : 안녕하세요 우리 교육센터에 방문하신 것을 환영합니다.
// let val = "안녕하세요";
// let val2 = "교육센터";
// console.log(`${val} 우리 ${val2}에 방문하신 것을 환영합니다.`);

// 2) 변수 3개를 사용해서 백틱으로 화면에 출력하세요
// 출력 :
// 4월은 잔인한 달 - 엘리엇
// 4월은 가장 잔인한 달
// 죽은 땅에서 라일락을 키워내고
// 기억과 욕망을 뒤섞고
// 봄비로 잠든 뿌리를 뒤흔든다
let val = "4월";
let val2 = "잔인한 달";
let val3 = "라일락";
console.log(`
${val}은 ${val2} - 엘리엇
${val}은 가장 ${val2}
죽은 땅에서 ${val3}을 키워내고
기억과 욕망을 뒤섞고
봄비로 잠든 뿌리를 뒤흔든다
`)

// \n과 + 와 ""를 안 써도 됨

결과

optional nullish

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/02_optional_nullish.js"></script>
</body>
</html>

js

// 옵셔널 널리쉬(optional nullish)
// 1) 용도 : 객체나 함수에 대해 접근할 때 사용
// why? 자바스크립트 / 자바 언어의 문제점
// 소스에서 값이 null 이 나오면 프로그램이 비정상 종료가 됨
// => 서비스가 갑자기 다운(예: 카카오톡이 서비스 다운)
// 코딩 : null 에러를 회피해서 코딩을 전통적으로 했음
// 아래 예)
let num = null;
// 미리 변수의 값에 null 이 있는지 체크했음
if( num == null) {
    console.log("이 기능은 실행하지 않습니다.");
}

// 개선된 예제 : 옵셔널 널리쉬 사용
// user 가 null 이면 강제로 undefined 값으로 변경함
// 사용법 : 변수명?.속성명
let user = null; // 객체 , address 속성이 있는지 없는지 체크
// 객체의 속성 호출 : user.address => user = null;
//                   null.address (에러 : 서비스 다운)
console.log(`user 는 ${user?.address}`); // 잠시 바꿔주는 거 변수 변경x
let u = 123;
console.log(`u 는 ${u?.address}`);
console.log(u)
console.log(user)

결과

optional nullish

 

npm init -y 입력 (package.json 생성)

"type": "module" 추가

{
  "name": "05_import_module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

 

var es6 js

// "type": "module" 추가
// var_es6.js (*****)
// 모듈(module) : html / css / js (파일을 각각 분리하여 코딩함)
// html 안에 css / js 문법이 혼재하고 있으면 가독성 떨어짐
// 각각의 파일로 분리해서 보통 코딩함 (모듈화)
// js 모듈 : 자바스크립트 끼리 긴것들은 분리해서 코딩하는 것
// 원인 ) 1개 js 가 1000라인이상되면 가독성 현저하게 떨어짐
// => js 끼리 파일을 분리해서 사용(js 모듈)
// import : 다른 js 파일에서 변수/함수를 가져오기 기능
// export : 다른 js 파일에서 사용할 수 있도록 일부 기능을 내보내기
// 단, export 된 변수/함수만 import 할 수 있음
const odd = "홀수입니다.";
const even = "짝수입니다.";
const hello = () => console.log("안녕하세요");

// 위의 상수 2개/함수 1개 내보내기(export)
// 사용법 : export {변수, 변수2, ..., 함수, 함수2...}
export {odd, even, hello};

index es6

// index_es6.js
// import 받을 js 파일
// import : 기능(변수/함수)를 다른 js 파일에서 가져오기
// 사용법 : import {변수명,함수명...} from "js파일경로/파일명";
import {odd, even, hello} from "./var_es6.js";

// 예제 : 값이 홀수 인지 짝수인지 판단하기
let num = 3; // 기본값

// 짝수
if(num % 2 === 0) {
    console.log(even); // 짝수입니다. 출력
    hello() // 다른 js 정의된 함수 실행 : 안녕하세요
} else {
    console.log(odd); // 홀수입니다. 출력
    hello() // 다른 js 정의된 함수 실행 : 안녕하세요
}

결과

01 exam

var es6 js

// 01_exam/var_es6.js
// TODO: 연습문제 - 아래 지시대로 export 하고 다른 파일에서
// TODO: import 해서 코딩을 완성하세요
// TODO: 3의 배수이면 3의 배수입니다. 출력, 아니면 3의 배수가 아닙니다.
const three = "3의 배수입니다.";
const notThree = "3의 배수가 아닙니다.";

// TODO: export 하세요
export {three, notThree}

index ex6 js

// index_es6.js
// TODO: num 이 3의 배수인지 판단해서 가져온 변수를 이용해서 출력하세요
// 입력 : x
// 출력 : 3의 배수입니다.
// TODO: import 하세요

import {three, notThree } from "./var_es6.js";

// 초기값
let num = 3;

if(num % 3 === 0){
    console.log(three)
} else {
    console.log(notThree)
}

결과

02 exam

var es6 js

// 02_exam/var_es6.js
const ending = () => console.log("모던자바스크립트 마무리 단계네요!");

// TODO : 함수 내보내기(export)
// 1개짜리 변수 또는 함수는 아래와 같이 export 해야함
// 사용법 : export default 함수명;
export default ending;

index ex6 js

// 02_exam/index_es6.js
// TODO: 아래 지시사항대로 코딩하고, 함수를 가져와서 출력하세요
// 변수 val 의 문자열 길이가 홀수이면 ending() 함수를 실행하세요
// 입력 : x
// 사용법 : import 함수명 from "경로/js파일명";
// TODO: import 하세요
import ending from "./var_es6.js";

let val = "greetings"; // 길이 : 9

// TODO: val 의 문자열 길이가 홀수 인지 판단하여 홀수이면 ending() 실행하세요

if(val.length % 2 === 1){
    ending();
}

결과

dataset

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- HTML3 > HTML4 > HTML5 -->
    <!-- dataset 예제 : 태그 안에서 속성으로 사용 -->
    <!-- 속성에 값을 저장할 용도로 사용 : 변수 -->
    <!-- 표기법 : 단어-단어 (마이너스표기법 사용) -->
    <!-- 사용법 : (html에서)data-변수명="값"  -->
    <!-- 사용법 : (js에서) 태그.dataset.변수명 -->
    <h1 data-big-subject>일일 문제 풀이</h1>
    <p data-id="0" data-quest-string="question">
        - 영웅의 영어 스펠링은?
    </p>
    <script>
        // 태그 가져오기 : 선택함수 : document.querySelector("css선택자");
        let pData = document.querySelector("p");
        // 출력 : data-변수명(html)
        // (js에서) 태그.dataset.변수명
        console.log(pData.dataset.id); // 0
        console.log(pData.dataset.questString); // question
    </script>
</body>
</html>

결과

encode

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 프론트엔드(react) <->(통신:axios) 벡엔드(springboot) -->
    <!-- 통신 : 데이터 전송 시 한글이 인식이 안될 경우 있음 -->
    <!-- 인코딩/디코딩 : 데이터 전송시 인식안되는 문자들을 일시적으로
        브라우저에서 인식할 수 있는 문자로 바꾸는것(인코딩)
        , 다시 한글등으로 되돌리는것(디코딩)
     -->
     <script>
        // 예제 : "안녕하세요 , 홍길동" 인코딩해서 출력하고
        // 다시 디코딩해서 출력하세요

        // 한글 인코딩
        // 사용법 : encodeURIComponent("문자열")
        let encodeKor = encodeURIComponent("안녕하세요");
        let encodeName = encodeURIComponent("홍길동");
        // url 주소 만들기
        let encodeUrl
            = `http://www.google.com/${encodeKor}/${encodeName}`;
        console.log(encodeUrl);

        // 한글 디코딩(받는쪽)
        console.log(decodeURIComponent(encodeKor)); // 안녕하세요
        console.log(decodeURIComponent(encodeName)); // 홍길동
     </script>
</body>
</html>

결과

function

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 기술면접 대비  -->
    <script>
        // 이론) 자바스크립트 함수의 특징
        // 호이스팅 : 함수의 위치를 강제로 위로 이동시키는것
        // 대상 : 1) 함수 2) 변수
        // 예제 : 함수 호이스팅 예제
        let hello = "안녕하세요";
        // 1) 함수 선언식 (함수표현식, 화살표함수 : 호이스팅 없음)
        function sample() {
            alert("안녕");
        }

        // 예제 2 : 변수 호이스팅 예제
        var num; // 변수 호이스팅이 일어남
        // 위의 코딩 문제점 발생 : 1) 변수의 순서가 뒤죽박죽됨
        //                       2) 중복 변수 정의 : 버그를 일으킬수 있음
        // => let / const 변수명 으로 사용할 것(추천, 호이스팅 없음)
    </script>
</body>
</html>

formData

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 04_formData.html -->
    <!-- 파일 업로드 할때 일부 사용함 -->
    <!-- form 양식 태그 : html 태그 , input 태그 -->
    <!-- 특징 : 페이지 이동시 데이터를 전송할 수 있음 -->
    <!-- 예제  -->
    <form id="sign">
        <input type="text" name="first", value="Bora">
        <input type="text" name="last", value="Kim">
    </form>
    <script>
        // 1) form 태그 데이터 가져오기
        // html : form 태그 : <form></form>
        // js   : FormData 객체(form 태그와 같음)
        // 선택함수 : document.querySelector("css선택자")
        let sign = document.querySelector("#sign"); // form 태그
        let formData = new FormData(sign); // html form 과 연결됨
        // 출력
        console.log("formData.get()", formData.get("first")); // Bora
        console.log("formData.get()", formData.get("last")); // Kim

        // **2) FormData 빈 객체를 만들어서 조작
        // 이미지 및 문자열 등을 저장해서 다른 페이지로 전송할 수 있음
        // 활용 예 ) 이미지 업로드
        let formData2 = new FormData(); // 빈 객체 생성
        // (1) formData 에 값 추가
        // 사용법 : formData변수명.append("키이름", "값");
        formData2.append("name", "kildong");
        formData2.append("first", "hong");
        // 출력
        // 사용법 : formData변수명.get("키이름");
        console.log("name", formData2.get("name"));   // kildong
        console.log("first", formData2.get("first")); // hong

        // (2) formData 값 수정 :
        // 사용법 : formData변수명.set("키이름", "수정될값");
        formData2.set("name", "yellow");              // yellow
        console.log("name", formData2.get("name"));   // yellow
       
        // (3) formData 값 삭제 :
        // 사용법 : formData변수명.delete("키이름");
        formData2.delete("name");                     // 키 삭제
        console.log("name", formData2.get("name"));   // undefined
    </script>
</body>
</html>

결과

structure

js

// 05_structure.js
// 모던자바스크립트(===ECMAScript) 신기능
// TODO: 1) 배열 구조분해 할당 : 가독성 증가(향상)
// 예제) 일반 코딩
// 변수명만 보고 추측이 가능하게 이름을 짓는것이 좋음 :
// let array = [1,2]; // 숫자 배열(가독성 저하)
// console.log(array[0], array[1]); // 1 2

// 예제) 배열 구조분해 할당 : 위에꺼 고침
// TODO: 사용법 : let [변수명, 변수명2...] = [배열값, 배열값2...];
// let [firstNum, secondNum] = [1,2];
// // firstNum=1, secondNum=2
// console.log(firstNum, secondNum); // 1 2

// 연습문제 1) 배열 구조분해 할당 문제
// 아래와 같이 배열이 있습니다. 구조분해 할당 이용해서 출력하세요
// 입력 : x
// 출력 : hello node react
let array = ["hello", "node", "react"];
// TODO: 구조분해 할당 이용코딩
// 힌트 : let ? = array;
let [first, second, third] = array;
console.log(first, second, third);

// TODO: 2) 객체 구조분해할당
// TODO: 객체의 속성값을 분해해서 다른 변수에 저장
// 예제 2)
let candyMachine = {
    name: "캔디",
    count: 5
}
// 출력
console.log(candyMachine.name, candyMachine.count); // 캔디 5

// 객체 구조분해 할당
// 객체의 속성명과 동일한 변수명을 찾아서 저장됨
// TODO: 사용법 : let {속성명, 속성명2 ...} = {속성명:값, 속성명2: 값2 ...}
let {name, count} = candyMachine;
console.log(name, count);

// 연습문제 2) 객체 구조분해 할당 문제
// 아래와 같이 객체가 있습니다. 구조분해 할당 이용해서 출력하세요
let dept = {
    no : 1,
    dname : "Sales",
    loc : "부산"
}
console.log(dept.no, dept.dname, dept.loc);
let {no, dname, loc} = dept;
console.log(no, dname, loc)

결과

promise then

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/01_promise_then.js"></script>
</body>
</html>

js

// node : 1) 비동기 기능(성능 증가)
// 자바스크립트 코딩(비동기 프로그래밍 한다)
// 비동기 : 요청하면 결과가 먼저 처리한 곳에서 주는대로 실행함
//    장점 : 성능 증가
//    단점 : 순서에 맞는 결과가 중요하면 결과가 꼬일 수 있음
//    예) 은행 계좌 : 입금 -> 출금(비동기 시 입금되기전에 출금될수 있음)
//    (해결책 : promise 이용 : 순서에 입각해서 실행을 할 수 있음)
// (참고) 동기 : 요청한 순서대로 결과가 옴(c언어 등)
// 예제 :
// 1st 순서 :
console.log("학교에 갑니다.");
// 2nd 순서 :
// 일정시간동안 지연해서 실행하는 함수
// 사용법 : setTimeout(함수(), 지연시간(ms));
setTimeout(()=> {
    console.log("학교에 도착했습니다.");
}, 1000);
// 3rd 순서 :
console.log("열심히 코딩을 합니다.");

// TODO: 프라미스를 이용해서 개선
// 알필요없음 : 프라미스 객체 생성(x)
var goSchool = new Promise((resolve, reject) => {
    // 2초 지연 함수 : Promise 객체에 넣음
    setTimeout(function() {
        console.log("학교에 도착했습니다.");
        // resolve() : 결과 성공했다는 확인 함수
        resolve();
    }, 2000);
});

// TODO: 여기서 부터 알필요 있음
// 1st 실행
console.log("학교에 갑니다.");
// 2nd : 비동기 코딩(순서를 지켜 출력시키기)
goSchool.then(()=>{
    // console.log("학교에 도착했습니다."); 실행이 끝나면
    // 아래 실행문이 실행되게 보장하는 함수 : then()
    console.log("열심히 코딩을 합니다.");
});

결과

1초뒤 나옴

2초뒤 나옴

위에 코드 출력되고 후에 나옴(2번째줄)

promise then catch

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/02_promise_then_catch.js"></script>
</body>
</html>

js

// promise : 비동기 코딩에서 순서에따라 실행되게 해주는 객체
// 예제 2) 아래 프라미스 객체가 있음
// 성공 : 10보다 작은값이 들어옴
// 실패 : 10보다 크면
let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        var num = parseInt(prompt("10 미만의 숫자를 입력하십시오"));
        if( num < 10 ) {
            // 결과가 성공 시 실행됨
            // 매개변수값을 .then 함수 안으로 전달할 수 있음
            // .then() 으로 전달됨
            resolve(num);
        } else {
            // 결과가 실패 시 실행됨
            // 매개변수값을 .then 함수 안으로 전달할 수 있음
            // .catch() 로 전달됨
            reject(`오류 :  ${num}은 10이상입니다`);
        }
    }, 1000);
});

// TODO: 프라미스 객체의 리턴함수 then() , catch() 사용법
// then() : 프라미스 객체안의 코딩이 성공하면 실행되는 함수
// catch() : 프라미스 객체안의 코딩이 실패하면 실행되는 함수
promise.then((num)=>{
    // 프라미스 객체 안의 코딩이 성공했을때 자동 실행됨
    console.log(num + "10 미만의 숫자를 입력하셨네요!");
})
.catch((error) => {
    // 프라미스 객체 안의 코딩이 실패했을때 자동 실행됨
    console.log(error);
});

결과

10입력 시

hello bootstrap

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        div {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1>Hello, world!</h1>

    <!-- 1st 부트스트랩 클래스 -->
    <!-- 사용법 : class="이름" : 이름: 미리 정의가 되어 있음 -->
    <!-- class="container" : 가상 페이지를 만들어서 중앙정렬시켜줌-->
    <div class="container">
        <h1>안녕하세요 홍길동입니다.</h1>
    </div>
</body>
</html>

결과

layout grid

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols">
    <!-- bootstrap 키워드 사용법 -->
    <!-- class="container"   : 가상 페이지 중앙정렬 -->
    <!-- class="text-center" : 글자 중앙 정렬 -->
    <div class="container text-center">
        <!-- 기본사용법 : 1) class="미리정의된키워드" -->
        <!-- 아래 배치(layout) 관련된 키워드 -->
        <!-- class="row" : 1행 -->
        <!-- class="col" : 1열 -->
        <!-- 크기를 일정하게 분배해서 만들어짐 -->
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>

  </body>
</html>

결과

layout grid2

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols">
    <!-- 다양한 크기의 배치 -->
    <!-- class="container text-center" : 가상의 페이지 중앙정렬,
                                글자 중앙 정렬이 적용됨
    -->
    <div class="container text-center">
        <!-- 부트스트랩 행 : class="row",  -->
        <!-- 부트스트랩 열 : class="col",  -->
        <!-- TODO : 예제 : 1행 2열 -->
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
        <!-- TODO : 예제 : 1행 3열 -->
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
    </div>

  </body>
</html>

결과

layout grid3

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols">
    <!-- 부트스트랩 키워드 :  -->
    <!-- class="container text-center" : 가상페이지 중앙정렬 , 글자 중앙정렬 -->
    <div class="container text-center">
        <!-- 행 : class="row" -->
        <!-- 열 : class="col" -->
        <!-- TODO: 1행 4열 -->
        <div class="row">
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
            <div class="col">Column</div>
        </div>
        <!-- TODO: 1행 2열 : 1개(8칸), 1개(4칸) -->
        <!-- TODO: 부트스트랩 가로 12칸 기준으로 디자인함 : 1칸(임의의 크기로 정해놓음) -->
        <div class="row">
            <!-- 부트스트랩 배치 (행, 열) 크기 변화 : 총 12칸 -->
            <!-- 사용법 : class="col-숫자" -->
            <div class="col-8">Column</div>
            <div class="col-4">Column</div>
        </div>
    </div>
  </body>
</html>

결과

exam layout grid4

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- TODO: 가상의 페이지 중앙정령, 글자 중앙정렬 -->
    <div class="container text-center">
      <!-- TODO: 1st 행은 3열 -->
      <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
      <!-- TODO: 2nd 행은 1열(5칸), 2열(7칸) -->
      <div class="row">
        <div class="col-5">col-5</div>
        <div class="col-7">col-7</div>
      </div>
      <!-- TODO: 3rd 행은 1열, 2열(3칸), 3열(4칸), 4열(1칸) -->
      <div class="row">
        <div class="col">col</div>
        <div class="col-3">col-3</div>
        <div class="col-4">col-4</div>
        <div class="col">col</div>
      </div>
    </div>
  </body>
</html>

결과

layout grid horizontal

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- class="container text-center" : 중앙정렬(글자, 가상페이지) -->
    <div class="container text-center">
      <!-- 1행 2열(4칸) -->
      <!-- TODO: 열을 중앙 정렬하기 -->
      <div class="row justify-content-center">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 왼쪽 정렬하기 -->
      <div class="row justify-content-start">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
      <!-- TODO: 열을 오른쪽 정렬하기 -->
      <div class="row justify-content-end">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
    </div>
  </body>
</html>

결과

layout grid vertical

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- 기본 사용법 : class="미리정의된키워드" -->
    <!-- 1행 3열 -->
    <!-- 1행 : class="row" -->
    <!-- 1열 : class="col" -->
    <!-- 부트스트랩 기본 디자인 : 가로(12칸) -->
    <div class="container text-center">
      <!-- TODO: 세로 중앙 정렬 -->
      <div class="row align-items-center">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 위쪽 정렬 -->
      <div class="row align-items-start">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
      <!-- TODO: 세로 아래쪽 정렬 -->
      <div class="row align-items-end">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
      </div>
    </div>
  </body>
</html>

결과

layout grid both

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body
    class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
  >
    <!-- 사용법 : class="container text-center" : 가상페이지,글자 중앙정렬 -->
    <div class="container text-center">
      <!-- 1행 3열 -->
      <!-- 사용법 : class="row" : 1행 -->
      <!-- 사용법 : class="col" : 1열 -->
      <div class="row">
        <!-- TODO: 가로세로 위쪽/왼쪽 정렬 -->
        <div class="col align-self-start">col</div>
        <!-- TODO: 가로세로 중앙 정렬 -->
        <div class="col align-self-center">col</div>
        <!-- TODO: 가로세로 아래쪽/오른쪽 정렬 -->
        <div class="col align-self-end">col</div>
      </div>
    </div>
  </body>
</html>

결과

img fluid

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- 사용법 : class="container" : 가상페이지 중앙정렬 -->
    <div class="container">
        <!-- .jpg : 이미지 포맷(.png 등) -->
        <!-- jpg(이미지 압축), png(이미지 원본) -->
        <!-- 프로젝트 : 인터넷 이미지를 다운로드(불법) -->
        <!-- 무료 이미지 사이트 : 픽사베이(pixabay) -->
        <!-- class="img-fluid" === max-width : 100%; height:auto -->
        <!-- 가로 창크기를 늘렸을때 원본이미지를 훼손하지 않는범위에서 늘어남 -->
        <img src="./img/pic_1.jpg" class="img-fluid" alt="사과">
    </div>
  </body>
</html>

결과

img thumnail

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
        <!-- class="img-thumbnail"
                   : 이미지에 둥근 1px 테두리 모양을 제공(회색) -->
        <img src="./img/pic_1.jpg" class="img-thumbnail" alt="사과">
    </div>
  </body>
</html>

결과

img float

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- TODO: 왼쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-start" alt="소년" />
    <!-- TODO: 오른쪽 정렬 -->
    <img src="./img/doit.jpg" class="float-end" alt="소년" />
    <!-- TODO: 중앙 정렬 -->
    <img src="./img/doit.jpg" class="mx-auto d-block" alt="소년">
  </body>
</html>

결과

exam img float

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- 왼쪽 정렬 -->
    <img src="./img/cat1.jpg" class="float-start" alt="고양이" />
    <!-- 오른쪽 정렬 -->
    <img src="./img/cat2.jpg" class="float-end" alt="고양이" />
  </body>
</html>

결과

table

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- 부트스트랩 테이블 : class="table" -->
    <div class="container">
      <table class="table table-striped table-hover">
        <!-- 제목 -->
        <thead>
          <tr class="table-dark">
            <th>#</th>
            <th>First</th>
            <th>Last</th>
          </tr>
        </thead>
        <!-- 본문 -->
        <tbody>
          <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
          </tr>
          <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 자동정렬 단축키 : ctrl + alt + l (인텔리제이 단축키) -->
  </body>
</html>

결과

text color

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- TODO: 부트스트랩 글자색 종류 -->
    <!-- 사용법 : class="container" : 가상페이지 중앙정렬 -->
    <div class="container">
      <!-- class="text-primary" : 파란색 -->
      <p class="text-primary">Lorem ipsum dolor sit amet</p>
      <!-- class="text-secondary" : 회색 -->
      <p class="text-secondary">Lorem ipsum dolor sit amet</p>
      <!-- class="text-success" : 녹색 -->
      <p class="text-success">Lorem ipsum dolor sit amet</p>
      <!-- class="text-danger" : 빨간색 -->
      <p class="text-danger">Lorem ipsum dolor sit amet</p>
      <!-- class="text-warning" : 노란색 -->
      <p class="text-warning">Lorem ipsum dolor sit amet</p>
      <!-- class="text-info" : 하늘색 -->
      <p class="text-info">Lorem ipsum dolor sit amet</p>
    </div>
  </body>
</html>

결과

text align

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- TODO: 글자 정렬(왼/중앙/오른쪽) -->
      <!-- 중앙정렬 -->
      <p class="text-center">Lorem ipsum dolor sit amet</p>
      <!-- 왼쪽정렬 -->
      <p class="text-start">Lorem ipsum dolor sit amet</p>
      <!-- 오른쪽정렬 -->
      <p class="text-end">Lorem ipsum dolor sit amet</p>

      <!-- TODO: 대소문자 -->
      <!-- 대문자 -->
      <p class="text-uppercase">Lorem ipsum dolor sit amet</p>
      <!-- 소문자 -->
      <p class="text-lowercase">Lorem ipsum dolor sit amet</p>

      <!-- TODO: 글자크기(font-size) 변경(1~6) -->
      <p class="fs-1">Lorem ipsum dolor sit amet</p>
      <p class="fs-2">Lorem ipsum dolor sit amet</p>
      <p class="fs-3">Lorem ipsum dolor sit amet</p>
      <p class="fs-4">Lorem ipsum dolor sit amet</p>
      <p class="fs-5">Lorem ipsum dolor sit amet</p>
      <p class="fs-6">Lorem ipsum dolor sit amet</p>
    </div>
  </body>
</html>

결과

background color

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- 사용법 : bg-primary : 배경색(파란색) -->
      <div class="text-white bg-primary">
        Lorem ipsum dolor sit amet</div>
      <!-- 사용법 : bg-secondary : 배경색(회색) -->
      <div class="text-white bg-secondary">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-success : 배경색(녹색) -->
      <div class="text-white bg-success">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-danger : 배경색(빨간색) -->
      <div class="text-white bg-danger">
        Lorem ipsum dolor sit amet</div>
    <!-- 사용법 : bg-warning : 배경색(노란색) -->
      <div class="text-dark bg-warning">
        Lorem ipsum dolor sit amet</div>
    </div>
  </body>
</html>

결과

width height

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- TODO: 가로 예제 -->
      <!-- TODO: class="w-25" : w(width)-숫자(25%,50%,75%,100%) -->
      <!-- TODO: class="p-3"  : p(padding,안쪽여백)-숫자(1 ~ 5) -->
      <!-- TODO: class="m-3"  : m(margin,바깥여백)-숫자(1 ~ 5) -->
      <!-- TODO: 마진/패딩 : (상(top)/하(bottom)/좌(start)/우(end)) -->
      <!-- TODO: 마진/패딩 조합 : pt-3(padding-top) : 패딩/위쪽 -->
      <!-- TODO: 마진/패딩 조합 : pb-3(padding-bottom) : 패딩/아래쪽 -->
      <!-- TODO: 마진/패딩 조합 : ps-3(padding-start) : 패딩/왼쪽 -->
      <!-- TODO: 마진/패딩 조합 : pe-3(padding-end) : 패딩/오른쪽 -->
      <div class="w-25 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-50 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-75 p-3" style="background-color: #eee">Lorem</div>
      <div class="w-100 p-3" style="background-color: #eee">Lorem</div>

      <!-- TODO: 세로 예제  -->
      <!-- TODO: class="h-25" : h(height)-숫자(25%,50%,75%,100%) -->
      <!-- TODO: class="d-inline-block" : css(display: (none, inline, inline-block))) -->
      <!-- TODO:        d-디스플레이속성 : (display: (none, inline, inline-block, block)) -->
      <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
        <div
          class="h-25 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 25%
        </div>
        <div
          class="h-50 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 50%
        </div>
        <div
          class="h-75 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 75%
        </div>
        <div
          class="h-100 d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height 100%
        </div>
        <div
          class="h-auto d-inline-block"
          style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
        >
          Height auto
        </div>
      </div>
    </div>
  </body>
</html>

결과

border

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- bootstrap css cdn : 일반적인 디자인 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-border-utils">
    <div class="container">
        <!-- TODO: class="border" : 테두리(4군데 모두) -->
        <!-- TODO: 상(top)/하(bottom)/좌(start)/우(end) 조합가능 -->
        <span class="border"></span>
        <span class="border-top"></span>
        <span class="border-bottom"></span>
        <span class="border-start"></span>
        <span class="border-end"></span>

        <!-- 테두리 색깔 : (primary(파란색) ~ warning(노란색) 등) -->
        <span class="border border-primary"></span>
        <span class="border border-secondary"></span>
        <span class="border border-success"></span>
        <span class="border border-danger"></span>
        <span class="border border-warning"></span>
        <span class="border border-info"></span>

    </div>
  </body>
</html>

결과

exam border

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- css 디자인 링크 -->
    <link
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <!-- 예제 디자인 샘플 -->
    <link
      rel="stylesheet"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <!-- 힌트 : div 태그에 border 등, p-숫자, mb-숫자 -->
    <div class="border border-success p-2 mb-2">
        Lorem ipsum dolor sit amet</div>
  </body>
</html>

결과

저작자표시

'HTML > React' 카테고리의 다른 글

[React] Typescript  (2) 2023.09.06
[React] json 서버 사용법  (0) 2023.09.04
[React]  (0) 2023.09.04
[React] 노드 설치법 , 화살표 함수, 내장함수(spread, foreach, map, filter)  (0) 2023.08.28
HTML/React 관련 글
더 보기

티스토리툴바