대망의 내일배움캠프 개강날
8/29(월) 오늘의 시간표
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 기초
오전에 출석체크를 마친 후 웹프로그래밍 A-Z 기초 강의를 들었다. 영상을 보니 개강전에 들었던 웹개발 종합반의 내용이 이름만 바뀐채로 그대로 나온 것이었다. 복습하는 마음으로 기억을 하나하나 되뇌이며 영상을 다시 시청하였다.
영상시청이 끝난 후 저번주 금요일 배정받은 팀에서 진행하는 미니 프로젝트 팀 소개 페이지만들기를 진행하였다. 우리 팀은 주말동안 각자 개인별 소개페이지를 제작해 오기로 했고 팀원 모두가 개성있게 페이지를 제작 해와서 아직 초보티가 팍팍 나는 내가 만든 페이지는 많이 초라해보였다. 하지만 덕분에 좋은 참고가 되었고 페이지의 수정 방향을 잡을 수 있게 되었다.
그 이후 본격적으로 역할분담을 하였고 팀장이기 때문에 발표를 해야 하는 나는 발표준비때까지 아직 크게 할 일은 없어 개인페이지 수정에 집중하였다. 대신 팀원 개개인이 아닌 팀 자체를 소개해야하는 메인 페이지 작성은 모두가 함께 하기로 했기 때문에 우선 그 작업부터 우선 처리하였다. 같은 팀의 하경수 팀원님이 코딩관련 지식이 많았기에 협업 때 사용하기 좋은 프로그램을 알려주었고 우리 팀은 VS code의 Live Share 시스템을 이용하여 호스트인 내 작업페이지에서 다같이 코드작성을 하였다. 나와 같이 작업하는 분들은 속도가 빨랐고 아는 코드가 많아서 나는 눈으로 그분들의 작업을 보고 따라하는 수준밖에 안되었지만 아는것이 점점 하나씩 차곡차곡 늘어나는 것이 느껴저서 좋았다.
팀 소개 메인페이지 제작
<!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>
<div class="frame">
<h1>Team_licoder</h1>
<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>
<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는 캠프에서 배우는 내용뿐 아니라 자기주도 학습을 통해 개인적인 코딩 능력또한 키우고, <br>
궁극적으로는 팀원 모두가 캠프 수료 후 그 지식과 경험들을 바탕으로 원하는 기업에 취업 하는 것을 목표로 하고 있습니다.
</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">
<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">
<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">
<img class="card-img" src="https://velog.velcdn.com/images/dani_ca/profile/bd2a6bca-f79f-4af0-9a43-0f787a9d7ad6/image.jpg" alt="images">
<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">
<img class="card-img" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLIrJK%2FbtrKTNVRbWQ%2F5a6bAdIUMqivJH3JJmyiuK%2Fimg.jpg" alt="images">
<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">
<img class="card-img" src="https://velog.velcdn.com/images/hjlee719/post/53a67f2b-7ecc-430f-8804-d239a8e8621a/image.jpg" alt="images">
<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>
</body>
</html>
메인 페이지는 팀명소개, 우리팀의 특징과 목표, 우리팀간의 약속, 각 팀원들 소개페이지 및 블로그로 통하는 하이퍼링크 등으로 구성되어 있다.
메인페이지 구상 이후 본격적인 CSS 및 JavaScript작업은 해당파트를 담당하기로 한 팀원이 맡기로 하고 각자 개인페이지 수정 및 내용추가 작업에 들어갔다.
개인페이지 수정 및 내용추가
<body class = body>
<div class = "namecard">
<h1 class = "title">Who is 정형빈?</h1>
<div class="mytitle">
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbjskhd%2FbtrKHc237dN%2FF3TWqFn3eEAJKi7HAxZ22k%2Fimg.jpg"
class="img-1" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h1 class="card-title">정형빈</h1>
<h3 class="card-subtitle">A-11(리코더)｜팀장</h3>
<li class="card-text">생년월일 : 1998년 2월 26일</li>
<li class="card-text">거주지 : 경상남도 김해시</li>
<li class="card-text">취미 : 게임, 유튜브시청, 독서</li>
<li class="card-text">좋아하는음식 : 고기</li>
<li class="card-text">싫어하는음식 : 해산물</li>
<p class="card-text"><small class="text-muted">Blog : <a href="https://velog.io/@gudqls369"
target="_black">https://velog.io/@gudqls369 </a></small>
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fa2%2Fdd%2Fd3%2Fa2ddd3b549f7d5905b3f2f3726fc64ee.jpg&type=sc960_832"
class="img-2" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h1 class="card-title">MBTI : ISTP</h1>
<h3 class="card-subtitle">만능 재주꾼</h3>
<li class="card-text">효율충(적은 노력으로 최대의 능률을 선호함)</li>
<li class="card-text">관심있는 분야에 몰입을 잘하지만 관심없는 분야는 쳐다도 안봄</li>
<li class="card-text">남한테 관심없고 본인 이야기도 잘 안함</li>
<li class="card-text">간섭 받는거 매우 싫어함</li>
<li class="card-text">남의 감정에 공감이 어려움</li>
<li class="card-text">호불호와 자기주관이 지나치게 강함</li>
<li class="card-text">마이웨이인데다 혼자만의 시간을 좋아함</li>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h2 class="card-title2">[객관적으로 살펴본 자신의 장점]</h2>
<li class="card-text">사소한 일에 스트레스를 잘 안받는 편이고 스트레스를 받더라도 금방 해소되는 편이다.</li>
<li class="card-text">관심있는 분야에 몰입을 잘 하며 지금은 코딩과 웹개발에 대해 관심이 매우 많다.</li>
<li class="card-text">눈치가 빠르고 상황파악능력이 좋다.</li>
<li class="card-text">일을 효율적으로 처리하는데 능하다.(잔머리가 좋다.)</li>
<li class="card-text">일처리가 꼼꼼한 편이다.</li>
<li class="card-text">새로운 것에 도전할 때 주저하지 않는다.</li>
</div>
</div>
<div class="card">
<div class="card-body">
<h2 class="card-title2">[협업을 하는 과정에서의 자신의 스타일]</h2>
<li class="card-text">주도적으로 일을 진행하려 하지는 않지만 아무도 나서지않아 일처리가 답답하면 직접 나서는 편이다.</li>
<li class="card-text">자신이 맡은 일에만 집중하고 타인이 하는 일은 '알아서 잘하겠지' 마인드이다.</li>
<li class="card-text">문제가 생겼을 때 본인이 직접 해결하려는 경향이 강하고 도저히 안되겠다 싶을 때만 도움을 청한다.</li>
<li class="card-text">연락과 소통은 꼭 필요한 경우에만 하고 업무적인 부분 외에는 하지 않는다.</li>
<li class="card-text">여유를 가지고 일을 하는 편이지만 너무 여유를 부리다 발등에 불이 떨어져 급하게 하는 경우도 많다.</li>
<li class="card-text">계획을 세우고 일을 하기보다는 즉흥적으로 일을 처리한다.</li>
</div>
</div>
</div>
</body>
</html>주말동안 만들어 둔 양식에 CSS작업을 새로해야했고 인터넷에서 배경사진을 가져와 배경도 넣어보고 각 카드의 정렬을 보기 좋게 하기위해 인터넷을 계속 찾아봤지만 찾지못해 결국 튜터님께 여쭈어보고 flex를 이용하라는 팁을 듣고 인터넷에서 flex사용법을 검색해
.mytitle{
display: flex;
flex-wrap: wrap;
}를 적용하였더니 원하는 모양으로 깔끔하게 정리되어서 매우 흡족했다.
아직도 부족한 부분은 많지만 어제보다는 나아졌으니 긍정적으로 생각하기로 했고 내일은 오늘보다도 또 나은 내가 될 것을 기대해보도록 하겠다.
오 형빈님이 팀장님이시군요~~ 시간표까지 세세하게 적은 당신은 빼박 J라고 생각했으나 P이시군요?(머쓱) 같은 팀원이신 분의 도움을 얻었다니 협업을 잘 하시는것 같아 뿌듯하군여! 하나씩 해내며 성취감을 느끼시는 모습도 너무 좋습니다 앞으로도 한단계한단계 성장하며 더더 성취감 느끼시는 형빈님을 기대하며... 앞으로도 홧팅!