04-15 4日目
11201 ワード
今日はhtmlベースとcssベースを勉強しました.
background-size: cover
画像が変形しない範囲で最大値を設定します.
画像のアスペクト比が要素と異なる場合は、画像を垂直または水平方向に切り取って空白を避けます.
どこにでもある3つのセット
background-image: url("");
background-size: cover;
background-position: center;
widthとmargin:autoを使用して画像を中央に配置
まだできない場合は、display:blockを勉強してdisplay blockを追加してください.
margin:autoは私が真ん中にいることを意味し、両側の空白は等しい最大です.
widthをあげて、余白を平らにして、真ん中に着いたようです.
いつもdivや位置にいるときは、背景色で見たほうがいいです.間違っていても変えてもいいでしょう.
html枠のある属性と文章の属性
文章には縦横の概念が存在しにくい.
あなたが書いた作家は多少聞かないので、文章の属性を強制的に箱に変換すれば、それを移動すべきです.
display:block
クラスにはオーバーラップの概念があるので、クラスをオーバーラップすることができます.
また、cssファイルはスタイルシートを介してcssファイルのみに従う.
headセクションのリンクでstyleセクションを受け取ることができます.
linkラベルのrelプロパティは、現在のドキュメントと外部リソースの関連付けを示します.
relプロパティが必要です.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Jua', sans-serif;
}
.mytitle{
width: 300px;
height: 200px;
color: white;
/* 텍스트 중앙절렬 */
text-align: center;
/* 이지를 깔때 항상따라다니는 트릭 3줄 */
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap{
width: 300px;
margin: auto;
}
.mybtn{
display: block;
margin: auto;
width: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID:<input type="text"></p>
<p>PW:<input type="text"></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>
Tip:divで分割する場合は、背景色を入れて、どの位置を占めているか見てみましょうbackground-size: cover
画像が変形しない範囲で最大値を設定します.
画像のアスペクト比が要素と異なる場合は、画像を垂直または水平方向に切り取って空白を避けます.
どこにでもある3つのセット
background-image: url("");
background-size: cover;
background-position: center;
widthとmargin:autoを使用して画像を中央に配置
まだできない場合は、display:blockを勉強してdisplay blockを追加してください.
margin:autoは私が真ん中にいることを意味し、両側の空白は等しい最大です.
widthをあげて、余白を平らにして、真ん中に着いたようです.
いつもdivや位置にいるときは、背景色で見たほうがいいです.間違っていても変えてもいいでしょう.
html枠のある属性と文章の属性
文章には縦横の概念が存在しにくい.
あなたが書いた作家は多少聞かないので、文章の属性を強制的に箱に変換すれば、それを移動すべきです.
display:block
クラスにはオーバーラップの概念があるので、クラスをオーバーラップすることができます.
また、cssファイルはスタイルシートを介してcssファイルのみに従う.
headセクションのリンクでstyleセクションを受け取ることができます.
linkラベルのrelプロパティは、現在のドキュメントと外部リソースの関連付けを示します.
relプロパティが必要です.
Reference
この問題について(04-15 4日目), 我々は、より多くの情報をここで見つけました https://velog.io/@cwangg897/04-15-네번쨰날テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol