1.2 [HTML] 태그

 

0) HTML 태그 레퍼런스

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference - HTML: HyperText Markup Language | MDN

 

---

1) 제목과 단락 요소 

 

• 제목(Heading)

  <h1> ~ <h6>   
문서 내에 제목을 표현한다.  

 * 태그 이름 :  h1~h6  -  숫자가 올라갈수록 더 낮은 수준의 소제목을 나타낸다. (글자 크기 작아짐)

 

• 단락 요소 - 단락(Paragraph) / 개행(Linebreak)

<p>
글의 단락을 나타낸다.

<br>
글의 줄바꿈을 생성한다. 

 

---

2)  텍스트를 꾸며주는 요소 

 

<b>
글자를 굵게 표현한다. (bold)

<i>
글자를 이탤릭체로 표현한다. 

<u>
글자에 밑줄(언더라인)을 표현한다.

<s>
글자에 중간선을 표현한다.

 

---

3) 앵커 요소

 

• 앵커(Anchor) : 링크를 생성하는 태그

<a>
다른 문서로 이동할 수 있는 링크를 생성한다.

 

- href(하이퍼 레퍼런스) 속성을 반드시 함께 작성해야 한다. -  링크의 목적지가 되는 URL을 지정 (속성값=링크)

     <내부 링크로 이동하기> - 속성값에 해시 기호를 쓰고 그 뒤에 이동하고자 하는 요소의 id 값을 작성한다. 

          <a href="#id값">페이지 상단으로 이동하기</a>

 

- target 속성 : 링크된 리소스를 어디에 표시할 것인가

     _self : 기본 설정 값. 현재의 프레임에 표시한다.

    _blank : 새로운 창에 표시한다.

  

<h1 id="top">브라우저 화면의 상단</h1>
<a href="https://gmlwo810.tistory.com/m">별안간_공대생;</a>   <!--하이퍼링크의 형태는 앵커태그의 내용으로 작성한 것으로 나타난다.-->
<a href="#top">상단으로 이동하기</a>

 

---

4) 의미가 없는 컨테이너 요소 

 

• 요소를 묶기 위한 태그(Container) : 태그 자체에는 아무런 의미가 없고, 무언가를 담거나 어떤 요소들을 묶기 위한 목적으로 사용되는 태그.

 

• Division  

<div>
block-level 태그

• Span

<span>
inline_level 태그

 

---

5) 리스트 요소 

 

• Unordered list 

<ul>
순서가 없는 리스트

* 자식 요소로 <li> 태그만 올 수 있다. (<li> 태그 내부에는 다른 자식 요소들도 올 수 있다. --> 중첩 가능)

<h1>햄버거에는 어떤 재료들이 필요할까요?</h1>
<ul>
  <li>참깨 빵</li>
  <li>쇠고기 패티</li>
  <li>양상추</li>
  <li>치즈</li>
  <li>피클</li>
  <li>양파</li>
  <li>소스</li>
</ul>​

 

• Ordered list 

<ol>
순서가 있는 리스트 
* 각 리스트 항목 앞에 숫자가 표시된다. 

* 자식 요소로 <li> 태그만 올 수 있다. 

 

<h1>햄버거를 만들어보자!</h1>
<ol> 
  <li>참깨 빵 위에</li>
  <li>순쇠고기 패티 두 장</li>
  <li>특별한 소스</li>
  <li>양상추</li> 
  <li>치즈,피클,양파까지</li>
</ol>

 

• Description List / Definition List

<dl>
용어를 설명하는 리스트

<dt>
definition term. 용어를 구분

<dd>
definition description. 용어를 정의
* 용어 하나에 여러 개의 정의 가능

 

 

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dd>웹 문서를 만들기 위하여 사용하는 프로그래밍 언어</dd>
  <dt>CSS</dt>
  <dd>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트</dd>
</dl>

 

---

6) 이미지 요소 

 

• 이미지(Image)

<img>
문서에 이미지를 삽입
* 닫는 태그가 없는 빈 태그

 - scr 속성 : 이미지 경로를 지정   * 필수 속성

                                 ↳ 절대 경로 vs 상대경로 

- alt 속성 : 이미지 태체 텍스트(이미지를 설명하는 글)를 입력    *문법적으로 필수는 아니지만, 작성 권고

- width / height 속성  : 이미지의 크기를 지정   * 둘 중 하나의 속성에만 값을 주면, 원본 이미지의 비율을 유지하면서 자동적으로 나머지 속성값도 함께 변경된다. 

 

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMjZfMTg2%2FMDAxNjExNjU1NjU2NTA2.iQjOL4InJigDZ0r4rh1YsLlbijDMtAF1xkulw_pC968g.dcnxsubKZmasnLz2jxzaMynaWMrKKayEzrgH5jcH4lcg.JPEG.whgusdk10047%2F35438C12-8991-447C-97D5-C555218FF57D.jpeg&type=sc960_832" alt="이기영" width="400" >

 

++  <이미지 확장자 비교> ++

• gif - 색이 제한적, 용락 작음, 애니메이션과 투명 이미지 가능
• jpg - 높은 압축률, 자연스러운 색상 표현, 사진이나 일반적인 그림
• png - jpg에 비해 이미지 손실이 없음, 투명 반투명 모두 지원

 

---

7) 테이블 요소

 

• 표(Table) : 데이터 표를 나타내는 태그

<td> : 하나의 데이터 셀(table-cell)  
<th> :  제목 행의 데이터 셀
<tr> : 하나의 행(table-row)
<table> : 표

- colspan 속성 : 셀을 가로방향으로 병합  

  ↳ 속성값 - 병합할 셀의 개수  

 

- rowspan 속성 : 셀을 세로방향으로 병합

  ↳ 속성값 - 병합할 셀의 개수 

<!--2행 2열 테이블-->

<table> 
  <tr>
    <td></td><td></td>
  </tr> 
  <tr>
    <td></td><td></td>
  </tr> 
</table>

 

<caption> : 표의 제목 - 테이블 태그의 자식 태그 중 가장 위에 선언 되어야 함.
<thead> : 제목 행을 그룹화
<tfoot> : 바닥 행을 그룹화
<tbody> : 본문 행을 그룹화

<table> 
  <caption> 제목 </caption>
  
  <thead> 
    <tr>
      <th> 제목행1 </th>      <!--제목행은 td 태그가 아닌 th 태그를 사용-->
      <th> 제목행2 </th>
    </tr>
  </thead>
    
  <tfoot> 
    <tr>
      <td> 바닥행1 </td>
      <td> 바닥행2 </td>
    </tr>
  </tfoot>
  
  <tbody> 
    <tr>
      <td> 본문행1 </td>
      <td> 본문행2 </td>
    </tr>
  </tbody> 
  
</table>

+  더 알아보기 : <colgroup>, <col>, scope, headers

---

8) 폼 요소 

<input> 태그 (빈 태그)

 ㄴ 속성 : type =”text”, “password”

                          “radio”, “checkbox”   -->   name 속성으로 그룹화, checked 속성(디폴트 값 지정)

                           “file”, “submit”, “reset”, “button”  -->  value 속성으로 표기 지정

                           “image”

 

<select> tag

<option> tag

 

<textarea>

ㄴ 속성 : col, row=영문 기준 글자 수

 

<button>

ㄴ 속성 : type = “submit”, “reset”, “button”

 

<lable>  * 연결 시킬 폼 요소와 콜론(:)으로 연결

ㄴ 속성 : for – 연결시키고자 하는 폼 요소의 id 속성값과 동일

 

<fieldset>

<legend>

 

<form>

ㄴ 속성 : action=서버 주소, method=”get”, “post” (데이터 전송 방식)