HTML, CSS
1.HTMLタグ
1.タグの属性
💡The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
💡The content: This is the content of the element. In this example, it is the paragraph text.
💡The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.
2.imgラベル
💡 imgラベル名は、srcという属性を有し、その値は「codestates-log.png」である.
💡 ラベルを閉じる必要はありません.
2. HTML vs CSS vs JavaScript
💡HTMLは、Webドキュメントを構造化して表す言語です.
💡CSSは、構造化された文書をどのように可視化するかについての言語です.
💡JavaScriptは本来、Webドキュメントをブラウザで表示するためのスクリプト言語ですが、現在はnodeです.jsを利用してサーバを作成するだけでなく,PCのためにアプリケーション/プログラムの汎用プログラミング言語を作成することもできる.
💡Webドキュメントの標準を記述する言語はなく、HTML Living標準は詳細なWeb標準を提案している.様々な基準の中で最も望ましい基準と言える.ただし、開発のためにすべての内容を熟知する必要はなく、MDNの最も信頼できる公式ドキュメントを参照するだけでよい.
3.CSSスタイルを適用する3つの方法
1.インラインスタイル:同じ行にスタイルを適用する
2.内部スタイルシート:CSSファイル内で作成した内容を別々のファイルに区切らずにスタイルラベル内で作成する
3.外部スタイルシート:スタイルシートをリンクラベルのrelにリンクする
(ex.Style sheet名がlayoutの場合...) <link rel="stylesheet" href="layout.css" />
4.デフォルトコレクタ(セレクタ)
1.idでスタイルを名前付けて適用
<h4 id=“이름”> 내용 </h4> //“#”을 이용해 선택!
💡!!! idは1つのドキュメントで1回しか使用できません.つまり、ドキュメントに1つの要素しか適用できない唯一の名前です.でもすべてのli要素でスタイリングしたいなら...?idは使えないのでclassを使います!
2.クラス別にスタイルを適用
💡classを使用して同じ機能を持つCSSを複数の要素に適用
💡すべてのli要素に同じclssを追加すると、同じスタイルを複数の要素に適用できます.
💡“.”選択を使用!<ul>
<li class=“menu-item”> Home </li>
<li class=“menu-item”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item”> iPad </li>
</ul>
次に、スタイルを次のように適用できます..menu-item {text-decoration: underline;}
複数のclassを1つの要素に適用する場合は、class名に「(スペース)selected」を付けるだけです.例:<li class=“menu-item selected”> Home </li>
<li class=“menu-item selected”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item selected”> iPad </li>
そしてcssコードで.selected {
Font-weight: bold;
}
入力するとHome,Mac,iPadだけフォントが太くなっているのが見えます.💡iPhoneはselectedを入力していないので、そのアプリケーションが見えます!
3.💡idとclassの違い
Reference
この問題について(HTML, CSS), 我々は、より多くの情報をここで見つけました
https://velog.io/@boraborayoon/HTML기초-CSS기초
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
💡HTMLは、Webドキュメントを構造化して表す言語です.
💡CSSは、構造化された文書をどのように可視化するかについての言語です.
💡JavaScriptは本来、Webドキュメントをブラウザで表示するためのスクリプト言語ですが、現在はnodeです.jsを利用してサーバを作成するだけでなく,PCのためにアプリケーション/プログラムの汎用プログラミング言語を作成することもできる.
💡Webドキュメントの標準を記述する言語はなく、HTML Living標準は詳細なWeb標準を提案している.様々な基準の中で最も望ましい基準と言える.ただし、開発のためにすべての内容を熟知する必要はなく、MDNの最も信頼できる公式ドキュメントを参照するだけでよい.
3.CSSスタイルを適用する3つの方法
1.インラインスタイル:同じ行にスタイルを適用する
2.内部スタイルシート:CSSファイル内で作成した内容を別々のファイルに区切らずにスタイルラベル内で作成する
3.外部スタイルシート:スタイルシートをリンクラベルのrelにリンクする
(ex.Style sheet名がlayoutの場合...) <link rel="stylesheet" href="layout.css" />
4.デフォルトコレクタ(セレクタ)
1.idでスタイルを名前付けて適用
<h4 id=“이름”> 내용 </h4> //“#”을 이용해 선택!
💡!!! idは1つのドキュメントで1回しか使用できません.つまり、ドキュメントに1つの要素しか適用できない唯一の名前です.でもすべてのli要素でスタイリングしたいなら...?idは使えないのでclassを使います!
2.クラス別にスタイルを適用
💡classを使用して同じ機能を持つCSSを複数の要素に適用
💡すべてのli要素に同じclssを追加すると、同じスタイルを複数の要素に適用できます.
💡“.”選択を使用!<ul>
<li class=“menu-item”> Home </li>
<li class=“menu-item”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item”> iPad </li>
</ul>
次に、スタイルを次のように適用できます..menu-item {text-decoration: underline;}
複数のclassを1つの要素に適用する場合は、class名に「(スペース)selected」を付けるだけです.例:<li class=“menu-item selected”> Home </li>
<li class=“menu-item selected”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item selected”> iPad </li>
そしてcssコードで.selected {
Font-weight: bold;
}
入力するとHome,Mac,iPadだけフォントが太くなっているのが見えます.💡iPhoneはselectedを入力していないので、そのアプリケーションが見えます!
3.💡idとclassの違い
Reference
この問題について(HTML, CSS), 我々は、より多くの情報をここで見つけました
https://velog.io/@boraborayoon/HTML기초-CSS기초
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<link rel="stylesheet" href="layout.css" />
1.idでスタイルを名前付けて適用
<h4 id=“이름”> 내용 </h4> //“#”을 이용해 선택!
💡!!! idは1つのドキュメントで1回しか使用できません.つまり、ドキュメントに1つの要素しか適用できない唯一の名前です.でもすべてのli要素でスタイリングしたいなら...?idは使えないのでclassを使います!2.クラス別にスタイルを適用
💡classを使用して同じ機能を持つCSSを複数の要素に適用
💡すべてのli要素に同じclssを追加すると、同じスタイルを複数の要素に適用できます.
💡“.”選択を使用!
<ul>
<li class=“menu-item”> Home </li>
<li class=“menu-item”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item”> iPad </li>
</ul>
次に、スタイルを次のように適用できます..menu-item {text-decoration: underline;}
複数のclassを1つの要素に適用する場合は、class名に「(スペース)selected」を付けるだけです.例:<li class=“menu-item selected”> Home </li>
<li class=“menu-item selected”> Mac </li>
<li class=“menu-item”> iPhone </li>
<li class=“menu-item selected”> iPad </li>
そしてcssコードで.selected {
Font-weight: bold;
}
入力するとHome,Mac,iPadだけフォントが太くなっているのが見えます.💡iPhoneはselectedを入力していないので、そのアプリケーションが見えます!3.💡idとclassの違い
Reference
この問題について(HTML, CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@boraborayoon/HTML기초-CSS기초テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol