DAY2)

27557 ワード
テキストリンク
今日も頑張りましょう!やれやれ!👉💜_💜👉

☀️ HTML


きほんけいじょう
オープンタグ構造とクローズタグ構造のペア
<h1>토끼와 거북이</h1>
<p>옛날 옛적에 토끼와 거북이가 살았습니다 ...</p>

」属性と値


属性拡張タグ(要素)を使用する機能
<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="name">홍길동</div>
<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />
<의미없는분할 태그별명="name">홍길동</의미없는분할>
イメージラベルには閉じたラベルはありません.空のラベル(Empty Tag)

親と子の要素


親要素に子要素が存在する

<PARENT>
  <CHILD></CHILD>
</PARENT>
<section class="fruits">
  <h1>과일 목록</h1>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li>바나나</li>
    <li>오렌지</li>
  </ul>
</section>

」空のラベル


コンセプトを閉じるタグがありません
/をタグとし、タグなしで区切る
<!-- `/`가 없는 빈 태그 -->
<TAG>

<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />

ex) <img />

65282;HTMLドキュメントの範囲

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="홍길동">
    <meta name="description" content="우리 사이트가 최고!">
    <title>내 사이트</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/main.js"></script>
</head>
<body>
    <section>
      <h1></h1>
      <div>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>
    </section>
</body>
</html>

」HTML(全範囲)

<html>는 HTML 문서의 전체 범위를 지정

▼HEAD（情報範囲）


Webブラウザで解析するHTMLドキュメントの情報範囲を指定します
->Webページのタイトル、Webページの文字コード、リンクする外部ファイルの場所、およびWebページを構造化するためのデフォルト設定

」BODY（構造範囲）


Webブラウザで解析するHTMLドキュメントの構造範囲を指定します
->構造とは、ユーザーが画面で見ることができるコンテンツ(コンテンツ)の形式またはレイアウトを指し、ロゴ、タイトル、ツイッター、ナビゲーション、メニュー、ボタン、入力ウィンドウ、ポップアップ、広告などのすべての表示コンテンツを含む.

☀DOCTYPE（DTD、バージョン化）


現在の標準モードはHTML 5

」「TITLE（ページタイトル）

-> <head></head> 안에서 사용하는 태그들은 HTML 문서의 정보를 가지고 있음 
-> 웹 브라우저의 각 사이트 탭에서 이름으로 표시

<head>
  <title>네이버</title>
</head>

」META(Webページの情報)


HTMLドキュメント(Webページ)に関する情報(表示方法、作成者(所有者)、コンテンツ、キーワードなど)を検索エンジンまたはブラウザで提供します.
<head>
  <meta charset="UTF-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="우리 사이트가 최고!">
</head>

<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
  <정보 문자인코딩방식="UTF-8">
  <정보 정보종류="사이트제작자" 정보값="홍길동">
  <정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>
''

」CSS入力（LINK）


外部ドキュメントの接続に使用します.空のラベル
ex) CSS, icon, html
<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>

<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
  <외부문서연결 관계="CSS" 문서경로="./css/main.css">
  <외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>
rel-(必須)現在のドキュメントと外部ドキュメントの関係(スタイルシート、アイコンなど)を指定します.
href-外部ドキュメントの場所を指定します

"STYLE(CSS作成)


外部文書でCSSを作成および接続するのではなく、HTML文書でCSSを作成するために使用します.
<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

」HTMLドキュメントの構造

<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조를

」DIV(落書きラベル)

- <div></div>의 ‘div’는 ‘division’으로 약자로 ‘분할’을 뜻하고 ‘문서의 부분이나 섹션을 정의’

- 특정 범위를 묶는(wrap) 용도로 사용

」IMG（画像タグ）

- <img>는 HTML에 이미지를 삽입할 때 사용
- HTML에서 삽입(IMG)’/ ‘CSS에서 삽입(background)’

<body>
  <img src="./kitty.png" alt="냥이">
</body>

<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
  <이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>
src-(必須)画像のURL
alt-必要な画像の置換テキスト(代替)を指定します.
0404 TIL空中と空中Mainクリアランス
CountDownLatch使用