Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

sodol-dotcom

[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240722 본문

TIL

[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240722

sod0l 2024. 9. 24. 23:32

𝜗𝜚 오늘 공부한 내용

웹개발 종합반 1주차 강의, 자바스크립트 문법 기초 1주차 강의

[수강 1] 1. 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z_1주차

1) [추억앨범]프로젝트1 만들기

<!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>나만의 추억 앨범</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
        * {
            font-family: "Gowun Dodum", sans-serif;
        }
        .mytitle {
            height: 250px;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-position: center;
            background-size: cover;
        }
        .mytitle>button {
            width: 150px;
            height: 50px;
            background-color: transparent;
            color: white;
            border: 1px solid white;
            border-radius: 100px;
            margin-top: 20px;
        }
        .mycards {
            width: 1200px;
            margin: 30px auto 0px auto;
        }
        .mypostingbox {
            width: 500px;
            margin: 30px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px blue;
            border-radius: 5px;
        }
        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;z
        }
        .mybtn > button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>나만의 추억 앨범</h1>
        <button>추억 저장하기</button>
    </div>
    <div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 이미지</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
            <label for="floatingInput">앨범 제목</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
            <label for="floatingInput">앨범 내용</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
            <label for="floatingInput">앨범 날짜</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4  g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>

<p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```

[수강 2] JavaScript 문법 종합반 KDT 실무형 프론트엔드 엔지니어 양성과정_1주차

1) 변수와 상수

// 변수, 상수
// 메모리에 젖아한다. 읽어들여서 재사용한다. = 변수.

// 변수의 5가지 주요 개념
// 변수 이룸: 저장된 갑의 고유 이름
// 변수 값: 변수에 저장된 값
// 변수 할당: 변수에 값을 저장하는 행위
// 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
// 변수 참조: 변수에 할당된 값을 읽어오는 것

//변수를 선언할 . 수있는 3가지 방법: 
var myVar = "Hello World";
var myVar = "Test 1"
console.log(myVar);

//2. let
let myLet = "hello World1";
let myLet = "Test 2";
console.log(myLet);

//3. const
const myConst = "Hello World2";
console.log(myConst);

2) 데이터 타입 1~2

// 데이터 타입
// runtime : run 하는 time
// 코드를 작성할 때가 아니라, 실제 코드가 실행될 . 때
// -> 옆에 터미널에 코드가 실행될 때
// 그 때, 데이터 타입이 결정된다.
// java : String a = "abc";
// const a = "abc";
// 1. 숫자
// 1-1. 정수
let num1 = "10";
console.log(num1);
console.log(typeof num1); 
// 1-2. 실수(float)
let num2 = "3.14";
console.log(num2);
console.log(typeof num2);
// 1-3. 지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);
console.log(typeof num3);
// 1-4.
// Nan : Not a Number
let num4 = "Hello" /2;
console.log(num4);
// 1-5 Infinity(무한대)
let num5 = 1/0;
console.log(num5);
console.log(typeof num5);
// 1-6 -Infinity(무한대)
let num6 = -1/0;
console.log(num6);
console.log(typeof num6);
```
```jsx
// 2. 문자 : string(문자열 = 문자의 나열)
// ' ' = " "
let str = "Hello World!";
// console.log(str);
// console.log(typeof str);
// 2-1. 문자열 길이 확인하기
// console.log(str.length);
// 2-2. 문자열 결합하기(concatenation)
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
// console.log(result);
// 2-3. 문자열 자르기
let str3 = "Hello, World!";
// console.log(str3.substr(7, 5));
// console.log(str3.slice(7,12))
// 2-4. 문자열 검색
let str4 = "Hello, World!";
// console.log(str4.search("World"))
// 2-5. 문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World", "Javascript");
// console.log(result01);
// 2-6. 문자열 분할
let str6 = "apple,banana, kiwi";
let result02 = str6.split(",");
console.log(result02);

// 불리언(Boolean)
// true(참), false(거짓)
let bool1 = true;
let bool2 = false;
// console.log(bool1);
// console.log(typeof bool1);
// console.log(bool2);
// console.log(typeof bool2);
// undefined
// un : not, define : 정의하다
let x;
// console.log(x);
// null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
// null === undefined
let y=null;
// console.log(y);
// object(객체) : key(따옴표 없이 문자)-value(데이터 타입 아무거나) pair
let person = {
    name: 'choi',
    age: 20,
    test: true,
    isMarried: true,
};
// console.log(typeof person);
// array(배열)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입!!!
// [] 안의 배열들은 하나 하나가 index(자기 위치에 대한 데이터 값를 가지고 있다. 
// 위치는 0부터 시작함 1, apple은 '0'
let number = [1, 2, 3, 4, 5] 
let fruits = ['apple', 'banana', 'orange'];

𝜗𝜚 Review

오늘은 웹개발 종합반 1주차 강의를 끝까지 들었고 자바스크립트 기초 1주차 강의를 듣기 시작했다.
웹개발 종합반은 강의를 따라가기에 어렵지 않았지만 자바스크립트 기초는 처음에 따라가기 힘들었지만 이것저것 웹에서 검색하면서 진행하니 어찌저찌 따라갈 정도는 된것 같기도 하다. 대학생때 들은게 조금씩 기억나기도 했다.

𝜗𝜚 for tomorrow

내일부터 있을 걷기반 수업에 참여하기 위해 남은 시간 동안 남은 자바스크립트 기초 강의를 좀 더 들어야 할 것 같다.

Ig. https://www.instagram.com/sodol_dotcom/

'TIL' 카테고리의 다른 글

[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240724 (0)	2024.09.24
[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240723 (0)	2024.09.24
[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240719 (1)	2024.09.24
[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240718 (1)	2024.09.24
[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240716 (3)	2024.09.24

'TIL' Related Articles