TIL # 1

画像に大きな時間を指定

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

cssファイルをhtmlに関連付ける場合

<link href="index.css" rel="stylesheet" type="text/css" />

クラスにスタイルを適用する場合

スタイルをidに適用する場合

フォント名にスペースが含まれている場合は、「」(二重引用符)を付けます.

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

font-weightはフォントの厚さを調整する特性があります

数字400と正常です.数字700とboldの厚さは同じです.

.bold-font {
  font-weight: bold;
}

spanは右揃えできません.inline-elementなので

text-indent: 50px; 들여쓰기

   스페이스를 의미하는 코드

セレクタの適用の優先度
tag <<<<< class <<<< id <<<<<< inline css
セレクタの貼り付け時

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

画像タグのプロパティ

alt:画像が表示されていない場合(画像がサーバから削除された場合、または画像アドレスが無効な場合)、

テキスト代替画像

src:画像ファイルパスまたは画像URLアドレス

は、1つの縦/横の値だけを設定、残りの寸法

を同じ割合で縮小することができる.
画像をCSSに入れる

<div class="bg-img">배경이미지</div>

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

divタグの内部コンテンツの垂直サイズはdivタグの垂直サイズであり、内部に物がある限り、画面全体の幅はそれ自体の水平サイズである.
中身がなければdiv.bg-imgのサイズは0 px*0 pxです
横と縦の長さを固定すれば、中身がなくても画像は消えません.
background-sizeは100%で、画像全体が長さに一致するように見えます.

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%
}