DevLog[HTML&CSS:デフォルトラベルとcssセレクタ]
# Intro
1週間で5日間走りましたが、今日はついでに外の空気を飲みます!カフェにやってきましたカフェに来て作ったブログはのんびりで良かったです.ははは.ブログも私のやるべきことではなく私の生活の一部...?ほほほ、ブログをする時、何度か人を喜ばせる経験があって、文章を残し続ける原動力になったようです.やっぱりみんなと一绪にやっているうちにもっと光る私のコラボ...申し訳ありません.ブログは主に夜、明け方に書いたので、頭がちょっとおかしいです.寄付記念としてもう一度頑張って書きましょう~
# html & css
ついにhtml!比較的簡単です.銀の玉htmlの目的は明らかですが、構造を見つけるのは難しいです.私だけがそう思っているのか分からない.htmlとcssの選択範囲が広すぎる!!!これが一番怒った気持ち
要するに,Webアプリケーションを作成するためにhtmlを用いて構造を決定し,cssを用いて構造を美しくすることができる.
自分のキャラクターを知っていたのですが、2つの方法で開発されていたら正解がないような気がします.何かをしたいなら、あなたの選択が多すぎるからです.だから流行に従うの?という考えがありましたが、これはトレンドではありません!!!しかし、私は退出する人ではありません.潮流と言えばまた私かな~頑張ってついて行こう
△私は以下の目標を今回のブログにアップロードしませんが、私たちはずっとそれをよく見ています.
html & css part. ターゲット.
1.HTML構造をプログラム可能に計画する.
2.CSSをHTMLに適用します.
3.w 3 schoolなどの参考サイトを使用してCSS属性を検索し、使用します.
4.基本的なセレクタ規則を理解する
5.CSSを使用してレイアウトを作成する
6.elementでclassを使用する場合とidを使用する場合を区別する
人生はマラソンだ.行くぞ!!!!!!!!!!!!!!!!!!!!!🔥
1. HTML
HTMLとは?
ついにhtml!比較的簡単です.銀の玉htmlの目的は明らかですが、構造を見つけるのは難しいです.私だけがそう思っているのか分からない.htmlとcssの選択範囲が広すぎる!!!これが一番怒った気持ち
要するに,Webアプリケーションを作成するためにhtmlを用いて構造を決定し,cssを用いて構造を美しくすることができる.
自分のキャラクターを知っていたのですが、2つの方法で開発されていたら正解がないような気がします.何かをしたいなら、あなたの選択が多すぎるからです.だから流行に従うの?という考えがありましたが、これはトレンドではありません!!!しかし、私は退出する人ではありません.潮流と言えばまた私かな~頑張ってついて行こう
△私は以下の目標を今回のブログにアップロードしませんが、私たちはずっとそれをよく見ています.
html & css part. ターゲット.
1.HTML構造をプログラム可能に計画する.
2.CSSをHTMLに適用します.
3.w 3 schoolなどの参考サイトを使用してCSS属性を検索し、使用します.
4.基本的なセレクタ規則を理解する
5.CSSを使用してレイアウトを作成する
6.elementでclassを使用する場合とidを使用する場合を区別する
人生はマラソンだ.行くぞ!!!!!!!!!!!!!!!!!!!!!🔥
1. HTML
HTMLとは?
デフォルトでは、
HTML TAG
:divラベル間の内容が1行を占めます.
- 、
- :ulは順序のないリストを出力し、olは順序のあるリストを出力する.Li先ほどお話しした2人の子供として入力し、リストの項目を出力します.
- <textarea>:長く書くことができる内容を提供します.
- :入力可能な複数のタイプのコンテンツが含まれます.
:htmlに JavaScriptコードを記述する、、、
、 、 :テーブルパーティションを作成します.左から右に行くと、ラベルのスペースが小さくなります. 
- MDNにHTMLタグが記載されていますので、ご自身で学習してください
- 自己閉鎖のラベルがあります.(『img』『input』『meta』など)
- 上図は周波数の高いラベルです.私を中心に、知らないラベルや必要なラベルがあれば、その時になってから勉強しましょう.
2. CSS
1) CSS가 뭐하는거지?
- 積層スタイルシートの略.Webコンポーネントスタイルを定義する単語
2) HTML, CSS 뭐가 다르지?
HTML- フラグ、検索ウィンドウ、ボタンが中央に位置する、機能は右上隅等のページ要素を構成する役割(構造/構造フレーム等をつかむ)
にある.
CSS- バッジのサイズ、検索ウィンドウの幅、ボタンのサイズ、およびコンポーネントの位置を設定します.
🔥CSSはHTMLページを飾る役割を果たしています!🔥3) CSS를 HTML에 적용하는 방법
行の作成- htmlタグにスタイルを直接適用します.
- ex.
HTMLでの合成<h1 style=“color: red; font-style : Italic”>Hello world</h1>タグ - は通常タグ内
に挿入する.- タグが選択された規則に従って
が一括適用される.<!DOCTYPE html> <html> <head> <title>Page title</title> <style> h1 { color: red; font-style: italic; } </style> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!</span> </div> </body> </html>- の上のコードでは、helloworldはWeb上に斜体の赤いフォントとして表示されます.
HTML外部での合成- タグ
を使用- CSS拡張子で保存するスタイルシートファイル
をhrefプロパティで挿入します.<!DOCTYPE html> <html> <head> <title>Page title</title> <link rel="stylesheet" type="text/css" href="myFirstStyle.css" /> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!</span> </div> </body> </html><!DOCTYPE html> <!--myFirstStyle.css--> h1 { color: red }3) Selector
セレクタとは?- cssから要素を選択するルール
用語- タグは、開始タグおよび終了タグのようなタグを表し、要素は意味のある構造を表す.
- どういう意味だ?もしそうであれば、セレクタを使用してタグにキャラクタを割り当てます.または、どのような動作をする領域を定義します.例えば、コメントウィンドウに書いてあるところと読むところを想像してみてください.HTMLコード内で直接divが書かれているところと読み取っているところを分けると、ここが何をしているのか一目でわかりません.セレクタを使用して、この場所の名前を定義し、定義した名前から書き込み位置と読み取り位置に一度にアクセスできます.これにより、今後DOMによる効率的な作業が可能になります!
- cssは、基本的にスタイルラベルに効果を適用したいラベルについて作成され、htmlドキュメントに反映されます.h 1ラベル内でテキストにそれぞれ異なる効果を生じたい場合は、どうすればいいですか?
solution.1.<!--index.html--> <!DOCTYPE html> <html> <head> <title>Page title</title> <link> rel=“stylesheet” type=“text/css” href=“myFirstStyle.css” /> </head> <body> <h1>Hello world</h1> <h1>Lee jaewon</h1> </body> </html><!--myFirstStyle.css--> h1 {color : red}- 要素毎に一意IDを付与し、#(identifier)を用いて一意ID
を選択する.- htmlドキュメントには、
を付与できる要素が1つしかありません.<!--index.html--> <!--생략--> <h1 id=“hello”>Hello world</h1> <h1 id=“Lee jaewon”>Lee jaewon</h1> <!--생략-->
solution.2.<!--myFirstStyle.css--> #hello { color: red; } #Lee jaewon { color: blue; }- .(dot)を使用して、効果を適用したいタグのclassとして指定します.
- の複数のタグにクラスを付与してもよいし、1つのタグに複数のクラスを適用してもよい.
- スペースを使用して、1つの要素に複数のクラスを指定できます.
- 同じ形状を繰り返す場合はclassを使うと便利です.
ex.<!--index.html--> <!--생략--> <h1 class=“red underline”>Hello world</h1> <h1 class=“blue”>Lee jaewon</h1> <!--생략--><!--myFirstStyle.css--> .red { color: red; } .blue { color: blue; } .underline { text-decoration: underline; }3. HTML과 CSS에 대해 더 알아야 할 것
- 、、
- CSSレイアウト:boxモデル、position、z-index/float、flex box、gridなどを使用して、実践を通じて勉強してください!
# Work Off
最初はHTMLやCSSに正解はなかったようですが、書くにつれて問題が明確になりました.レイアウトをどう調整すればいいか分からない!レイアウトの仕方が多すぎる!!
レイアウトを設定すると、その後必要な要素で埋められ、最初から壁に塞がれているような気がします!企業でプロジェクトを行うと、どのような方法でネットワークの構造をつかむのか知りたい.フロントには潮流を追いかける能力が必要だと聞きましたが、どうすれば潮流を理解して潮流を追いかけることができますか?
もし私のブログが熱いブログだったら、多くの人がコメントを書いて助けてくれます.😭
しかし、私はグーグルとNAVERの検索エンジンを持っているのではないでしょうか.今日も整理の過程で成長できるものを手に入れた気がします.毎日何時間も眠れない日を過ごしているが、疲れていない.逆に心が感動して面白かった下のhtml、cssの位置付けは、上にリストされている理解すべき内容を紹介します.기본기가 탄탄한 풀스택 개발자가 되는 그날까지 🔥🔥🔥
Reference
この問題について(DevLog[HTML&CSS:デフォルトラベルとcssセレクタ]), 我々は、より多くの情報をここで見つけました https://velog.io/@hongin/인자한-개발로그HTMLCSS
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
- 、