プログラミング自主学習 DAY87 Sementic html/inline/box/margin
HTML
<form> <input> <label>
<oi>,<ui>と<li>がセットのように<form>親で、<input>は子みたいな関係性です。
<form>
<label for="profile-file"> Profile Photo <label>
<input id="profile-file" type="file" accept="image/*" />
<input placeholder="Name" type="text" />
<input placeholder="Last Name" disabled type="text" />
<input placeholder="Username" type="text" />
<input required placeholder="password" minlength="10" type="Password" />
<input placeholder="birthday" type="datetime-local"
<input type="submit" value="create account" />
</form>
<input>にある様々なattributeを活用し、WEBサイトに色々なボタン、データーを入れることができます。InputStreamみたいな感じですね。
<label>は<input>と連携して使えるタグで、<label>のfor attributeと<input>の
<id>が同じなら、画面上のラベルをクリックすることで、該当input(stream）に繋がります。
このように文字を入られるものをいいinput controlといいます。
Sementic html
Semetic html（セマンティックhtml)とは、セマンティックタグ(sementic tag)、セマンティック要素(sementic element)で構成されたHTMLファイルです。
セマンティックタグ(sementic tag)は、ブラウザと開発者の両方に要素の意味を伝える役割を果たします。
例えば、本文を分ける<div>や少ない文字列の<span>タグは、タグ自体に意味は持ちません。
しかし、<div>と同じ機能ですが、<header>,<main>というセマンティックタグでコードを
作成するば、「これは題名だ、これが本文なんだ」 のようにとても分かりやすくなります。
spanの代わりに<address>というセマンティックタグを使えばコードを見る側にとっても、パソコンの検索エンジンにとっても理解しやすいです。
読みやすくとSEO対策だけではなく、障害も持っている方々のためにもSementic htmlを役にたつまで、使える状況であれば、セマンティックタグを活用することをオススメします。
<img src="/images/nl.jpg" alt="netfilxロゴ" />
<img>タグを使用する際には、<alt>属性を付けて画像が読み込まれない場合でも代替テキストが表示されますので、最初から記述する習慣を身につけることが良いでしょう。
CSS
Inline CSS vs External CSS
cssを活用する方法は二つです。
一番目は<link>タグにhref attributeとrel attributeを活用する方法です。
これによって、1行目のコードで、htmlはセクシーになります。
これをexternal cssといいます。
こちらに関しては、今後アップロードします。
これにより、一行目で.htmlが短くなる効果があるため、オススメする方法です。
二番目は、.htmlに<style>というタグに構成されているelementを作成し、直接CSSコードを作成する方法です。このような方法をinline cssとも呼びます。
Inline vs Block level
htmlのタグは3つの種類があります。
Inline: 同じラインにelementが来れるタグです。in the same lineを略して、Inlineになります。
Inlineはテキスト要素を表現するためのタグの集まりなのでheightとwidthがありません。
例) <span>,<img>,<a>,<code>
<span>
<p>
</span>
中にblock level elementが入ることもできません。
Block Level: 同じラインにelementが来られないタグです。Web Browerが区切ります。printlnみたいな感じです。殆どのタグはblockです。
Blockはheightとwidthがあり、中にInline elementが入ることもできます。
例）<div>,<h1>,<address>
互いはselectorのdisplay attributeを通して、形を変換することかできます。Blockの場合、Inlineに変換した後、contentsがないと見えなくなります。
Blockは、Boxとしてのmargin, padding, borderという３つの属性があります。
margin
<style>
html {
background-color: tomato;
}
div {
height: 150px;
width: 150px;
background-color: whitesmoke;
}
</style>
html文書のbackgroundの左上にdivの白いboxではなく、少しの空白があることが分かります。
右にuser agent stylesheetという書いてありますが、これはBrowserが基本のstyle attributeを適用したという意味です。display:blockも見えますね。
body {
display: block;
margin: 8px;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
}
コードを見れば、marginが8pxで、先ほどの空白を表すことが推測できます。
marginはboxを囲む見えないバリアみたいなものです。
ボックスがソンゴクなら、ソンゴクを囲んでる黄色いオーラーみたいなものだと思ったラ分かりやすいです。
★Margin Collapse(マージンの相殺)★
コードの通り、マージンが被ってしまうことです。margin-topとmargin-bottomのみ起きる現象です。マージンの相殺はこのような状況に置きます。
1. 引接しているボックスの上下marginが重なる場合
https://velog.io/@raram2/CSS-마진-상쇄Margin-collapsing-원리-완벽-이해
コード上には,空白が60pxになるはずですが、上のボックスのmargin-bottomと下のブロックのmargin-topが重なってしまい、空白が30pxになります
原因が分かりませんが、独立されているはずのボックスが合体してしまったみたいな感じですね。この場合は、本来の目的に設定するため、一つのブロックのmargin本来設定された30pxより大きくする必要があります。60pxにですね。
2. 親ボックと子ボックスの上下marginが重なる場合
https://velog.io/@raram2/CSS-마진-상쇄Margin-collapsing-원리-완벽-이해#1-인접-형제-박스-간-상하-마진이-겹칠-때
この場合は、二つが運命共同体みたいな一緒に動いてしまいます。親ボックスのborder-bottomと子ボックスのborder-topの中で大きなmarginがtopになりますので、子ボックスのborder-topを大きくすることでmarginを調節できるとは思いますが、、（確証はありません！）
一番、簡単な解決策は子ボックスにborderでこのような問題を予防することができるらしいです。
3. ボックスの上下marginが重なる場合（下のボックのmargin-topが0か視覚的な情報がない場合）
inline contentを持っていない<div>の場合、上下のmarginを設定しないと、マージンの相殺が起きます。下のnormal <div>はmarginがないため、empty<div>のmargin-bottomに繋がります。
<!doctype html>
<html>
<head>
<style>
#empty{
margin-top:50px;
margin-bottom: 100px;
border:1px solid tomato;
}
#normal{
background-color: powderblue;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
</html>
Discussion