1)タイトル作成時に使用するtag

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>

h 1が最大、h 6が最小.

h1 tag

hello world

h6 taghello world

2)段落内で改行または1行置くときに使うtag

<p>안녕하세요 코딩을 배우고 있는 학생입니다.</p>
<p>그랩마켓 강의를 통해서 개발분야를 결정하고 싶습니다.</p>
<br />
<p>자투리 시간에 개발공부하자</p>

こんにちは、私はコードを勉強している学生です.
Grap Market講座で開発分野を決めたいと思います.
零細な時間に開発を学ぶ

段落で改行する場合は、p tag

を使用します.

段落に1行表示する場合はbrtag

を使用します.

3）画像タグ

<img src="이미지주소 복붙" alt="이미지 설명" /> <img src="폴더명/파일명.파일종류" alt="이미지 설명" /> <img src="images/icon/avatar.jpg" alt="이미지 설명" />

画像ファイル中のiconファイル中のアバターファイル名jpgファイルタイプ

altプロパティは、ピクチャピクチャがアップロードされていない場合、ピクチャ説明文が表示されます.

4)入力値を受け入れるセルを作成するときに使用するtag

<form>
	<label>id</label>
	<input type="text" />
	<br />
	<label>password</label>
	<input type="password" />
	<br />
	<input type="submit" value="전송" />
</form>

id
password

フォームタグにlabel tag、input tagを入力できます

label tagは、input tagの前にinput名を設定するtagである.

inputtagは入力値を受け入れるボックスです.ボックスのタイプはtypeプロパティで決定する必要があります

inputtagのtype属性がsubmitの場合、value属性設定ボタンの名前

を使用できます.

<form action="index.html">
  <input />
</form>

action=「index.html」を表す

フォーム、indexを使用します.htmlに移動します.

例:form tagのsubmitボタンを押してindexを操作します.htmlページに移動します.

<input placeholder="id" required />

プレースホルダ=「id」の意味

inputボックスに名前を入力します.

必須の意味

は、対応する入力欄を入力し、submitボタンをクリックする必要があります.

4)コメントショートカット

コメントショートカットコマンド+/

5)idとclass

p {
	color: tomato;
}

#id-test,
.class-test {
	color: aqua;
}

<div id="id-test">id가 적용된다.</div>
<div class="class-test">class가 적용된다.</div>
<div class="class-test">class가 적용된다.</div>

idが有効になります.
classが有効になります.
classが有効になります.

idおよびclassでは、css指定法-idの属性値の前に#を加算します.classのプロパティ値の前にあります.貼り付け

idは繰り返し不可(1個のみ)、クラスは

繰り返し可能である.

6)親子関係でのcssの指定

#item-list p {
  color: tomato;
}

cssをすべてのpタグに

#item-list pの意味->id item-listを持つタグに適用する

#item-list > p {
  color: brown;
}

#item-list>pとは、id item-listを有するtagにおけるtagの直前に位置するp tagにCSSを適用することを意味する

item 2は確かにitem 1に属しているが、item 3は直接item 1に属していない.

<div id="item1">
	<div id="item2">
		<div id="item3"></div>
	</div>
</div>

7)vscサイズとメニューサイズの設定方法

vscフォント設定法

ギアクリック

setting

font size検索

editor:font sizeの数値変更

vscメニューサイズ設定方法

ギアクリック

setting

window zoom検索

editor:font sizeの数値変更(デフォルトは0)

8）各種css属性

height: 100px;箱の長さの決定width: 33%;ボックスの幅を指定background-color: tomato;ボックスの背景色を決定color: yellowgreen;tagに含まれるコンテンツの色を変更します.font-size: 30px;字号を変える.font-weight: 400;字号を変える.padding: 15px;箱の大きさを上下左右に15 px広げます.margin: 50px; margin-left: 15px;箱の左側に15 pxのスペースを空けます.border: 3px dashed blue;警戒線を設置する機能です.
属性値の順序は、線の太い線種線の色です.
}

9)divを水平、垂直に移動(Flexbox)

重要:配置するdivを含む親divに設定する必要があります.
結論:親divでflex->flex方向の設定->divを配置方向に移動し、垂直方向を配置します.display: flex;垂直に配置されたdivが水平に配置したい場合に使用します.flex-direction: row;divの配置方向を変更できます.
垂直方向すいちょくほうこう:column column column
水平方向:row
逆:column-reverse,row-reversejustify-content: flex-end;divは、リストされた方向に従ってdivを移動します.
最も左、中央、最も右、divの間隔をオフセットalign-items: center;div整列方向の垂直方向を基準にdivパケットを移動します.

10)divを1行に配置することが困難な場合の使用方法

は、親(flexなど)

に設定する必要があります.flex-wrap: nowrap;(기본값)サブdivを1行に並べ替えるのが難しい場合は、サブdivの幅を縮小して強制的に1行に並べます.flex-wrap: wrap;サブdivの幅を縮小するのではなく、divを1行ではなく2行に配置します.

11)divの空き容量の設定方法

結論:flex: 1;を常用する.flex-basis: 100px;このdivの幅を設定flex-grow: 1;空き領域に対する割合、デフォルトは0です.

その他の方法

2個divの場合、一方の構成width: 10%、他方の構成width: 90%

flex-shrink: 5;親divが減少した場合(ウィンドウが減少した場合)、子divが減少した割合、デフォルト値1.flex: 1;flex-basic、flex-grow、flify-shripを一度に設定する方法
flex:grow値収縮値ベース値
flex: 1 1 100px;
実際にはflex:1です.よく使用する->growのみを設定し、残りはデフォルトです.