[TIL]#10[初回終了とレビュー]|Wecode-4 Day
今日のスケジュール
地下鉄でカエル遊びをします。
問題はちょっとおかしいかもしれません.
NOTIONで遊んでいたゲームカエルが木の葉に入って成功~!
justify-コンテンツプロパティ
display: flex;
justify-content:flex-end;
カエルはかわいいでしょう?
たぶんこんなゲーム!だれがよくやったかわからない
align-itemsプロパティ
flex-directionプロパティ
flex-wrapプロパティ
Code Review
最後にレイアウトを確認します。
結果
(1)カラーボックスはclass属性値「colorBox」の<div>を実装してください.
(2)「#709 fb 0」の色の値が付いた小さなボックスにはspanラベルが付けられます.カラーボックスにマウスを置いたときにのみ表示されるように、hoverセレクタと不透明CSSプロパティを使用します.
(3)heartボタンとアップロード日テキストは、下部にdivラベルを作成し、flexプロパティを使用して間隔を保つ.
(4)heartボタンは<button>ラベルを使用してください.
私は本当に私ができるかどうか分からないので、少し詰まっています.
しかし、同じチームの承玉の助けを得た.ありがとうございます
片付けよう <div class="container">
<div class="colorBox">
<span class="hov">#709fb0</span>
</div>
<div class="line">
<button class="btn"><i class="fas fa-heart"></i> 451</button>
<span>3days</span>
</div>
</div>
</div>
大きな箱>小さな箱>ボタンボックス
アイコンはfont Awesomeを使用してHeartを取得しました.
以下ではspanをテキストとして使用します.
CSS部分混同
hoverは誰に要素を与えますか?
hover 부분에서 span태그로 .hov 클래스 만들었다. 전체 감싸진 컨테이너에 오퍼시티를 줘서 적용이 되지 않았었고, 두번째 박스 즉, 부모 요소에 적용시키니까 두번째 박스를 클릭 했을때 호버를 할 수 있게됨 .colorBox:hover .hov{
opacity: 1;
}
.hov{
opacity: 0;
background-color: #578291;
color: white;
}
.line{ /* 하트아이콘 버튼과 3days span태그 영역 */
display: flex;
justify-content: space-between;
margin-top: 20px;
}
カエルflexゲームで出てきたのはここに書いてある
space-thenプロパティは同じ要素間隔を使用しており、非常に便利です.
今日一日チェック
(1)カラーボックスはclass属性値「colorBox」の
<div>を実装してください.(2)「#709 fb 0」の色の値が付いた小さなボックスにはspanラベルが付けられます.カラーボックスにマウスを置いたときにのみ表示されるように、hoverセレクタと不透明CSSプロパティを使用します.
(3)heartボタンとアップロード日テキストは、下部にdivラベルを作成し、flexプロパティを使用して間隔を保つ.
(4)heartボタンは
<button>ラベルを使用してください. 私は本当に私ができるかどうか分からないので、少し詰まっています.
しかし、同じチームの承玉の助けを得た.ありがとうございます
片付けよう <div class="container">
<div class="colorBox">
<span class="hov">#709fb0</span>
</div>
<div class="line">
<button class="btn"><i class="fas fa-heart"></i> 451</button>
<span>3days</span>
</div>
</div>
</div>
大きな箱>小さな箱>ボタンボックス
アイコンはfont Awesomeを使用してHeartを取得しました.
以下ではspanをテキストとして使用します.
CSS部分混同
hoverは誰に要素を与えますか?
hover 부분에서 span태그로 .hov 클래스 만들었다. 전체 감싸진 컨테이너에 오퍼시티를 줘서 적용이 되지 않았었고, 두번째 박스 즉, 부모 요소에 적용시키니까 두번째 박스를 클릭 했을때 호버를 할 수 있게됨 .colorBox:hover .hov{
opacity: 1;
}
.hov{
opacity: 0;
background-color: #578291;
color: white;
}
.line{ /* 하트아이콘 버튼과 3days span태그 영역 */
display: flex;
justify-content: space-between;
margin-top: 20px;
}
カエルflexゲームで出てきたのはここに書いてある
space-thenプロパティは同じ要素間隔を使用しており、非常に便利です.
今日一日チェック
<div class="container">
<div class="colorBox">
<span class="hov">#709fb0</span>
</div>
<div class="line">
<button class="btn"><i class="fas fa-heart"></i> 451</button>
<span>3days</span>
</div>
</div>
</div>hoverは誰に要素を与えますか?
hover 부분에서 span태그로 .hov 클래스 만들었다. 전체 감싸진 컨테이너에 오퍼시티를 줘서 적용이 되지 않았었고, 두번째 박스 즉, 부모 요소에 적용시키니까 두번째 박스를 클릭 했을때 호버를 할 수 있게됨 .colorBox:hover .hov{
opacity: 1;
}
.hov{
opacity: 0;
background-color: #578291;
color: white;
}.line{ /* 하트아이콘 버튼과 3days span태그 영역 */
display: flex;
justify-content: space-between;
margin-top: 20px;
}space-thenプロパティは同じ要素間隔を使用しており、非常に便利です.
今日一日チェック
Reference
この問題について([TIL]#10[初回終了とレビュー]|Wecode-4 Day), 我々は、より多くの情報をここで見つけました https://velog.io/@damho0514/TIL-10-Check-Point-Review-Wecode-3Dayテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol