[カカオ豆クローン]2.4~2.11ノート

35881 ワード
kokoa clon html css テキストリンク

html


📌tag attributes


hrefはaでのみ利用可能な場所では利用できません
<h1 herf="http://google.com">go tho the google</h1>
これは不可能です.
<a href="http://google.com" target="_blank"> go to the google </a>
「target blank」リンクをクリックすると、現在のページはgoogleページにジャンプしません.
新しいウィンドウにgoogleページが表示されました
<img>
他のタグとは異なり、タグが付けられていません.
<img></img>
そうではありません.理由はlf-clostingstage(自身がラベルを閉じる)
<img src="이미지 주소 여기다 복붙" />
そうすると、画像に画像ファイル名を書くか、「」に画像ファイル名を書きます.

📌lts all about the head

<head>
	<title> home- my first website. </title>
</head>
👉結果
  • 戦
  • 以降

    • 📌mor tags

    <!DOCTYPE html>
<html lang="kr">
  <head>
    <title>home - my first website.</title>
    <meta charset="utf-8" />

<!--og title과 og image는 링크를 카카오톡에 공유할때 보여지는거-->

    <meta name="description" content="this is my website" />
    <meta property="og:title" content="Nomad Coders" />
    <meta property="og:image" content="https://asdlkbjdkl" />

<!--위에 로고 보이게하는거 -->
    <link
      rel="shortcut icon"
      sizes="16x16 32x32 64x64"
      href="http://nomadcoders.co/m.png"
    />
  </head>
    👉結果
  • 結果
  • の定理
    metaは付加情報の意味
    <meta charset="stf-8">
    :ブラウザにテキストの描画方法を教え、書かないと文字が砕けて見える可能性があります.
    タイトル図 グーグル 検索 重要 ひじゅう もつ 既存
    グーグル 検索時 探す タブ content
    KakaoTalkですね. まず 名前 タグ付け 探す まだあります. 説明 見つかりました
    サイトの アタッチメント 情報. head タグ付け に記入
    フェイスブックにあります. ツイッター 関連付け 情報もあります. ここ 挿入 数 あります.
    • ★w 3 schoolsサイトは絶対使わないでほしい★
    常にmdnサイト=>mdn html要素リファレンスを使用
    <!--글자효과-->
<p>wow good</p>
    <pre>wow good</pre>
    <p>my name is<abbr title="yejin">강동원</abbr></p>
    <cite>hello!</cite>
    <p>i like to live in <mark>south korea</mark></p>
    <p>i like to live in <strong>south korea</strong></p>
    <p>i like to live in <sub>south korea</sub></p>
    <p>i like to live in <sup>south korea</sup></p>

<!--audio삽입-->
    
    <audio 
    controls="enabled"
    autoplay="enabled"
    src="오디오주소"></audio>
    👉結果
  • 結果
    +マウスが姜東元にぶつかったとき、「yejin」という言葉はめったに出なかった.
  • の定理
    enabledを書く必要はなくenabledやtrueを使うこともできます
    Autoplay→曲を自動的に再生し、playボタンをクリックする必要はありません.

    • 📌form tags

    <form>
      <input type="file" accept=".pdf,image/*" />
      <input type="color" />
      <br />
      <input required placeholder="name" type="text" />
      <input required placeholder="last name" type="text" />
      <input required placeholder="username" disabled type="text" />
      <input required placeholder="password" minlength="5" type="password" />
      <input type="submit" value="click!" />
    </form>
    👉結果

    ユーザー名がブロックされ、作成できません->コードに無効を挿入したため<form></form>と書きますが、提出ボタンを押すと、この入力ボックスに記入するように注意する警句があります!
    苦くなければ蒸さない
    <form>
      <!--profile photo라는 문구를 클릭하면 파일 업로드 창이 뜸-->
      <label for="profile">profile photo</label>
      <input id="profile" type="file" accept=".pdf,image/*" />
      <br />
      <!--first name누르면 바로 name창에 입력할수 있도록 됨-->
      <label for="first">first name</label>
      <input id="first" required placeholder="name" type="text" />
      <br />

      <!--여기에 hello입력하면 url을 입력하라고 뜨는데
      이게 바로 원치않은 값을 안 받도록 도와주는거야
      input의 type은 ulr뿐만아니라 text, email, date, range등 여러가지있어!
      input유형은 mdn웹사이트에서 찾아볼수있어 -->
      <label for="website">website</label>
      <input id="website" required placeholder="name" type="url" />

      <input type="submit" value="click!" />
    </form>
    👉結果

    📌Semantic HTML

    <form>
      <!--div여부차이-->
      <div>
        <label for="profile">profile photo</label>
        <input id="profile" type="file" accept=".pdf,image/*" />
      </div>

      <div>
        <label for="first">first name</label>
        <input id="first" required placeholder="name" type="text" />
      </div>

      <label for="website">website</label>
      <input id="website" required placeholder="name" type="url" />

      <input type="submit" value="click!" />
    </form>
    👉結果
  • div(垂直位置合わせ)
  • divが存在しない場合(水平位置合わせ)
    • <body>
    <header>
      <h1>the nico times</h1>
    </header>

    <main>
      <p>hello!</p>
    </main>

    <!--꼬릿말을 위한 tag-->
    <footer>&copy; 2020 Y.J</footer>

    <!--짧은 text는 p태그가 아닌 span태그가 적합 -->

    <span>치킨 또 먹고싶다</span>

    <!-- 위 태그들을 전부 div로 바꿔도됨 바꿔서 id값 줄수도있구..
    하지만 이런식으로 쓰면 코드 자체를 이해하는데 번거로움이 생김
    이런 header footer...등등 이런 코드 모음은 mdn사이트 content sectioning에 볼수있어
    예전에는 div를 많이썼구 떡칠했었는데 지금은 저런 태그들이 생김! -->
  </body>
    👉結果

    我々は意味のないタグを使用しています:div
    意味的には、ドキュメントに値のないbox
    headは見えないマークです
    ヘッダーラベルはbodyに含まれています
    どういう意味かわかるラベル:header、mainなどのコード!
    ★コードを暗記しようとしない!★
    tag达はすべて背负って意义を探します...そうしないでください.これは時間の無駄です.
    知らないことがあれば、MDNなどのドキュメントを閲覧できます!

    📌cssをhtmlにリンクする

    <!--html에 css 분리된 파일 연결시키는거 -->
<head>
	<link href="styles.css" rel="stylesheet" />
</head>
    必ず頭の中に覚えておいてください.
    21年6月9日
    [BOJ]1002:タレット