22.08.30(화) Today I Learned

정형빈·2022년 8월 30일
TIL내일배움캠프
0

TIL

목록 보기
2/71

08/30(화) 오늘의 시간표

09:00 ~ 10:00 [원격] 웹프로그래밍 A-Z 기초
10:00 ~ 11:00 [원격] 웹프로그래밍 A-Z 기초
11:00 ~ 12:00 [프로젝트] 웹프로그래밍 A-Z 기초
12:00 ~ 13:00 [프로젝트] 웹프로그래밍 A-Z 기초
13:00 ~ 14:00 [프로젝트] 웹프로그래밍 A-Z 기초
14:00 ~ 15:00 [프로젝트] 웹프로그래밍 A-Z 기초
15:00 ~ 16:00 [프로젝트] 웹프로그래밍 A-Z 기초
16:00 ~ 17:00 [프로젝트] 웹프로그래밍 A-Z 기초
17:00 ~ 18:00 [프로젝트] 웹프로그래밍 A-Z 기초
18:00 ~ 19:00 [프로젝트] 웹프로그래밍 A-Z 기초
19:00 ~ 20:00 [프로젝트] 웹프로그래밍 A-Z 기초
20:00 ~ 21:00 [프로젝트] 웹프로그래밍 A-Z 기초

어제와 마찬가지로 아침 2시간 영상강의 시청 후 하루종일 미니 프로젝트 진행이었다.
오늘도 역시 복습한다는 마음으로 전에 배웠던 내용들을 한번씩 되짚어보는 시간이었다.

영상강의 시청 후 미니프로젝트 진행을 위해 팀원들과 모여서 회의를 하였고 어제 분담한 역할대로 작업을 진행하기로 하였다. 발표가 역할인 나는 오늘은 그렇게 작업이 많지는 않고 주로 메인 및 개인 소개페이지 점검, 팀원들의 진행상황 확인 및 결과물 피드백, 내일 있을 발표에 대비한 발표 대본 사전준비 정도가 오늘 나의 할일이었다.

완성된 팀 소개 메인페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <title></title>

</head>

<body>
<div class="frame">
    <h1>Team_licoder</h1>
    <div class="top-box">
        <h2>리코더(licoder)</h2>
            <div class="top">
                <img id="licoder_pic" src="https://w7.pngwing.com/pngs/99/795/png-transparent-recorder-western-concert-flute-musical-instrument-wind-instrument-silver-seven-hole-clarinet-piano-violin-musical-notation.png">
                <p>
                    리코더는 문학의 영단어 literature와 코딩하는 사람을 뜻하는 단어인<br> Coder를 합성해 문학과 
                    코딩을 좋아하는 사람들의 모임이라는 뜻입니다.
                </p>
            </div>
    </div>    
    
    
    
<h2>Team_licoder만의 특징과 추구하는 궁극적인 목표</h2>
<div class="goal">
    <img id="book_pic" src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxOTA4MzBfMjg0%2FMDAxNTY3MTUxOTIzMjQ0.ReNOrKAU2OKshm0YRqgeuNt8qMqkrRXbLuUJ_O-aeHYg.QG5HM-rbYrpnfPgAZ_5aVw5yT-ymMY1olkwk44ANjjgg.JPEG.chuchuchu211%2Ftumblr_a628b290f1cd471c935bffd5bc010d1f_e7adf705_640.jpg&type=sc960_832">
    <p>
        4명 모두 독서를 좋아하고 MBTI가 I인 내향적인 성격이지만, 코딩에 대해서는 누구보다 열정적인 팀입니다.<br>
        Team_licoder는 캠프에서 배우는 내용뿐 아니라 자기주도 학습을 통해 개인적인 코딩 능력또한 키우고,
        궁극적으로는 팀원 모두가 캠프 수료 후 그 지식과 경험들을 바탕으로 원하는 기업에 취업 하는 것을 목표로 하고 있습니다.
    </p>
</div>








<h2>Team_licoder의 약속</h2>
<div class = "promise">
    <ol>
        <li>시간 약속을 잘 지킨다.</li>
        <li>상시 연락이 가능하도록 연락체계를 유지한다.</li>
        <li>하루 정해진 공부 할당량을 충족할 수 있도록 노력한다.</li>
        <li>서로 배려하고 소통을 중시한다.</li>
        <li>프로젝트를 성공적으로 끝낼 수 있도록 최선을 다 한다.</li>
    </ol>
</div>

