HTML 태그(요약/정리)

 

HTML 태그

• http://html5doctor.com/element-index/
• https://www.w3schools.com/tags/default.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element

 

제목(HEADING)

• 문서내에 제목을 표현할 때 사용한다.

단락과 개행(PARAGRAPH, LINEBREAK)

• <p>:태그는 글의 단락을 나타낸다.
• <br>:태그는 글의 줄바꿈을 생성한다.

텍스트 관련 태그들(B, I, U, S)

• <b>:글자를 굵게
• <i>:글자를 이탤리체
• <u>:글자에 밑줄
• <s>:글자에 중간선

앵커(ANCHOR)

• <a></a>
• 다른 문서로 이동할 수 있는 링크를 생성한다.
• href:링크의 목적지가 되는 URL을 지정한다.
• target

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

• <div>:block-level  //<p>
• <span>:inline-level  // <b>, <i>, <u>, <s>

리스트

• <ul>:unordered list로 순서가 없는 리스트
• <ol>:ordered list로 순서가 있는 리스트
• <dl>:description list로 용어를 설명하는 리스트

이미지(IMAGE)

• <img src="./images/pizza.ipg" alt="피자>
• 문서에 이미지를 삽입한다.
• src:이미지 경로를 지정한다.
• alt:이미지의 대체 텍스트를 입력한다.
• width/height:이미지의 크기를 지정한다.
• gif: 256색으로 제한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능
• Jpg: 높은 압축률과 자연스러운 색상 표현이 가능하여 사진이나 일반적인 그림에 사용
• png: jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.

표(TABLE)

• 데이터 표를 나타내는 태그
• <td>, <th>:데이터 셀(table-cell)
• <tr>: 행(table-row)
• <table>: 표
• <caption>: 표의 제목
• <thead>: 제목 행을 그룹
• <tfoot>: 바닥 행을 그룹
• <tbody>: 본문 행을 그룹
• colspan : 셀을 가로방향으로 병합
• rowspan: 셀을 세로방향으로 병합
• <colgroup>: 표의 열을 묶는 그룹을 정의
• <col>: 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여 할 때 사용
• scope 속성: 해당 헤더 셀이 관련되는 셀의 종류를 명시
• header 속성: 해당 데이터 셀과 연관된 하나 이상의 제목셀을 명시

폼 관련 요소(FORM)

• 서버에 데이터를 전달하기 위한 요소들
• <form action="" method=""></form>
• action: 폼 데이터를 처리하기 위한 서버의 주소
• method: 데이터를 전송하는 방식을 지정(get, post) 

1. INPUT 요소
   • 대표적인 폼 요소로, 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.
   • <input type="">  // text, password, radio, checkbox, file, image, submit, reset, button...
     • checked, selected
2. SELCET 요소
   • <option>: 항목
3. TEXTAREA 요소
   • cols, rows
4. BUTTON 요소
   • <button type=""></button>  // submit, reset, button
5. LABEL 요소
   • 폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 된다.(필수적)
   • <label for="">와 <태그 id=""> 값은 서로 그룹을 형성
     • <label>태그는 for 속성을 사용해서 <input>태그의 id 속성에 연계해서 사용
     • label의 for값과 input의 id값을 일치시키면 된다.
6. FIELDSET, LEGEND 요소
   • <fieldset><legend></legend><fieldset>
   • <fieldset>: 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
   • <legend>: 폼 요소의 제목으로 <fieldset> 요소 내부에 작성

 

---

이 글은 부스트코스 강의를 정리한 글 입니다.