TIL_09_with Wecode 001 html & css

上のコードの初日、htmlとcssの課題をしたとき、記録したい内容をいくつか残しました.

<meta charset="utf-8">:ハングル、日本語、中国語を含むページの場合はutf-8という文字コードを追加する必要があります.//書いただけなのでついて書きますが、ハングルを含むページに追加する必要があります.ハングルだけ書いていたら、なぜ間違いがあったのか、わけがわからず通り過ぎてしまった.

<meta name="viewport" content="width=device-width">:これは、デバイスの水平寸法がウェブページの水平寸法に等しいことを意味する.Webサイトがモバイルできれいに見える場合は、これらの情報を追加する必要があります.この情報が追加されていない場合は、デスクトップバージョンのWebページの折りたたみが表示されます.//あ、なぜか前回サイトを作った時にページが縮小してしまいました…

<h1>, <h2>, <h3>, <h4>, <h5>数字は1から5に上昇し、フォントは小さくなります.タイトルの略.

<span> <span>タグは、主にテキストを含む.
行(line break)が開かず、行が続いて表示されます.<span>に示すように、1行の次の行の要素は**inline element**と呼ばれます.

<p> <p>タグも、主にテキストを含む.
pは段落の略語なので、段落全体を入れることが多いです.<p>タグは<span>タグとは異なり改行が発生します.

divを使用する理由は、次のとおりです.
似たような部分がグループを構成し、
レイアウトをデザインから分離します.
これは、各<div>がclassまたはid属性を付与することによってcssスタイルを実現できるためである.
例えばタイトル、メニュー、メインコンテンツ、ツイッター...このように分けてdivで刺します

<a href="https://wecode.com">위코드로 이동</a>

-aはtag名です.
-hrefはattribute(プロパティ)名です.
-https://wecode.comはhref属性の属性値です.
-「上のコードに移動」はcontent(コンテンツ)です.
idとclassの違いを覚えたいです.

ididは、各タグに名前を付ける属性です.
すなわち,id名を繰り返すことはできない.
たとえば、profileというタグは1つしかありません.
他のタグではprofileというidは使用できません.

classclassもタグに名前を付けたプロパティです.
ロールはidに似ていますが、classは複数のタグに重複する名前を付けることができます.
例えば、多くの人が「李チョルス」という名前を持っているように.
複数のタグに重複するクラス名を指定できます.

ブラウザは、まずタグをチェックし、デフォルトスタイルを適用します.
ただし、ラベルまたはclassまたはidにcss値がある場合は、スタイルを優先的に適用します.
たとえば、h 1タグがh 4より大きくなければならないが、そのタグがcss値を有する場合、スタイルが優先的に適用される.

text-alignすべての要素の既定の位置合わせは左揃えです.
spanはクラスを右揃えにしますが、右揃えはしません.
spanはinline-elementなので、spanが占める領域は「spanの右揃え」の長さしかありません.

図では、黄色は要素が占める領域です.この領域でソートします.

text-indent: 50px;インデントcssラベル
参考にする.
blockquoteは引用符を挿入するときに使用されるタグです.
ブラウザはデフォルトのスタイルを自動的に適用し、blockquoteラベルに2つの余白を追加しました.
参考にする.
文の間にスペースを追加したい場合はどうすればいいですか?
複数回空を打つと1つの空間しか適用されないので、複数回空を打つためには、空間を表すコードを追加する必要があります. は空間を表すコードです.

marginオレンジ色はmarginエリア、上、右、下、左の計50 px
黄色はborder領域で、boderの厚さは5 pxです.
緑は充填領域、上、右、下、左の合計50 px
元素の横径は273 px,縦径は90 pxである
要素にborderスタイルがある場合は、境界が描画されます.
paddingはborder内に作成された領域です.
上図では、273 pxという横方向の値がpadding領域のマージの横方向の長さである.
marginはborderの外部で生成されたエッジです.
写真に示すように、margin(オレンジ色)までの全横方向の長さは373 pxである.
273+50(左端)+50(右端)=373
純コンテンツ(青色領域)はpaddingとborderを除く長さであり、計算すると163 pxである.
273-50(左枠)-50(右枠)-5(左枠)-5(右枠)=163
width: 273px;
height: 90px;
margin: 50px;
border: 5px solid black;
padding: 50px;

span {
  border-bottom: 3px solid black;
  padding: 5px;
} ```

下線のように見えますか?text-decoration: underline;は勝手にカスタマイズするのが難しいため、サイト上のほとんどの下線スタイルはborderを使用して実現されています.

 * {
  box-sizing: border-box;
}

box-sizingは、画面上のボックスの表示方法を変更できる属性です.widthとheightは、シンボルコンテンツのサイズを指定します.したがって、枠があると、枠の厚さのため、所望の寸法を見つけることが困難になる.box-sizingプロパティをborder-boxとして指定すると、枠線を含むサイズを指定できますので、予測が容易になります.div .container li.first-list <li>に「first-list」クラスとマークされた要素にcssを適用します.
これは、<div>タグの「container」クラスの要素にのみ適用されることを意味します.tag <<<<< class <<<< id <<<<<< inline css「サイトに画像を入れるには2つの方法があります.<img>タグと<div>タグに背景-画像属性を追加します.2つの方法の違いとそれぞれのメリットとデメリットを説明してください.」
私の答え:
2つの方法の違いを説明する前に、
「セマンティックネットワーク」(Semantic Web)とは、Webページを構成する要素の意味や関係を理解し、構築することによって「データベース化」を実現することを意味する.
「シンボルタグ」(Semantic Tag)は、form、section、nav、aside、footer、tableなど、シンボルネットワークを容易にするために生成される同じ意味を持つタグである.
div、spanは非意味タグに属する.<img>のラベルは「これはイメージです!」これは、検索エンジンでWebページを検索するときに、srcまたはaltの情報を背景に、より正確な検索を支援し、Webサイトに露出することで、積極的な効果を得る意味のあるシンボルマークです.<div>タグに背景画像属性を追加して画像を挿入する場合、<div>タグは、サイトコンテンツに対するいかなる意味または追加の説明も持たない無意味な非公式タグである.通常、繰り返し使用される小さなアイコンまたは設計にのみ使用される画像を挿入します.