<h2>Team_licoder의 팀원들(사진을 누르면 멤버소개페이지로 이동합니다.)</h2>
<div class="cards">
    <div class="card-body">
        <a href="personalpage/index_hb.html"><img class="card-img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbjskhd%2FbtrKHc237dN%2FF3TWqFn3eEAJKi7HAxZ22k%2Fimg.jpg" alt="images"></a>
        <div class="card-text">
            <h2>정형빈</h2>
            <p><a href="https://velog.io/@gudqls369" target="_blank">https://velog.io/@gudqls369</a></p>
        </div>
    </div>
    <div class="card-body">
        <a href="personalpage/index_ks.html"><img class="card-img" src="https://velog.velcdn.com/images/dani_ca/profile/bd2a6bca-f79f-4af0-9a43-0f787a9d7ad6/image.jpg" alt="images"></a>
        <div class="card-text">
            <h2>하경수</h2>
            <p><a href="https://velog.io/@dani_ca" target="_blank">https://velog.io/@dani_ca</a></p>
        </div>
    </div>
    <div class="card-body">
        <a href="personalpage/index_bm.html"><img class="card-img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyxJrs%2FbtrKUR5KyOG%2FIusAvx5jkj56y5NFnrSo3K%2Fimg.jpg" alt="images"></a>
        <div class="card-text">
            <h2>염보미</h2>
            <p><a href="https://lemontiger.tistory.com" target="_blank">https://lemontiger.tistory.com</a></p>
        </div>
    </div>
    <div class="card-body">
        <a href="personalpage/index_hj.html"><img class="card-img" src="https://velog.velcdn.com/images/hjlee719/post/53a67f2b-7ecc-430f-8804-d239a8e8621a/image.jpg" alt="images"></a>
        <div class="card-text">
            <h2>이효정</h2>
            <p><a href="https://velog.io/@hjlee719" target="_blank">https://velog.io/@hjlee719</a></p>
        </div>
    </div>
</div>


    
</body>
</html>
.frame{
    margin: 30px 150px;
    display: flex;
    flex-direction: column;
}

body{
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}
.frame>h1{
    font-size: 50px;
    color: #9966CC
    
}

.frame>h2 {
    text-align: center;
    font-size: 40px;
}

* {
    font-family: 'Poor Story', cursive;
}


/*top start*/

.top-box {
    border: black solid 2px;
    border-radius: 4px;
    margin-bottom: 100px;
}

.top-box>h2{
    text-align: center;
    font-size: 40px;
}

.top{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    
    margin: 0 50px 50px 50px;
    padding: 5px;
    
}


#licoder_pic{
    width: 400px;
    margin: 30px 60px 0 0;
    border-radius: 8px;

}



.top>p{
    font-weight: 300;
    font-size: 30px;
    color: black;
    margin-bottom: 40px;
    line-height: 50px;
    word-break: keep-all;
}

/*top end*/

/* goal start */

.goal{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  
    margin: 100px 100px;
    padding: 30px;

    border: black solid 2px;
    border-radius: 4px;

}


#book_pic{
    margin-top: 40px;
    width: 500px;
    margin: 80px 60px 0 0;
    border-radius: 8px;
}


.goal>p{
    font-weight: 300;
    font-size: 30px;
    color: black;
    line-height: 40px;
    word-break: keep-all;
}

/* goal end */


/*promise start*/

.promise{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  
    margin: 100px 100px;

    border: black solid 2px;
    border-radius: 4px;
}

.promise>ol{
    font-weight: 300;
    font-size: 30px;
    color: black;
    margin-bottom: 40px;
    line-height: 75px;

    
}

.promise>ol>li{
    margin-bottom: 15px;
}

/*promise end*/


.cards{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border: black solid 2px;
    border-radius: 4px;

    padding: 20px 0 20px 0;
    
}
.card-body{
    width: 200px;
    margin: auto;
    border-radius: 8px;
    background-color: white;
}
.card-img{
    max-width:200px;
    width: 100%;
    border-radius: 8px;
}
.card-text{
    text-align: left;
    margin-left: 10px;
}

이렇게 HTML과 CSS파일을 나누어서 보기좋게 정렬하여 코딩을 진행하였고 나온 결과물이

이것이다. 다양한 기능을 넣기보다는 소개페이지를 만드는 것 그 차제에 초점을 둬서 불필요한 기능들은 전부 과감하게 삭제하고 화려하게 꾸미기보다는 보기에 깔끔하도록 만들었다.
맨 아래 팀원소개란에는 각 멤버별 소개페이지와 멤버가 운영하는 블로그로 갈 수 있도록 하이퍼링크를 걸어두었다. 여기서 메인페이지의 CSS작업은 대부분 염보미님이 해주셨고 나는 주로 피드백쪽에 전념하였다. 너무 잘 만들어주신덕에 피드백할만한 요소가 거의 없었고 다른 팀원 두분은 영상제작과 프로젝트 결과물 정리본을 만들고 계시고 이에 대한 피드백 또한 오늘중으로 진행될 것이다. 내일은 아마 오전중에는 발표준비가 대부분이 될 것 같은데 오늘은 내가 비교적 한가하게 보냈으니 내일은 내가 바빠질 예정이다. 발표경험은 대학때 조별과제를 하면서 수도 없이 많이 맡아봤지만 아직도 많은 사람들 앞에서 발표를 하려면 긴장된다. 하지만 팀원들이 훌륭한 결과물을 만들어 주었고 모두의 노력을 허망하게 날릴수는 없으니 최선을 다해보도록 하겠다.

profile
정형빈
스파르타 내일배움캠프 3기 수강생 정형빈
이전 포스트

22.08.29(월) Today I Learned

다음 포스트

22.08.31(수) Today I Learned

0개의 댓글