0419開発ログ
今日やったこと
今日は昨日に続いて友達のポートフォリオのホームページです.昨日はhtmlを編集長として書いていましたが、今日はcssを加えていくつかのデザインが追加されました.
まず内容を1ラウンド目に入れて、明日から携帯電話の反応型部分を作ります.
ポートフォリオのホームページ
Google fontの使用
<!--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=Black+Han+Sans&family=Carter+One&family=Noto+Sans+KR&family=Roboto+Slab:wght@200;400&display=swap" rel="stylesheet">
...
font awesomeの使用
アイコン画像は、cssで<i>
ラベルのフォントを単独で処理する場合にのみよく表示されます.<script src="https://kit.fontawesome.com/키트고유번호.js" crossorigin="anonymous"></script>
...
<li>
<a href="#"><i class="fab fa-brands fa-github"></i></a>
<a href="#"><i class="fab fa-brands fa-linkedin"></i></a>
</li>
.fab {
font-family: "Font Awesome 5 Brands";
font-size: 25px;
margin-right: 5px;
}
グラデーションの背景色を追加
background: linear-gradient(#746FFF, #A381FF);
特定の領域を中央に配置
#about .about-content {
height: 300px;
position: relative;
transform: translateY(50%);
background-color: #ededed;
padding: 30px 20px;
}
マウスサスペンション時の画像の移動
.img-wrap {
overflow: hidden;
}
.profile-img-wrap {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 10px;
}
#profile img:hover {
cursor: pointer;
transform: scale(1.1);
transition: 0.3s;
}
複数行の略語
#introduction p.description {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 55px;
}
接地位置の調整
.project-content .btn_more {
position: absolute;
bottom: 0;
right: 0;
font-size: 14px;
background-color: #A6E22E;
padding: 5px 15px;
float: right;
border-radius: 20px;
}
スクリーン領域を塗りつぶす:ビューポートの高さを利用する
内部コンテンツが画面の高さを超えている場合、領域を逸脱している場合もあります.この部分はさらにheight: auto
に変更され、内部の長さは両親に反映されている..main-section {
width: 100%;
height: 100vh;
padding-top: 150px;
}
Reference
この問題について(0419開発ログ), 我々は、より多くの情報をここで見つけました
https://velog.io/@lee_yesol421/0419-개발일지
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!--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=Black+Han+Sans&family=Carter+One&family=Noto+Sans+KR&family=Roboto+Slab:wght@200;400&display=swap" rel="stylesheet">
...
<script src="https://kit.fontawesome.com/키트고유번호.js" crossorigin="anonymous"></script>
...
<li>
<a href="#"><i class="fab fa-brands fa-github"></i></a>
<a href="#"><i class="fab fa-brands fa-linkedin"></i></a>
</li>
.fab {
font-family: "Font Awesome 5 Brands";
font-size: 25px;
margin-right: 5px;
}
background: linear-gradient(#746FFF, #A381FF);
#about .about-content {
height: 300px;
position: relative;
transform: translateY(50%);
background-color: #ededed;
padding: 30px 20px;
}
.img-wrap {
overflow: hidden;
}
.profile-img-wrap {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 10px;
}
#profile img:hover {
cursor: pointer;
transform: scale(1.1);
transition: 0.3s;
}
#introduction p.description {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 55px;
}
.project-content .btn_more {
position: absolute;
bottom: 0;
right: 0;
font-size: 14px;
background-color: #A6E22E;
padding: 5px 15px;
float: right;
border-radius: 20px;
}
.main-section {
width: 100%;
height: 100vh;
padding-top: 150px;
}
Reference
この問題について(0419開発ログ), 我々は、より多くの情報をここで見つけました https://velog.io/@lee_yesol421/0419-개발일지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol