1週目の「スパルタコードWeb開発」CSS
12268 ワード
2. CSS
コンセプト:CSSは、取得された領域を配置することを意味し、HTMLの親サブ構造では、親構造がサブ構造のスタイルを担当します.
構造とタイプ:headでstyletagを使用してクラスごとにCSSを設定します.class名で適用
-background-image:画像urlを使用して背景に画像を入れる機能
-background-size:画像のサイズを指定し、coverは画像全体の表示を許可します
-背景-位置:画像を整列(?)中心は画像自体の中央にあります
-color:文字の色を指定する
-width:背景の幅を指定
-height:背景の高さを指定
-border-radius:画像エッジのシェイプを指定する
-余白:外側余白のサイズを表し、top->left->bottom->右側の順に指定できます.
文章のフォントをあげる場合は、「Google Webフォント」などを使ってlinkやstyleを書くことができます.
ログインページ
ログインページ
パスワードを入力してください
ID :
PW :
ログイン<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Do+Hyeon&family=Nanum+Pen+Script&display=swap"
rel="stylesheet">
<!-- 파일로 신행하는 방법-->
<!-- <link rel = "stylesheet" type="text/css" href = "mystyle.css">-->
<style>
*{
font-family: 'Cute Font', cursive;
font-family: 'Do Hyeon', sans-serif;
font-family: 'Nanum Pen Script', cursive;
}
.wrap{
width: 300px;
margin: auto;
}
.my_title{
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="my_title">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p> ID : <input type="text"/></p>
<p> PW : <input type="text"/></p>
<button> 로그인하기</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Do+Hyeon&family=Nanum+Pen+Script&display=swap"
rel="stylesheet">
<!-- 파일로 신행하는 방법-->
<!-- <link rel = "stylesheet" type="text/css" href = "mystyle.css">-->
<style>
*{
font-family: 'Cute Font', cursive;
font-family: 'Do Hyeon', sans-serif;
font-family: 'Nanum Pen Script', cursive;
}
.wrap{
width: 300px;
margin: auto;
}
.my_title{
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="my_title">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p> ID : <input type="text"/></p>
<p> PW : <input type="text"/></p>
<button> 로그인하기</button>
</div>
</body>
</html>cssファイルの分離方法は、コードが長すぎることを防止するために、個別のcssファイルを作成してインポートすることです.具体的なファイル名.cssを作成し、headにlinkrel=「スタイルシート」type=「text/css」href=「ファイル名.css」を作成します.
ガイドバーの使用方法
-cssは設計要素なので、他の人が作成した結果を使用できます.ブートストラップは、これらの成果物の集合サイトと見なし、必要な部分をコピーして使用できます.
-重要な点は、Web上で開発者ツール[element]を使用して領域を表示できる領域を分割することです.この点を見ると,開発者は必要な部分をチェックし,コードの不要な部分を除去することができる.
-Boost Streetを使用する場合、開発者が特定の部分に追加事項がある場合は、Google Search(Googleフォントの太さ)で作成できます.
-枠線が必要な場合は、css border mdn(正式ドキュメント)またはw 3 schoolsにアクセスします.標準の作成方法がリストされています.「」を参照してください.
Reference
この問題について(1週目の「スパルタコードWeb開発」CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@geonut/스파르타-코딩-웹개발-1주차-CSSテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol