チームプロジェクトの開始🧐

期待されていた最初のチームプロジェクトが始まった.完成チーム紹介サイトはプロジェクトの内容です.

コミュニケーション

まずメンバーとそれぞれ自分の構想のページを自画自賛するMOCKUP誰もが情熱に満ちているので、アイデアを出す時間というより、必要な要素を残すためにアイデアを出す時間です.
チームプロジェクトを始めて、まず感じたのは、커뮤니케이션 능력の重要性です.
どうして面接場にいますか.
「他人と意見が衝突した場合、どのように解決するか」
「自分の意見を説得する必要があるとき、どのように説得しますか」
「メンバーと不和を解決したいときは、どんな方法で行動したほうがいいと思いますか」
以下の問題は漏れないことがわかります.この間、私を含めたすべてのチームメンバーが欲望と成果に大きな欲望を持っていた状況で、考えがいっぱいになった瞬間はなかったかもしれません.
誰もがチームの成果を望んでいます
誰もが自分とチームメンバーに良い影響を与えるように努力しています.
みんないい考えを出した.
この場合、アイデアを選ぶ際には、チームメンバー間の커뮤니케이션が本当に重要です.幸いなことに、みんなが納得できる理由を出して、一つ一つ考えを減らしました.

機能実装

サイトのデザインや完成度の部分を决めてから考え、それぞれに必要な机能から始めましょう.
私は3つの機能を実現しました.

hover実装方法

hover機能とは、Webページ上でマウスを動かしすぎたときに生じる変換効果のことです.
この機能を使用する目的は、チームメンバーのプロファイル画像にハイパーリンクがあることをユーザーに直感的に感じさせることです.
hover機能を使用する方法は次のとおりです.

  .feature_item:hover {
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); 
    border-color: #fff;
    background: #fff; }

実装するコンテンツクラスを指定し、スタイル値を入力します.
box-shadowの画素値は右側の長さ、底部の長さ、透明度、分散度の順で、最後の0.08はシャドウの明瞭度を表します.

完了!

ハイパーリンクの実装方法

メンバーが写真をクリックして履歴書ページに入るように機能した.
ハイパーリンクを画像に掛ける方法は次のとおりです.

<a href="https://velog.io/@ex0831" target="_blank">
  <img>
</a>

上記の図に示すように、<a href="링크주소"><이미지></a>のように画像間にコードを記述することができる.

反応式Web実施方法

このページはパソコンのみを使用しているわけではないので、モバイル画面によってページを適切な大きさに変換するために、反応型ページ機能を使用しています.
反応型Webを実現するためには,javascriptとCSS 미디어 쿼리を用いる方法が概ねあり,CSSを用いる方法がより直感的であるため,この方法を用いた.

@media (min-width: 1200px) {
  .container {
    max-width: 1170px; } }

このコードの意味は次のとおりです.
例えば、画像がそれぞれ1000 pxと200 pxの場合.
min-width:1200px
画像は両側に位置し、1200 pxの幅を埋めます.최소한 이만큼 채워라!逆に、2つの画像が両側に位置する場合、
最大幅:1199 px.
2つの画像の幅が1199 pxを超えるため、1列に並ぶ.최대 이만큼 채울 수 있다!
絵から見ると、分かりやすいです.
心配したのとは違って、それぞれの担当部分に意欲を持ち、ミスを解決しようと努力した隊員たちは初日だったが、思った以上に多くのことをやり遂げた.
もともとあまり興味がなかったページ項目もこんなに面白かったのですが、コードを勉強しようと決心したデータ分析分野を勉強し始めたら、どんなに面白くなるか、楽しみです!現在進行中のプロジェクトは、すべてのメンバーが満足のいく結果を得ることができれば、喜ぶはずです.
ちなみに、早くデータ分析を学びたい!!👀