[ハイブリッド学習イブ]Web開発基盤02
スパルタコードクラブのウェブサイト開発の基礎を聞いてまとめた文章です。
▶講義リンク
📍 画像の背景を設定
background: url("이미지 주소");background-size: cover;background-position: center;background: url("이미지 주소");
background-size: cover;
background-position: center;📍 塗りつぶしと余白
:paddingは内側に白を残すために使用されます
:marginは外に白を残すために使用されます
/*속성에 하나씩 부여하는 경우*/
.test{
margin-top: 20px;
margin-bottom: 30px;
margin-right: 5px;
margin-left: 10px;
}
/*한 번에 쓰는 경우, 시계 방향 순서(top, right, bottom, left)이다*/
.test{
margin: 20px. 5px, 30px, 10px;
}でも時計回りの順番は考えにくいし、
多くの場合、詳細なコードではなく、同じ空白だけを調整します.
.test{
margin-left:auto;
margin-right:auto;
}
/*혹은*/
.test{
margin: auto;
}11 divタグ領域区分の新しいお知らせ
→今まで、クロムにf 12キーを押してdiv領域を確認していたのですが…😇
📍 水平方向中央揃え
.test{
display: block;
width: 0.5em;
margin: auto;
}📍 Webフォントの適用
▶透き通ったゴシックフォントはあまり好きではありません(Windowsのデフォルトフォントは透き通ったゴシック…はは…)私はcssを勉強していたとき、ホームページのフォントを応用して勉強したのを覚えています.
▶さまざまなネットフォントがありますが、授業中はGoogleネットフォントを使用しています.
✔Googleページフォントを自分のhtmlコードに適用する方法は以下の通りです。(2021年6月を基準として、今後GoogleのWebページが異なる場合があります。参照)
1.GoogleのWebページに移動します.
GoogleのWebページに移動
2.自分の欲しいフォントの箱をクリックします.
3.+select this styleをクリックし、右上隅の「コレクション」アイコンをクリックします.
4.Select Familyウィンドウを開くときは、ラジオボタンリンクをクリックします
5.リンクボタンの下のコードはhtmlファイルのheadラベルに入れます.
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400&display=swap" rel="stylesheet">
</head>
*{
font-family: 'Noto Sans KR', sans-serif;
}📍 アノテーション処理
<!--주석-->/*주석*/Reference
この問題について([ハイブリッド学習イブ]Web開発基盤02), 我々は、より多くの情報をここで見つけました https://velog.io/@ssook1222/이브와-블렌디드-러닝-웹-기발-기초-02テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol