html escape code
https://www.freeformatter.com/html-entities.html

ポイント(強調)

HTML構造では、タグの内容を強調表示(強調)したい場合は
「」または「em」タグが使用できます.実際、強調した内容はCSSとして使用できます.
ブラウザに明確に強調したい情報を伝えることができます.

Anchor(リンク)

aタグの後にhrefという属性値(attribute)を記入する必要があります.

<a href="주소"> 링크 </a>

hrefアドレスのタグ付け方法
1.Web URL

<a href="https://www.naver.com">링크</a>

2.ページ内を移動します(移動する部分のプロパティまたは選択者を指定できます).

<a href="#hello">링크</a>

メールを書く

<a href="mailto:메일주소"> 메일쓰기 </a>

に電話

 <a href="tel:전화번호">전화걸기</a>

*aラベルで使用される別の属性
target="_blank"
このattributeeを使用すると、新しいウィンドウが開き、リンクが解放されます.

image

 <img src="#" alt="" />

使用する属性

src(ソース)-->イメージファイルの相対パスまたはアドレス値

alt (alternative text)-->置換テキストを表します.画像がブラウザにレンダリングされていない場合は、その画像がどのような画像であるかを通知します.前を向いている人がブラウザを使用できない場合は、スクリーンリーダーを使用してWebブラウザを使用します.altを使用しない場合は、この画像は何ですか.知る術がない.

*私がアップロードした画像がHTML構造上意味がない場合
タグを使用せずに、CSSに画像ファイルを適用することもできます.(CSは気取った奴だけどCSSはすごくうまくやる)

リスト

ol(oldered list)

は重要なlist

です

ul(unordered list)

順序が重要でないlist

ol、ulは私が今からリストを作成する信号弾です.
次にli要素をol,ulのサブアイテムとして使用して実際のアイテムを表示します.
*注意事項
ulとolの直系サブ要素はliしか使用できません

Description List（定義リスト）

用語

の定義には

を用いる.

がキー値で情報を提供しようとするとき

.
使用するタグ(dlを宣言した後、dt、ddタグをそのサブタグとし、dl宣言なしでdt、ddを無効にする)

dl(説明リスト):説明リストの使用を定義するときに

を使用します.

dt(description term):キー値を指定するときに

を使用します.

dd(記述データ):値指定時に

を使用
*Synctax Alert(構文注意)

<dl>
	<dt>김버그</dt>
	<dd>김버그는 유튜버이다</dd>
	<dt>데벨업</dt>
	//description list는 key-value로 정보를 제공하기 때문에 key값만 적으면 안됨
	//key값에 맞는 value값도 있어야함.
<dl/>

<dl>
  <section> //dl의 직계 자식으로는 dt와 dd태그만 사용이 가능.
  			//section은 안되지만 div는 사용이 가능, div는 그냥 묶어주는 용도
	<dt>김버그</dt>
	<dd>김버그는 유튜버이다</dd>
  </section>
	
<dl/>

見積(参照)

使用するタグ

blockquote:段落全体またはコンテンツが引用文である場合に使用するタグ

q:段落またはコンテンツの一部が引用文である場合、このラベルを使用すると「

」が加算されます.
実際、pタグのみであっても、ユーザは何の問題もないように見えるが、ブラウザは、blockquoteまたはqタグを使用してhtmlをよりイメージ的に作成し、コンテンツが参照されている部分であることを認識することができると考えている可能性がある.

<blockquote cite="https://edu.goorm.io">
  <!-- blockquote 태그안에 cite라는 attribute는 인용한 출처의 url을 나타내줄때 사용 -->
  우리가 겪을 수 있는 가장 아름다운 체험은 신비다. <br />
  신비는 모든 참 예술과 과학의 근원이다.
  <cite>알버트 아인슈타인</cite>
  <!-- cite태그 같은 경우는 출처를 알려주는 태그
  인용의 출처가 text로 되어져 있는 경우 사용. -->
</blockquote>


<blockquote cite="https://bit.ly/2mvSYrT">
  <p>
    The study is the first to project the long-term outlook for Antarctica's largest penguins,
    which can grow 1.2 meters (four ft) tall, seeking to fill a gap in understanding climate change and
    wildlife in one of the remotest parts of the planet.
  </p>

  <p>
    Overall, numbers were set to fall by at least 19 percent from current levels by 2100 as sea ice melts.
    And two-thirds of colonies of the birds, which have distinctive golden head patches, would decline by more than
    half, it said.
  </p>

  </p>
  <q>It's not happy news for the emperor penguin,</q> said Hal Castellan of the U.S. Woods Hole Oceanographic
  Institution,
  a co-author of the study in the journal Nature Climate Change.

  <cite>
    “Emperor Penguin Population to Slide Due to Climate Change”, Scientific American, June 29, 2014,
    https://bit.ly/2mvSYrT
  </cite>
  </p>
</blockquote>

div, span

2つのタグは何の意味もありませんが、CSSモデリングで役立ちます(グループ化)
必要な瞬間でなければ、努力しなくてもいい...

form

ユーザからの情報またはデータの受信に使用
だから文法的に守らなければならない内容があります
formを使用するときに作成する必要があるプロパティ
-action:ユーザからのデータを受信しても何も動作しない場合は、受信したデータを誰にも転送する必要がありますが、これはactionです.
Actionはapiアドレスを提供します.通常、このapiアドレスはバックエンド開発者に尋ねる必要があります.
-メソッド:getとpostがあります
get
情報を読み込みたい場合のみ使用
GETリクエストの大部分はサーバに「いやあ!これを見せてほしい」というリクエストを出すのでサーバやDBは変形しません.ajaxリクエストを実際のサーバに送信する場合、getをクライアントからサーバに送信するのと同じです.
post
ユーザーが入力した値は「保存」に使用されます.
POSTリクエストは主に「新しいデータを格納するとき」リクエストで、リクエスト後にデータベースに新しい変更が追加されます.実際には、Ajaxリクエストをサーバに送信するときにクライアントからサーバに送信するのと同じです.

	<form action="api주소" method="get || post"></form>

form-input

入力ウィンドウは、入力フィールド

を示す.
使用時にtype(属性値)を指定する必要があります
inputラベルattribute値の例

  <form action"" method="GET">
    <input type="text" placeholder="아이디를 입력하세요" maxlength="13" minlength="5" required />
    <input type="text" placeholder="이름을 입력하세요" />
    <input type="text" placeholder="123" disabled />
    <input type="text" placeholder="123" value="김버그" />
    <button>
      Submit
    </button>
  </form>

input typeの例

   <input type="text" placeholder="아이디를 입력하세요" maxlength="13" minlength="5" required />
    <input type="email" placeholder="이메일을 입력하세요" />
    <input type="password" placeholder="비밀번호 입력해주세요" minlength="6" />
    <input type="url" placeholder="포트폴리오 URL을 적으시오" />
    <!-- URL만 기재가 가능 -->
    <input type="number" placeholder="12세 이상 122세 이하" min="12" max="122" />
    //min, max는 입력된 값의 자릿수가 아닌 입력값자체를 이야기함
    <input type="file" accept=".png, .jpg" />
   //accept attribute는 내가 허용하는 파일확장자만 등록이 가능 
   //accept에는 image/*, audio/*, video/* 로 모든 이미지 오디오 비디오를 허용할 수도 있음.

form-label

フォームに名前を付けたタグ
Inputを作成すると、inputがあるだけで空っぽになり、inputの名前と見なすことができます.
Synctax Alert構文の注意事項

ラベルを使用する場合は、forというプロパティを使用する必要があります.forの値については、inputタグのid値を指定します(誰に指定したラベルを記入してください).

例

<label for="user-name"> 이름 </label>
//for attribute로 해당 input을 지정해주면 마우스로 해당 label을 포커스 할 경우 해당 인풋창이 선택되는걸 볼수 있음(라벨이 누구와 연결되었는지 볼 수 있음). 사용안하면 아무 변화 없음.
<input type="text" id="user-name"/>

form- Radio & Checkbox

単一選択
Checkboxでは、各項目を個別に選択できます
RadioとCheckboxの使用
inputにid、name、value値を設定することが重要です.

<form action="" method="GET">
  <input type="radio" id="subscribed" name="subscription" value="0" />
  <!-- name이라는 attribute는 각각의 radio가 서로 연관이 되어져 있는것을 알려주기 위한 attribute -->
  <!-- value같은 경우는 실제 submit할 경우 서버에 내가 어떤것을 선택하였는지 전달할 필요가 있는데 그때 전달하는 값을 설정 -->
  <label for="subscribed">구독중</label>
  <input type="radio" id="unsubscribed" name="subscription" value="1" />
  <label for="unsubscribed">미구독</label>
  <button type="submit">
    <!-- Submit버튼을 누르면 실제로 server에 보낼수 있게 됨. -->
    Submit
  </button>
</form>


<h1>
  사용 가능 언어
</h1>
<form action="" method="GET">
  <input type="checkbox" id="html" name="skills" value="html" />
  <label for="html">HTML</label>
  <input type="checkbox" id="css" name="skills" value="css" />
  <label for="css">CSS</label>
  <input type="checkbox" id="js" name="skills" value="js" />
  <label for="js">JS</label>
  <button type="submit">
    Submit
  </button>
</form>

form - Select & Option

radioやcheckboxとほぼ同じと考えられる.

<form action="" method="GET">
  <label for="skill">스킬</label>
  <select multiple name="skill" id="skill">
    <!-- multiple 속성을 넣으면 여러개를 동시에 선택 할 수 있음 윈도우의 경우 컨트롤을 누르고 하면됨. -->
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JS</option>
  </select>
  <button type=submit>
    Submit
  </button>
</form>

form- Textarea

tpy textを入力すると、1行のテクスチャしか送信できません.
TextAreaの場合は、数行にテキストを挿入してサーバに送信できます.

<label for="filed">자기소개</label>
<textarea id="filed" cols="30" rows="10" placeholder="자기소개를"></textarea>
//cols, rows는 CSS로도 조절이 가능.

form - button

formの最後のラベルbuttonを終了
*Synctax Alert(構文注意)
ボタンの場合はattributeにtpeeを書き込む必要があります.

<button type="button">
  <!-- 아래 두가지를 제외하면 다 type button을 사용 -->
  버튼
</button>

<form action="">
  <input type="text">
  <button type="submit">제출하기</button>
  <!-- 내가 작성한 form을 submit할때 쓰는 type -->
  <button type="reset">다시 쓰기</button>
  <!-- reset을 누르면 내가 작성한 내용을  리셋 한다고 보면됨 -->
</form>

表ラベル

HTMLを使用したデータを含むテーブルの作成
コンポーネント:table、tr(table row)、th(table head)、td(table data)
例と説明

<table>
  //최초 테이블을 만들경우 나 테이블 쓸거야 라고 명시적으로 기재가 필요
  <thead>
    //<!-- 실제 브라우저에게 내가 적는 이 부분이 테이블 헤드라는걸 명시적으로 알려줌 -->
    <tr>
      //<!-- table row를 만들어놓고 그안에 th를  기재하기 때문에  DB로 따지면 컬럼을 만든다고 보면됨-->
      <th>ID</th>
      <th>이름</th>
      <th>개발분야</th>
      <th>기타</th>
    </tr>
  </thead>
  <tbody>
    //<!-- 실제 브라우저에게 여기서부터 body라는것을 명시적으로 알려줌 -->
    <tr>
      //<!-- td같은경우는 th로 컬럼을 설정해 놓은다음 데이터를 채워넣는다고 보면됨 th의 순서대로 들어감 -->
      <td>00001</td>
      <td>김버그</td>
      <td>프론트엔드</td>
      <td></td>
      //<!-- 만약 th에 컬럼이 4개가 존재하고 실제 데이터는 3개만 넣는다고 하더라도, td는 th의 갯수에 맞게 만들어 주어야함. -->
    </tr>
    <tr>
      <td>00002</td>
      <td>김아무개</td>
      <td>풀스택</td>
      <td></td>
    </tr>
  </tbody>

  <tfoot>
    //<!-- 테이블 가장 마지막에 기재해야하는 부분이 있으면 기재 -->
  </tfoot>
</table>

実装

表の深化例

表深化コード

<body>
  <table>
    <thead>
      <tr>
        <th></th>
        <th scope='col'>월</th>
        <!-- scope는 해당 col이나 row가 해당 col이나 row를 대표하는 경우 기재해준다고 보면됨. -->
        <th scope='col'>화</th>
        <th scope='col'>수</th>
        <th scope='col'>목</th>
        <th scope='col'>금</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <!-- th를 쓰는 이유는 해당 row에 대한 헤더이므로 1교시를 th로 써두는것이 더 의미가 있음 -->
        <th scope="row">1교시</th>
        <td rowpan="2"> 왕초보 HTML &amp; CSS</td>
        <td>모각코</td>
        <td rowpan="2">왕초보 HTML &amp; CSS</td>
        <td>모각코</td>
        <td rowpan="2">왕초보 HTML &amp; CSS</td>
      </tr>
      <tr>
        <th scope="row">2교시</th>
        <!-- row가 6개인데 2개만 사용하는 이유는 바로위의 row에서 rowspan을 미리 사용했기 떄문에, 위에서 이미 차지하여 
        이번 tr에서는 사용하지 않아도됨. 안그러면 표가 깨짐 -->
        <td rowspan="2">JS 스킬업</td>
        <td rowspan="2">JS 스킬업</td>
      </tr>
      <tr>
        <th scope="row">3교시</th>
        <td>JS 시작반</td>
        <!-- <td rowspan="2">JS 스킬업</td> -->
        <td>JS 시작반</td>
        <!-- <td rowspan="2">JS 스킬업</td> -->
        <td>JS 시작반</td>
      </tr>
      <tr>
        <!-- rowpan과 반대 된다고 보면됨 해당 tr에서 각각의 col을 몇개 차지할것인지 기재하는 것 -->
        <th colspan="6">점심시간</th>
      </tr>
      <tr>
        <th scope="row">4교시</th>
        <td>SASS 기초반</td>
        <td rowspan="2">HTML &amp; CSS 포폴반</td>
        <td rowspan="2">Open Seminar</td>
        <td rowspan="2">HTML &amp; CSS 포폴반</td>
        <td>SASS 기초반</td>
      </tr>
      <tr>
        <th scope="row">5교시</th>
        <td>모각코</td>
        <!-- <td rowspan="2">HTML &amp; CSS 포폴반</td> -->
        <!-- <td rowspan="2">Open Seminar</td> -->
        <!-- <td rowspan="2">HTML &amp; CSS 포폴반</td> -->
        <td>모각코</td>
      </tr>

    </tbody>
  </table>
</body>

メディアファイルメディア

- audio

<audio src="./assets/audios/kimbug.mp3" controls></audio>
<!-- src라는 attribute에서 내가 첨부하고자 하는 오디오 경로를 해주고, 따로 사용자가 소리 조절이나
   재생버튼을 컨트롤하게끔 허용하게 하려면 controls라는 attribute를 쓰면됨 -->
<audio src="./assets/audios/kimbug.mp3" loop autoplay></audio>
<!-- autoplay는 내가 해당 홈페이지 들어가자마 이 소리가 자동재생이 되게끔 하는것. 
하지만 크롬에서 안되는 이유는 음악이나 비디오가 자동재생 되는걸 기본적으로 막았다고 함.-->

<audio controls>
  <!-- 아래와같이 source태그를 3번사용하여도 실제 브라우저에는 하나만 렌더링이 되는데
  이렇게 사용하는 이유는 해당 브라우저가 해당 특정 파일형식을 지원하지 않는 경우가 있는데 이러한 경우 오디오를 들을 수 없기
때문에 여러개의 파일 포멧을 미리 올려놓고 하나라도 얻어 걸리면 그것이 재생되게끔 하는것. 
조금더 유저 친화적이라고 볼 수 있음. -->
  <source src="./assets/audios/kimbug.mp3" type="audio/mpeg" />
  <source src="./assets/audios/kimbug.ogg" type="audio/ogg" />
  <source src="./assets/audios/kimbug.wav" type="audio.wav" />

  <!-- 셋다 안보이는 경우 아래 태그가 보이게됨 -->
  <p>
    당신의 브라우저를 버리시고 크롬을 사용하시는게 어떨까요?
  </p>
</audio>


<!-- <audio src="./assets/audios/kimbug.mp3"></audio>
이렇게 할 경우에는 아무것도 나오지 않음. controls를 적어줘야 보임. -->

- video

オーディオとほぼ同じです.

<video src="./assets/videos/kimbug.mov" controls></video>

<video controls>
  <source src="./assets/videos/kimbug.mov" type="video/mp4" />
  <source src="./assets/videos/kimbug.mp4" type="video/mp4">
</video>

- iframe

私が使用しているHTMLから別のHTMLをインポートしたり、コンテンツを挿入したりするために使用します.
カニのビデオをアップロードするために使用されます(embed)
自分で入力することはほとんどありません.

<!-- iframe같은 경우 새로운 html문서나 동영상을 가지고 올때 이 테그를 사용
영어로는 embed라고하며, 한국어로는 퍼가기 이다.
실제로 유튜브에서 공유=> 퍼가기를 할경우 iframe 코드가 나오는데 이것을 긁어서 붙이면 
내 html에서 해당 youte영상을 쓸 수 있다.-->
<iframe src="https://edu.goorm.io" frameborder="0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/R78xgHIbhR0" title="YouTube video player"
  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

その他のラベル

abbreviation

略称

、略称

テキストで略語または略語を使用する場合、ユーザーはその略語または略語を知らない.
ユーザーに友好的に説明させる.
タグ内の内容にマウスを置くとabbrのtitle attributeの内容が表示されます

<p>
  너.. 혹시 <abbr title="주의력 결핍 과잉행동장애">ADHD</abbr>니?
</p>

address

-連絡先情報のタグ付け
(物理)アドレス、URL、メール、電話番号、SNSリンクなどを使用した場合に該当するタグを記入

<address>
  <h1>
    김버그
  </h1>
  <a href="https://www.naver.com">
    https://www.naver.com
  </a>
</address>

preformatted text, code

preformatted

私が入力したテキスト(セパレータとエンティティを含む)に従ってブラウザにこの文

を表示します.

code

を使用してhtmlに実際のコードを書き込む

<pre>
   김버그
   사랑해요

   ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ  ㅅ ㅔ ㅇ
     ㄴ   ㅇ             ㅛ
  <code>
    console.log('hellodw')
     const abc 
  </code>
</pre>

preタグを使用すると、ブラウザに次の内容が表示されます.

未使用の場合は以下のようになります

attribute aria-label

ブラウザをスクリーンリーダーとして使用するユーザーにとって、読みにくいコンテンツがあります.
彼らを助けるためにattributeはaria-labelです.(グローバル属性であり、任意のタグで使用可能であることを示します)

<a href="#" aria-label="go to page 1">1</a>
//그냥 1만 적혀있으면 뭔소린지 모를 수 있으니 aria-label로 명확하게 설명해주는것도 프론트 개발자가 가져야할 자세

もう一つのプロパティはaria-hiddenです.
aria-hiddenを使用すると、スクリーンリーダーはこの部分を省略します.(重要ではないと言える)
この文章はキムバーグの-html-cssを参考にして書いた-面白い講義です.