明日学習キャンプAI-3日目TIL,2022.04.20
107581 ワード
スパルタコードクラブ
明日の学習キャンプAI Web開発研修コース第3話
20220420 - TIL
1.チームプロジェクト開始-計画開始
09:00-10:00ミニプロジェクトリリース
10:00-12:00プロジェクト企画会議
プロジェクトは今日からやっと始まりました.2-3日と短い日程でしたが、チームとしての協力は初めてだったので、楽しみながら心配でした.幸いなことに、プロジェクトのレベルはネット開発総合クラスの最後の宿題のレベルで、私にとって難しくないはずです.問題が終わった後、私とメンバーたちは企画会議に参加して、想像以上に良いアイデアをたくさん持っていました.ページ規模自体がメンバーを紹介するページのすべてなので、何か役に立つ機能があるのか心配でしたが、画像反転、切り替え機能、netfrixテーマなど想像以上に多かったものなので、企画から面白かったです.
チームフレームワークと企画会議で提案されたアイデア.
2. .idea/workspace.xmlあなたは何ですか。
13:00-18:00開発開始
午後からは、会議で提案されたアイデアに基づいて、それぞれ個人紹介ページを作成します.しかしjavasciptで機能を作成するよりもcssが表示されている部分に注意すべきで、想像以上に時間がかかります.そして、試練はますます近づいてきた.私のページを真剣に作成している間に、トットさんが来て、簡単なプロジェクトの進捗状況について面談し、現在の状況にエンコードされた内容をGitで更新することにしたが、結局失敗した.
チームメンバーのコードがマージ競合しました!後で...Git(私も含めて)を使うのに慣れていないので、衝突したらびっくりしました.実は今思い出してみると、冷静になれば解決できる問題は、当時はなかったと思います.競合するファイル名は.idea/workspace.xmlではこいつが何をしているのか分からない.私たちが作成した書類ではないので、削除して大事になったらどうするか心配です.もちろん、リモート・リポジトリのコードは良いので、問題が発生したチーム・メンバーのコードをすべて削除してクローンを再取得する方法もありますが、問題を解決したくないです.しかし、そのファイル名を検索しても、何なのか分かりませんが、何度も検索した後、sourcetreeで襟を管理する際に発生したログ(?)ファイルのようにだから私はそれを襟の上に置いて見せないで、提出して解決したようです.本当に大したことはないと思います.初めて経験したとき、本当に何かあったような気がします.その後、スケジューラに相談しましたが、xmlファイルの心配はないと言っていました.
sourcetreeコミット時に表示されるxmlファイルを使用しようとします.
追加の符号化を行う際に発生する問題の1つは、imgをアップロードする過程である.imgをWeb上に配置する方法は、divタグに背景画像として指定する方法と、imgタグを使用する方法の2種類があります.ただし、divラベルの背景に画像を入れるとborder-radiusオプションでエッジ部分を丸くすることができるので、この方法を試してみます.しかし、何が問題なのか分からず、1枚目の顔がよく写っていて、2枚目から背景写真がありません.奇妙な原因は背景:red;同じ方法で色を指定すると効果的ですが、画像urlを入れると効果的ではなく、画像urlの問題かもしれませんので、上に写真を入れるurlの効果もよくありません.このため、背景画像の設定に一度しかできない制限があるのではないかという疑問がある.まず2番目の画像からimgタグで入れます.辺の部分は丸になっていませんが.その後、Tutorに問い合わせたところ、javacript関数でバックグラウンドurlをリアルタイムで変更できるので、優先度を後回しにして、他の機能を完成させた後、時間があれば応用を試みているという.
上の画像はbackround-imgでborder-radiousが設定されています.
下の画像はimgラベルで、角があります.(真ん中はYouTube動画)
4.AI陣営のメンバーと対抗！
18:00-19:00ディナータイム
19:00-20:00抗戦に反対
今回の明日の学習キャンプAIは2回目で56人が2つのクラスに分かれた.しかし今日は夜7時からクラス間でクイズや競走などの反対抗戦が行われました.もちろん、ゲーム機でオンラインでやっていますが、一日中座って勉強していて、他の人と一緒に活動できるので、いい感じです.ただ惜しい(?)ポイントはパンツで答えるのですが、ネットが遅すぎて質問に挑戦する人が多いですが(ㅠ)、答えの勝利は私たちのクラスです!驚いたことに、私たちのグループの選手は意外にも4つの問題に答えて、エースになりました.ははは
次は運動場で競走し、すでにクイズで勝利し、競走が勝てば優勝を確定した.そしてさっき言ったように、同じグループの選手が一番正解したので、私たちのグループは私たちのクラスの代表として競走に参加しました.たいしたことではありませんが、スタート前から縮小画面を見つけて、早めにランニングコースを暗記して、再び画面を拡大して、反応速度を上げて、ずっと方向キーを押しているよりも、連続してタイプするほうが早いので、克服しようと思います.おかげさまで、1人目の選手として出場した私は距離を取ってリードし、2人目の選手から、私たちの選手はずっとその場で足を踏み入れていました・・・(引っかかったので)ちょっとアクシデントがあって、あと1周で負けてしまいました.突然半敗の犯人になった.
点数は1:1で最後のクイズゲームを行いました結論は私たちが半勝しました!最初の質問から驚くべき反応速度で質問に答えた同級生が最後のキャリーをしましたおかげで、抗戦反対でも勝利し、賞品でベラキ・プティコンを獲得!思いがけず、運がよかったようです.
5.一日の終わりはいつもTIL!
20:00-21:00毎日レビューとTIL作成
思ったより時間が早かった.キャンプが進むにつれて、一日がまた一日が過ぎたようだ.でもTILの制作は思ったより時間がかかりました一日一日近くに行って、思い出してみると、一日にたくさんのことがあった.今までこのような技術を学んだことはありませんでしたが、新しいチームメンバーと会って交流し、初めてチームプロジェクトを企画したとき、経験とコツが生まれたようです.
少し残念ですが、他のチームメンバーはプロジェクトの進捗にもっと注意すべきだと思います.企画会議や今日のコーディングの時には全く気づかなかったのですが、あるチームメンバーがプロジェクトの進行に少し苦労しているようです.その選手に負担をかけないで、ゆっくり話を聞いて、いつでも聞いてもいいと言っていましたが、正直負担を感じないか心配でした.いろんなことを伝えたいけど、本人の立場で助けてもらうのはそんなに簡単なことじゃない.とにかく隊員を信じて待っていなければならない.私はいつでもあなたを助けることができます~!
6.開発ログ
<!DOCTYPE html>
<html lang="en">
<head>
<title>꾸러기 9조대</title>
<meta charset="utf-8">
<!--아랫줄은 파비콘 추가!-->
<link rel="icon"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Kijkwijzer_9.svg/1200px-Kijkwijzer_9.svg.png">
<!--밑에 3줄은 폰트!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<!--css 파일 불러오기!-->
<link href="/static/css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="main-title">꾸러기 <span class="red">9조대</span></h1>
<h2 align="center" class="intro-ment">내일 배움 캠프 AI 2회차 - 꾸러기 9조대 팀 소개 페이지입니다 </h2>
<div class="member-box">
<div class="container">
<div class="item front"><a href="/dongwoo"><img width="100%" src="https://avatars.githubusercontent.com/u/68724828?v=4" alt="img front"/></a></div>
<div class="item back" align="center"><a href="/dongwoo"><img height="100%" src="/static/images/31288698_1370862323046033_876359382072295424_n.jpg" alt="img back"/></a></div>
<p align="center"> 김동우 </p>
</div>
<div class="container">
<div class="item front"><a href="/heejeong"><img class="img-margin-1" width="100%" src="https://t1.daumcdn.net/cfile/tistory/2438573358070C1535" alt="img front"/></a></div>
<div class="item back"><a href="/heejeong"><img class="img-margin-1" width="100%" src="https://t1.daumcdn.net/cfile/tistory/2438573358070C1535" alt="img back"/></a></div>
<p align="center"> 김희정 </p>
</div>
<div class="container">
<div class="item front"><a href="/songhee"><img width="100%" src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0cb3499b-cf0d-42a2-9a8d-12e508961406%2FKakaoTalk_20220418_160240348.jpg?table=block&id=aba2c27f-31cf-45a0-83d4-16b2bdee649f&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=2000&userId=34873ddc-da24-4de9-a671-204842864bd3&cache=v2" alt="img front"/></a></div>
<div class="item back"><a href="/songhee"><img width="100%" src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0cb3499b-cf0d-42a2-9a8d-12e508961406%2FKakaoTalk_20220418_160240348.jpg?table=block&id=aba2c27f-31cf-45a0-83d4-16b2bdee649f&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=2000&userId=34873ddc-da24-4de9-a671-204842864bd3&cache=v2" alt="img back"/></a></div>
<p align="center"> 원송희 </p>
</div>
<div class="container">
<div class="item front" align="center"><a href="/jinyoung"><img height="100%" src="https://teamsparta.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faab293e5-e818-4a33-be5f-9e5f209ee76b%2F32154099.jpg?table=block&id=9a6b1aa9-de45-43b4-9361-4d0e1280c2e4&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=290&userId=&cache=v2" alt="img front"/></a></div>
<div class="item back" align="center"><a href="/jinyoung"><img height="100%" src="https://teamsparta.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faab293e5-e818-4a33-be5f-9e5f209ee76b%2F32154099.jpg?table=block&id=9a6b1aa9-de45-43b4-9361-4d0e1280c2e4&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=290&userId=&cache=v2" alt="img back"/></a></div>
<p align="center"> 전진영 </p>
</div>
</div>
<div class="team-box">
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle&display=swap" rel="stylesheet">
<!--css 파일 불러오기!-->
<link href="/static/css/common.css" rel="stylesheet" type="text/css" />
<title>김동우 소개 페이지</title>
<style>
* {
font-family: 'Dongle', 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://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c0d816b2-70fd-4507-a49c-2faadd059b2b/dciwqeq-595ccd60-6536-4619-bc44-7baa8d7ec0ce.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2MwZDgxNmIyLTcwZmQtNDUwNy1hNDljLTJmYWFkZDA1OWIyYlwvZGNpd3FlcS01OTVjY2Q2MC02NTM2LTQ2MTktYmM0NC03YmFhOGQ3ZWMwY2UucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0._Rzlmz5ti3E0-2jCFsIcTGr6lVq9dObuD_DB7_jIOME');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.body-box {
width: 1000px;
margin: 50px auto 50px auto;
}
.row1 {
width: 1000px;
/*background: red;*/
height: 450px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.left {
width: 50%;
height: 100%;
}
.profile {
width: 80%;
height: 100%;
background-image: url("https://avatars.githubusercontent.com/u/68724828?v=4");
background-size: cover;
background-position: center;
border-radius: 20px;
}
.right {
/*background: red;*/
width: 40%;
height: 100%;
}
.sub_title{
font-weight: bold;
font-size: 40px;
text-align: center;
}
.person-info {
font-size: 30px;
}
.row2 {
width: 1000px;
/*background: red;*/
height: 250px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.youtube {
width: 40%
}
.text-size {
font-size: 20px
}
.row3 {
width: 1000px;
/*background: red;*/
height: 400px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.row4 {
width: 1000px;
/*background: red;*/
height: 700px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 50px;
}
</style>
<script>
$(document).ready(function () {
})
</script>
</head>
<body>
<div class="mytitle">
<h1>꾸러기 9조대</h1>
</div>
<div class="body-box">
<div class="row1">
<div class="left">
<div class="profile"></div>
</div>
<div class="right person-info">
<p class="sub_title">기 본 정 보</p>
<p>이름 : 김동우</p>
<p>MBTI : INTP</p>
<p>관심사 : 물리, 코딩, 알고리즘, 게임</p>
<p>취미 : 게임(롤, 로스트아크), 크로스핏</p>
<p>특징 : 붓글씨 잘씀</p>
<p>블로그 : <a href="https://velog.io/@kimphysicsman">https://velog.io/@kimphysicsman</a></p>
</div>
</div>
<div class="row2">
<div class="left">
<div id="youtube" class="youtube">
<iframe width="400" height="220" src="https://www.youtube.com/embed/gbufWFSf250"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="right">
<p class="sub_title">내가 제일 좋아하는 노래</p>
<p class="person-info"> 쪽쪽 - 권진아 </p>
<p class="text-size">여름철 잠 못 이루게 하는 모기를 향한 아주 귀여운 노래!</p>
</div>
</div>
<div class="row3">
<div class="left">
<p class="sub_title">객관적으로 살펴본 나의 장점</p>
<p class="person-info">1. 이성적으로 분석하고 논리적인 사고를 잘한다!</p>
<p class="text-size">저는 어떤 현상을 이해할 때 감성적으로 접근하기보다는 이성적으로
인과관계를 확실히하고 제 3자의 입장에서 객관적으로 바라보려고 노력합니다. 이 점은
어떤 문제점에 대해서 고민할 때 해결책을 찾거나 방향성을 제시하는 데 큰 도움이 됩니다.</p>
<p class="person-info">2. 동기부여는 나의 가장 큰 원동력!</p>
<p class="text-size">저에게 있어서 어떤 일을 할 때 가장 큰 원동력이 되는 것은 바로 '동기부여'입니다.
그 일을 내가 왜 해야하는지 명확하게 알고있고 또 내가 하고싶어하는 일이라면 어떤
어려운 일이라도 끝까지 해낼 수 있다고 자부합니다.</p>
</div>
<div class="right" align="right">
<img alt="" width="80%" src="/static/images/31288698_1370862323046033_876359382072295424_n.jpg"/>
<div class="text-size"> 홍익 서우회 - 2019 춘계전시회에서 </div>
</div>
</div>
<div class="row4">
<div class="right"></div>
<div class="left">
<p class="sub_title">협업을 하는 과정에서의 자신의 스타일</p>
<p class="text-size">저는 협업을 하는데 가장 중요한 것은 의사소통이라고 생각합니다.</p>
<p class="person-info">1. 상대방의 입장을 생각해 보자!</p>
<p class="text-size">저는 여러 사람들과 의견을 주고받을 때 상대방의 입장을 먼저 생각해보는 편입니다.
상대가 누군지에 따라 내가 가진 생각을 어떻게 표현을 해야 온전히 전달될 수 있을 지 파악하는게 중요하다고 생각합니다.</p>
<p class="person-info">2. 정확하게 파악하고 확실하게 표현하자!</p>
<p class="text-size">상대방의 의견을 들을 때는 내가 이해하고 있는 것이 맞는지 다시 한번 확인하고
나의 생각을 이야기할 때는 제대로 이해했는지 다시 한번 확인하는 편입니다.</p>
<p class="person-info">3. 누가 들어도 이해할 수 있도록 쉽게 설명하자!</p>
<p class="text-size">제가 존경하는 인물인 물리학자 리처드 파인만은 어떤 어려운 개념도 일반인이 이해할 수 있을 정도로
쉽게 설명하는데 탁월했습니다. 어릴적부터 그의 책을 읽으며 그의 설명방식이나 말하는 법을 배우고자 노력했고 덕분에
저 또한 어려운 일도 쉽게 풀어서 설명하고 해결하는 능력을 기를 수 있었습니다.</p>
</div>
</div>
<p></p>
</div>
</div>
<div class="member-box">
<div class="container">
<div class="item front"><a href="/heejeong"><img class="img-margin-1" width="100%" src="https://t1.daumcdn.net/cfile/tistory/2438573358070C1535" alt="img front"/></a></div>
<div class="item back"><a href="/heejeong"><img class="img-margin-1" width="100%" src="https://t1.daumcdn.net/cfile/tistory/2438573358070C1535" alt="img back"/></a></div>
<p align="center" class="person-info"> 김희정 </p>
</div>
<div class="container">
<div class="item front"><a href="/songhee"><img width="100%" src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0cb3499b-cf0d-42a2-9a8d-12e508961406%2FKakaoTalk_20220418_160240348.jpg?table=block&id=aba2c27f-31cf-45a0-83d4-16b2bdee649f&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=2000&userId=34873ddc-da24-4de9-a671-204842864bd3&cache=v2" alt="img front"/></a></div>
<div class="item back"><a href="/songhee"><img width="100%" src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0cb3499b-cf0d-42a2-9a8d-12e508961406%2FKakaoTalk_20220418_160240348.jpg?table=block&id=aba2c27f-31cf-45a0-83d4-16b2bdee649f&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=2000&userId=34873ddc-da24-4de9-a671-204842864bd3&cache=v2" alt="img back"/></a></div>
<p align="center" class="person-info"> 원송희 </p>
</div>
<div class="container">
<div class="item front" align="center"><a href="/jinyoung"><img height="100%" src="https://teamsparta.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faab293e5-e818-4a33-be5f-9e5f209ee76b%2F32154099.jpg?table=block&id=9a6b1aa9-de45-43b4-9361-4d0e1280c2e4&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=290&userId=&cache=v2" alt="img front"/></a></div>
<div class="item back" align="center"><a href="/jinyoung"><img height="100%" src="https://teamsparta.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Faab293e5-e818-4a33-be5f-9e5f209ee76b%2F32154099.jpg?table=block&id=9a6b1aa9-de45-43b4-9361-4d0e1280c2e4&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=290&userId=&cache=v2" alt="img back"/></a></div>
<p align="center" class="person-info"> 전진영 </p>
</div>
</div>
</body>
</html>
* {
font-family: 'Single Day', DXKorea Inc;
}
.red {
color: red;
}
.team-box {
background: lightgreen;
width: 100%;
height: 1000px;
margin: auto;
}
.main-title {
font-size: 30px;
font-weight: bolder;
color: green;
/*background: aqua;*/
}
.member-box {
/*background: green;*/
width: 100%;
margin: 50px auto 50px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
body {
padding: 20px;
}
.container {
/*background: red;*/
width: 200px;
height: 200px;
perspective: 300px;
justify-content: space-between;
}
.container .item {
width: 200px;
height: 200px;
/*border: 1px solid #828282;*/
font-size: 35px;
backface-visibility: hidden;
transition: 1s;
}
.container .item.front {
position: absolute;
transform: rotateY(0deg);
}
.container:hover .item.front {
transform: rotateY(180deg);
}
.container .item.back {
transform: rotateY(-180deg);
}
.container:hover .item.back {
transform: rotateY(0deg);
}
.img-margin-1 {
margin-top: 50px;
}
.intro-ment {
margin-top: 150px;
font-size: 40px
}
Reference
この問題について(明日学習キャンプAI-3日目TIL,2022.04.20), 我々は、より多くの情報をここで見つけました https://velog.io/@kimphysicsman/내일배움캠프-AI-3일차-TIL-2022.04.20テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol