TIL_220418

스파르타 코딩클럽 내일배움캠프 시작.

 

웹개발 종합반을 시작으로..

1주 :  https://atommi.tistory.com/2?category=957811 

[스파르타코딩클럽] 웹개발 종합반 - 1주차 개발일지

2주 : https://atommi.tistory.com/14?category=957811

[스파르타코딩클럽] 웹개발 종합반 - 2주차 개발일지 / 숙제(실습/풀이)

3주 : https://atommi.tistory.com/17?category=957811 

[스파르타코딩클럽] 웹개발 종합반 - 3주차 개발일지 / 숙제(실습/풀이)

4주 : https://atommi.tistory.com/18?category=957811 

[스파르타코딩클럽] 웹개발 종합반 - 4주차 개발일지 / 숙제

5주 : https://atommi.tistory.com/19?category=957811 

[스파르타코딩클럽] 웹개발 종합반 - 5주차 개발일지 / 숙제

 

끝나자 마자 메이킹 챌린지 12기 15주 도전!!

프론트엔드로 활동!!

 

나는 로그인/회원가입 페이지와 메인 페이지를 맡았다.

 

작품명 : My Online Diary

 

쉴틈 없이 이렇게 달려왔고..

 

지금의 나는 내일배움캠프를 지원하여 교육생으로 새로운 도전에 임하고 있다.

 

첫 주는 웹개발 종합반에서 배운 내용을 다시 복습하는 주간이 되었다.

 

오늘은 그 주의 첫날..

 

OT로 엄청난 스케줄과 하드한 교육 과정을 안내받고 너덜해진 내 멘탈..

 

하지만 다시금 좋은 팀원들과 만나 이야기를 나누고 함께 으쌰 했던 응원으로 다시 회복한 멘탈.

 

힘 얻어 12시간 화이팅..!!

 

---

무엇을 느꼈는가.

 

본 교육의 내용을 듣기 전에 다시 한 번 기본기를 다지고자 웹개발 종합반 교육을 복습하는 주가 되었다.

 

메이킹 챌린지까지는 정말 되기만 해라 하며 코드를 쉴 틈없이 보고 넣고 수정해서 내 것으로 만드는 데까지 얼마나 수정한지 모른다.

그 수정하는 동안에 겪었는 수 많은 오류들 그리고 왜 그랬었는지 모를 이유들까지.

 

프로젝트 실습 때의 어려웠던 이유는 간단했다.

익숙하지 못한 코드, 확립이 되지 못한 코드 개념 등

이번 복습을 통해서 내 부족함과 이제는 이해할 수 있었던 개념에 닿을 수 있었다.

 

나는 글을 잘 쓰지 못한다.

말로 설명하는 것도 다른 사람들에 비해서 서툴고 어려워 한다.

 

지금 쓰고 있는 개발 일지도 그저 배운 것을 필기하는 것에 급급하다.

하지만 메여있지 말고, 지금 내가 당장 할 수 있는 것을 찾아 해보자.

 

잘쓰고 남기기 보다 잘 활용하고 잘 이용하는 방법을 배워가자.

 

 

---

[오늘 하루 필기식 배운 내용 기록하기]

 

HTML 과 CSS 개념

HTML : 뼈대

- 예전에는 style 로 속성 꾸미기를 했었지만 세월이 흘러 CSS 라는 파일을 불러와서 적용하는 방법이 생겼다고 한다.

CSS : 꾸미기

- CSS의 활용과 예쁘게 꾸미기는 마치 '붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이' 라고 설명했다.

 

매우 단순하지만 확실하게 이해했다.

 

필수 단축키

자동정렬 : ctrl+alt+L (맥은 cmd+alt+L)

 

CSS의 기초

HTML 의 부모 - 자식 구조

 

CSS 강의 중 자주 쓰이는 단어

배경관련 - background-color - background-image - background-size	사이즈 - width - height
폰트 - font-size - font-weight - font-family - color	간격 - margin - padding

 

코드 주석 처리

ctrl + /

 

CSS 부트스트랩

링크 : https://getbootstrap.com/docs/5.0/components/buttons/

Buttons

 

적용시

CSS 적용 하기 전에 사전 뼈대를 기본 CSS 로 구성하고 하나씩 적재적소 하며 입힌다.

 

배경 이미지 3대장

background-image: url("이미지 링크");
background-size: cover;
background-position: center;

 

내용 가운데 정렬 4대장

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 

스타일 (CSS) 의 구문 활용

.mytitle > button {
}

/*  class = "mytitle" 이 적용되어 감싸고 있는 <button> 을 가리킨다  */

 

CSS hover : 마우스가 올라가면..~

.mytitle > button {
    border-radius: 50px;
    border: 1px solid white;
}

.mytitle > button:hover {
    border: 2px solid white;
}

/* hover : 버튼(적용하고자 하는 부분)에 마우스를 올렸을 때 다음 효과를 적용하겠다는 뜻 */

 

CSS 아이콘 모음

링크 : https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

 

CSS 규격 모바일 처리

max-width: 500px;
width: 95%;

최대 500px 로 고정하되 작아질 경우 창의 95% 를 유지하라는 뜻

 

자바스크립트 Javascript

뼈대(HTML) 를 만들고 꾸며서(CSS) 움직이게(Javascript) 해준다.

 

깨알 궁금증 : Java와 Javascript는 어떤 차이가 있나?

인도와 인도네시아..

바다와 바다코끼리..

아무 관련 없다고 한다..

 

자바스크립트 Javascript 기본 구조

<script>
    function hey(){
        alert('안녕!');
    }
</script>

+

onclick="hey()"

 

프로그래밍 언어를 배울땐 5가지를 기억하자

변수 : 값을 담는다

자료형 : 숫자냐 문자냐

함수 : hey() 같은 애들

조건문 : 만약 if()/그게 아니라면else()

반복문 : 계속 반복하자

 

리스트 & 딕셔너리

- 리스트

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

- 딕셔너리

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

- 리스트 & 딕셔너리 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

- 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

 

조건문 & 반복문

<script>
    let scores = [
        {'name': '철수', 'score': 90},
        {'name': '영희', 'score': 85},
        {'name': '민수', 'score': 70},
        {'name': '형준', 'score': 50},
        {'name': '기남', 'score': 68},
        {'name': '동희', 'score': 30},
    ]

    for (let i = 0; i < scores.length; i++) {
        if (scores[i]['score'] > 70) {
            console.log(scores[i]['name'])
        }
    }
</script>

i 가 0일 때 i 가 scores의 0~4까지 반복하고 값을 차례대로 나타내라

- 만약 scores[0~4 = i] 의 score 가 70보다 크면

-- scores[0~4 = i] 의 name 을 나타내라

 

1주차 숙제 (풀이)

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.sbs.co.kr/newsnet/etv/upload/2018/08/28/30000611639_16v9.jpg");
            background-size: cover;
            background-position: center;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 10px auto 0 auto;
        }

        .mycomment {
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 10px;
        }

        .mycomment > button {
            margin-top: 10px;
        }

        .mycard > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>장범준 방명록</h1>
    </div>
    <div class="mypost">
        <div class="mycomment">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">닉네임</label>
            </div>
            <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
                <label for="floatingTextarea2">응원댓글</label>
            </div>
            <button type="button" class="btn btn-dark">응원남기기</button>
        </div>
        <div class="mycard">
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
                        </footer>
                    </blockquote>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
                        </footer>
                    </blockquote>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨<cite title="Source Title"></cite>
                        </footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

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">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>초미니홈피 - 팬명록</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="mypic">
        <h1>십센치(10cm) 팬명록</h1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>