HTML

많이 안 써본거만 작성함. vscode snippet임

Semantic Tags: SEO superiority (not guaranteed😋)

• aside: 메인 컨텐츠와 관련있는 부가적인 컨텐츠, 링크, 광고 등에 사용
  <h1>Main</h1>

     

      <aside>

          <h3>babo</h3>

          <ul>

              <li><a href="#">link 1</a></li>

              <li><a href="#">link 1</a></li>

          </ul>

      </aside>
• section: 테마 등 다른 분류의 내용을 기재 (관례적으로 안의 내용이 일률적이어야 함)
  <section>

          <h2>News flash dummy!</h2>

          <p>It's your funeral!</p>

      </section>
• nav: 메뉴 구성시 사용 (인라인으로 만들고 플렉스 해서 가로메뉴로 쓰던지 햄버거로 쓰던지?
  <nav>

          <ul>

              <li><a href="#">Home</a></li>

              <li><a href="#">Not Home</a></li>

              <li><a href="#">Home is not a home</a></li>

          </ul>

      </nav>
• article: 메인 주제와는 독립적인 성격의 페이지, 포스팅 기재
  <article>

          <h2>Did you know?</h2>

          <p>You can't see me!</p>

      </article>
• header: 설명이 필요 읍다
  <header>

          <h2>HEATHER</h2>

          <p>Dad jokes are not something to write home about</p>

      </header>
• footer: 발
  <footer>

          <p>&copy; 2024 Dyrmwyrm's Blog. I have no right.</p>

      </footer>
• main: 머리랑 발 사이에 끼워 🙄

---

Multi-media Tags

• img: 설명필요읍지
  <img

          src="some.link.jpg"

          alt="The Internet hates you"

          width="150"

          height="150">
• video: 오디오처럼 fallback과 함께 alt 텍스트 지원
  <video width="320" height="220" controls poster="google.image.link.jpg">

          <source src="https://www.youtube.com/watch?v=-WsouJ4YzO4&pp=ygUObnVrZSBleHBsb3Npb24%3D" type="video/webm">

          <source src="https://www.youtube.com/watch?v=-WsouJ4YzO4&pp=ygUObnVrZSBleHBsb3Npb24%3D" type="video/mp4">

          Do not use Internet Exploder

      </video>

      <!-- Other attribs: autoplay, loop, muted -->
• audio: 호환성을 생각해서 fallback 소스 태그를 더 쓸 수 잇다
  <audio controls>

          <source src="babo1.mp3", type="audio/mpeg">

          <source src="babo2.ogg", type="audio/ogg">

          This browser is too old for this crap

      </audio>
• figure: 멀티미디어 태그를 그루핑 할때 사용 (img는 인라인인데 figure가 블락인듯... 스샷 참조)
  <figure>

      <img

          src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ff4.bcbits.com%2Fimg%2F0008736837_10.jpg&f=1&nofb=1&ipt=5a78084263e913df21d86d812d77a4a7f297732b671df3fe7658ea34aa048e67&ipo=images"

          alt="The Internet hates you"

          width="150"

          height="150">

          <figcaption>A beautiful low res pic</figcaption>

      </figure>

figcaption 넣은 상태

멀티미디어 태그 Best practice
- 호환성 고려
- alt 텍스트 사용
- 멀티미디어 파일 최적
- 반응형 디자인

---

List Tags

• dl, dt, dd: definition list라는 첨보는 리스트. 말 그대로 정의 내릴 때 사용한다는데 구듸?
  <dl>

          <dt>How to eat</dt>

          <dd>Grab a fork, stab at food, bring it to your mouth</dd>

         

          <dt>How to grab a fork</dt>

          <dd>Just do it</dd>

      </dl>

---

iframe Tag

iframe 자주 안쓰는거 같지만 참고 ...

<iframe name="if1" src="example.com">
	브라우저가 태그를 지원하지 않으면 보이는 텍스트
</iframe>
<a href="dees.kr" target="if1">링크</a>
<!--if1이름의 iframe 안에서 페이지 로드 함 --!>

---

submission 관련

• input: checkbox, radio, file, button, hidden, text 등등등등등등
• select: option 내부 태그에 value 없으면 text content를 submit 함
• textarea
• 공통 attrib: readonly, required, placeholder, disabled 등
• label 의 for 는 id attrib을 가리킴 (label 안에 타겟 태그를 넣어도 됨)
• form 안의 button은 자동으로 submit이 된다
  <form method="post" action="xx.html">

          <label for="argh">input text</label>

          <input id="argh" name="argh" type="text" placeholder="emptiness!" value="">

          <select name="sel">

              <option>CHOOSE WISELY</option>

              <option value="op1">This</option>

              <option value="op2">That</option>

          </select>

          <textarea name="textytext" cols="30" rows="2"></textarea>

          <button>submit</button>

  </form>