HTML & CSS
27017 ワード
Webを整理するために、HTML、CSS、JavaScriptの3種類があります。
注目点を分離するには、構造、スタイル、インタラクションを分けてコードを記述する必要があります。
HTML
HTMLは、ウェブ構造(Structure)を担当するタグ言語である.
htmlは不等号で囲まれたHTMLの基本コンポーネントです.
ツリー構造を表します.
<html>
<head>
<title>Hello HTML & CSS & JavaScript</title>
</head>
<body>
<h1>Hello HTML</h1>
<div>
<span>HTML Start!!!</span>
</div>
</body>
</html><tag></tag>の形があり、ラベルの内部には内容があります.以下のラベルは、ラベル内部に内容がない場合に
<tag />と表現することができる.<img src="image/image01.png"></img>
<img src="image/image01.png" /> // 생략이 가능하다<tag attribute="value"> </tag>
<tag attribute="value" />divラベルとspanラベルの比較
div:タグごとに1行を占めます.
span:各タグが占有する空間はコンテンツの大きさと同じです.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="index01.css" />
</head>
<body>
<div id="div1">div 태그는 한줄을 차지 합니다</div>
<div id="div2">이것은 또 다른 div 태그입니다</div>
<span id="span1">span 태그는 컨텐츠의 크기만큼만 공간을 차지합니다</span>
<span id="span2">이것은 또 다른 span 태그입니다</span>
<span id="span3">이것 또한 또 다른 span 태그입니다</span>
<span id="span4">저도 span 태그에요!</span>
<div id="div3">저는 무슨 태그일까요?</div>
<script src="index01.js"></script>
</body>
</html>
DeveloperコンソールでHTMLの構造を表示することもできます.
imgラベル
img挿入について説明します.
<img src="image/" /> src=" "この部分は属性です.key = "value"に記入すればいいです.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>img 삽입</title>
</head>
<body>
<h1>아래에는 너무 귀여운 사모예드들이 있어요! :)</h1>
<img src="image/samoyed.jpg" width="400px" />
</body>
</html>
タブ
<a>要素はアンカーポイントの略で、HTMLドキュメントに他のページに接続されたハイパーリンクを表示するために使用され、主にhrefプロパティに使用されます.上記のimgタグ部分を説明するために作成されたhtmlファイルにaリンクを追加します.
<a href="https://www.google.com/search?q=%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84&rlz=1C5CHFA_enKR942KR942&sxsrf=ALeKk03btlf9eq9Xgi441duCNR-SgkJwXg:1614907357031&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjknvHa_pfvAhXKad4KHQihDKgQ_AUoAXoECAoQAw&biw=1680&bih=1306" target="blank">너무나도 사랑스러운 리트리버들 보러가기!</a>
aタグのtargetプロパティは、既存のページに直接リンクされます.
target="blank"のプロパティが付与されている場合は、現在表示されているページを保持し、新しいウィンドウを開いて移動できます.ハイパーリンクハイパーリンク:すべてのフォーマットの資料、参照、リンクリングをハイパーテキストドキュメントに直接リンクします.
ul, ol, li
<html>
...
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>detail Item 1</li>
<li>detail Item 2</li>
<li>detail Item 3</li>
<li>detail Item 4</li>
<li>detail Item 5</li>
</ul>
</li>
</ul>
</body>
</html>
ol概要
<html>
...
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ol>
<li>detail Item 1</li>
<li>detail Item 2</li>
<li>detail Item 3</li>
<li>detail Item 4</li>
<li>detail Item 5</li>
</ol>
</li>
</ol>
</body>
</html>
input type
input,textarea:各種入力フォーム
inputラベルは、タイプによってinputを使用できます.
CSS
要素を視覚化するスタイルシート言語を設計します.
htmlドキュメントで作成した構造にid、classでスタイルを適用できます.
CSSはデザインだけじゃない!
1.適切な場所にコンテンツを配置する(レイアウト)
2.強調テキストのような最低限のレイアウト
3.最小限のアクセス性を提供可能(色などで区別可能)
Box Model
box modelには、コンテンツ、塗りつぶし、枠線、余白があります.
box-sizing: border-box
border-boxは、width、heightsをborderにborder、paddingの値を設定すると、その内容が徐々にドリルされる構造です.
box-sizing: content-box
contentサイズを基準にpadding,border,marginを外側に与え,範囲を外側に拡大した.
idとclassの違い
idclass#を選択します.選択した宛先に基づいて自由に名前を付けることができ、宛先に基づいて自由に名前を付けることができます.ドキュメントには1つの要素だけが一意の値を持ち、同じ値を持つ要素が多く、1つの値しかない複数の要素が複数の値を持つ特定の要素を命名するために使用されます.スタイルの分類に使用
その他のスタイリング
Reference
この問題について(HTML & CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@jy777hi/4일차-HTML-CSSテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol