Tag 심화

📖

HTML TAG 심화

Created	@Aug 6, 2020 7:24 PM
Lesson Date	@Aug 12, 2020
Status	Complete
Type	LessonQuiz

Reference Website

The average web page

The study data comes from 7.1 million index pages gathered from top twenty Google results, for about 30 million keywords.

https://www.advancedwebranking.com/html/#overview

Head Tag

• Heading Tag
  • 문서 내에 제목 표현

• Paragraph Tag
  • 단락 태그

• Linebreak Tag
  • <br> : 단락 구분

Text Expression Tag

• <b> : bold 태그는 글자를 굵게 표현하는 태그

• <i> : italic 태그는 글자를 기울여서 표현하는 태그

• <u> : underline 태그는 글자의 밑줄을 표현하는 태그

• <s> : strike 태그는 글자의 중간선을 표현하는 태그

Anchor

• 링크 Tag : 다른 문서로 이동할 수 있는 링크를 생성한다.

• href : hyper reference - 링크의 목적지가 되는 URL을 지정

<a href="http://www.naver.com/" target="_blank">네이버</a>

• target

  • _blank : 새로운 탭으로

  • _self : 현재 화면에 표시, defualt 값

• 내부 링크 : '#이동 요소의 id 속성값'을 통해 해당 위치로 이동

<h1 id="top">네이버네이버</h1>
<a href="#top">HTML</a>

Container

의미없이 요소를 묶기 위한 태그

• <div> : block-level, 한 줄을 생성해서 내용 표현 → <p>

• <span> : inline-level, 블록 요소의 한 줄 안에서 표현되는 요소 → <b><u>

<div>
    <span>Lorem</span> ipsum dolor sit
</div>

List

• ex) 실시간 검색어

• UL
  • <ul> : unodered list → 순서가 없는 리스트

  <ul>
    <li>콩나물</li>
    <li>파</li>
    <li>soup soy bean</li>
  </ul>

• DL
  • <dl> : definition / description list → 용어와 그에 대한 정의를 표현

    <dl>
        <dt>리플리 증후군</dt>
        <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
        <dt>피그말리온 효과</dt>
        <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
        <dt>언더독 효과</dt>
        <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
    </dl>

  • <dt> : 용어를 나타내는 Tag
  • <dd> : 용어에 대한 정의 또는 설명 Tag

Image

• <img> : 문서에 이미지를 삽입하는 Tag, 닫는 Tag없는 빈 태그

  <img src="./images/pizza.png" alt="pizza">

  • src : source, 이미지의 경로
  • alt : 이미지의 대체 텍스트 → 웹 접근성 측면에서 중요한 속성

Table

• 표

  1. <td>, <th>

  2. <tr>

  3. <table>

• 테이블 구조 관련 태그

  1. <caption> : 표의 제목, 테이블 tag 가장 위에

  2. <tread> : 제목 행을 그룹

  3. <tfoot> : 바닥 행을 그룹

  4. <tbody> : 본문 행을 그룹

  5. <colgroup>

  6. <col>

  7. scope

  8. headers

• 테이블 관련 속성

  1. colspan : 가로 방향으로 병합

  2. rowspan : 세로 방향으로 병합

  <table>
      <caption> Monthly Savings</caption>
      <thead>
          <tr>
              <th>Month</th>
              <th>Savings</th>
          </tr>
      </thead>
      <tfoot>
          <tr>
              <td colspan="2">Sum</td>
          </tr>
      </tfoot>
      <tbody>
          <tr>
              <td>January</td>
              <td rowspan="2">$100</td>
          </tr>
          <tr>
              <td>Feburary</td>
          </tr>
      </tbody>
  </table>

Form

사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 Form 요소라고 합니다.

• Type

  1. text : ID 등 단순한 Text 입력에 사용, placeholder 속성

  2. textarea : 여러줄 입력, rows, cols 옵션

  3. password : 암호와 같이 공개할 수 없는 내용을 입력할때

  4. radio : 중복이 불가한 항목

  5. checkbox : 중복선택이 가능 → name : radio, checkbox를 그룹화, checked 속성

  6. file : 파일을 서버에 올릴 때 사용

  7. submit | reset : form의 값 전송, 초기화

  8. image : sumit버튼에 이미지삽입, src, alt 속성 필수

  9. button : <button type="submit;reset"> 좀 더 자유도 높음

  10. select : 선택 목록을 리스트 형태로 노출하고 그 중 하나 선택, multiple 속성으로 다중 선택 가능

  11. label : form 요소의 이름과 form 요소를 명시적으로 연결
      • form id 속성값 == <label for="@@">
      • 접근성 측면에서 중요 → 필수

  12. fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
      • legend : 폼 요소의 제목으로 <fieldset> 내부에 작성

<form>

• form 요소들을 감싸는 태그로 데이터로 묶어서 실제 서버로 전송
  1. action : 데이터를 처리하기 위한 서버의 주소
  2. method : 데이터를 처리하기 위한 방식

<form action="./samsung" method="GET | POST">