0811開発ログ
学習内容
場所、フッター、cssの説明の追加
githubソースコード
コンテンツ領域defaultクラス
.content-container {
width: 1240px;
margin: 0 auto;
}.content-container .tag-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 5px;
}
.content-container .tag-wrap .tag {
background-color: #202024;
border-radius: 8px;
padding: 3px 5px 2px;
margin-right: 5px;
font-size: 12px;
color: #fff;
}
.content-container .tag-wrap .tag:last-child {
margin-right: 0;
}
.content-container .txt-wrap h3 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
}video-section
<div class="img-wrap">
<div class="img-wrap-hover">
<img src="https://via.placeholder.com/333x186" alt="">
<span class="mark">생방송</span>
<span class="viewer">시청자 4.8만명</span>
</div>
</div>.video-section .video-wrap .img-wrap {
width: 300px;
height: 186px;
background-color: #9147ff;
}
.video-section .video-wrap .img-wrap .img-wrap-hover {
position: relative;
width: 100%;
height: 100%;
transition: all 0.1s linear;
}
.video-section .video-wrap .img-wrap:hover .img-wrap-hover {
transform: translate(5px, -5px);
}.video-section .btn-more {
position: absolute;
width: 100px;
height: 30px;
background-color: #0e0e10;
text-align: center;
line-height: 30px;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}category-section
footer
footer .footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}css追加説明
css変数の使用
Twitterサイトではcss変数を積極的に利用しています.css変数機能はグラフィックスではほとんどサポートされていないため、使用時に注意が必要です.
/* :root
어떤 영역에서든 가져다 쓸 수 있는 변수값 */
:root {
--black: #18181a;
--brand-color: #9147ff;
--font-size-40: 40px;
}
h1 {
color: var(--brand-color);
background-color: var(--black);
font-size: var(--font-size-40);
}
/* 특정 영역 안에 선언하면 해당 영역에서만 사용할 수 있음 */
#intro {
--font-color: blue;
--font-size: 50px
}
#intro p,
#footer p {
font-size: var(--font-size);
color: var(--font-color);
}reset.cssとnormalize。css
reset.css
既存のhtmlタグのすべての属性のコードを初期化します.デフォルトでは、すべてのタグが持つ属性値は、ブラウザによってやや異なります.reset.cssファイルを使用すると、htmlラベルが持つすべての属性値を除去できます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 추가설명</title> -->
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
normalize.css
デフォルトでは、htmlタグのcssプロパティ値はブラウザごとに少し異なります.normalizeは、ブラウザ間の差異を縮小する方向に設計値を再定義します.
難点
ビデオsectionでhover効果を作成する場合、img-wrapの画像を「生放送」「視聴者数」タブと一緒に移動させたいのですが、いろいろなエラーが発生しました.
最初はimg-wrap内にオーバーライド領域を作成し、z-indexで内部要素の順序を整理し、img-wrapにサスペンション効果を与えたが、オーバーライド領域も一緒に移動したため、所望の効果は得られなかった.だから私もoverlayをimg-wrapから外すことを考えたことがあります.NAVERゲームページの上部を作成するときのように、liラベルごとにoverlayが下の位置に重なる面倒があるので、今回は違うことにしました.
第二に,top,rightを用いて内部画像とspanを移動する方法を考えた.しかし画像は悪くないがspanの位置はtop,leftに調整されているため,属性値が重なるという問題がある.
解決策
最終的に、img-wrap内にimg-wrap-hover領域をもう1つ作成し、imgとspanラベルをすべて包み、ここでhover効果を適用します.
ビデオを見て、
transform: translate()を使いました.この方法では,従来の位置で移動すると,既に位置を移動したspanタグも移動しやすい.私はどうしてこの方法を考えなかったのですか.ううう感想
今日はhover効果でテストエラーが発生しました.実際、教室ではhover効果について議論していないと思っていたので、translate()という適切な機能をすぐに使うことができませんでした.でもNAVERゲームで似たような効果を作る時より効率的なコードを書いているので気持ちがいいです.△その際、liの影の位置はそれぞれ個別に調整された.
Reference
この問題について(0811開発ログ), 我々は、より多くの情報をここで見つけました
https://velog.io/@lee_yesol421/0811-개발일지
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について(0811開発ログ), 我々は、より多くの情報をここで見つけました https://velog.io/@lee_yesol421/0811-개발일지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol