[HTML&CSS 기초] HTML 태그

 

1. 제목과 단락요소

• 제목 heading

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

숫자가 올라갈수록 더 낮은 수준의 소제목을 나타낸다

• 단락 요소 - 단락 / 개행

<p> 글의 단락을 나타냄

<br> 글의 줄바꿈을 생성

​

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

​

<b> 글자를 굵게 표현

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

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

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

​

3. 앵커 요소

• 앵커 링크를 생성하는 태그

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

*href( 하이퍼 레퍼런스 ) 속성을 반드시 함께 작성해야 한다.

링크의 목적지가 되는 URL을 지정한다. (속성값 = 링크)

​

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

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

​

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

_self 속성 : 기본 설정 값으로 현재 프레임에 표시한다

_blank 속성 : 새로운 창에 표시한다

​

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

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

<div> block-level 태그

<span> inline-level 태그

​

5. 리스트 요소

• Unordered list

<ul> 순서가 없는 리스트

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

<h1>햄버거에는 어떤 재료들이 필요할까요?</h1>

<ul>

<li>참깨 빵</li>

<li>쇠고기 패티</li>

<li>양상추</li>

</ul>

​

• Ordered list

<ol> 순서가 있는 리스트

*각 리스트 항목 앞에 숫자가 표시된다.

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

​

• Description list / Definition list

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

<dt> definition term, 용어를 구분

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

​

6. 이미지 요소

• 이미지

<img> 문서에 이미지를 삽입

* 닫는 태그가 없는 빈 태그

-scr 속성 : 이미지 경로를 지정 *필수 속성 *절대경로vs상대경로

-alt 속성 : 이미지 대체 텍스트(이미지를 설명하는 글)를 입력 *필수는 아니지만 작성 권고

-width/height 속성 : 이미지의 크기를 지정

*둘 중 하나의 속성에만 값을 주면, 원본 이미지의 비율을 유지하면서 자동적으로 나머지 속성값도 함께 변경됨

​

+이미지 확장자 비교

-gif 색이 제한적이고 용량이 적다 애니메이션과 투명 이미지 가능

-jpg 높은 압축률과 자연스러운 색상 표현 사진이나 일반적인 그림 가능

-png jpg에 비해 이미지 손실이 없다 투명과 반투명 모두 가능

​

7. 테이블 요소

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

​

<td> 하나의 데이터 셀

<th> 제목 행의 데이터 셀

<tr> 하나의 행

<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>

​

8. 폼 요소

​

<input> 태그 *빈 태그

속성 : type="text","password", "image"

"radio","checkbox", --> name 속성으로 그룹화, checked 속성으로 디폴드 값 지정

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

<select> 태그

<option> 태그

<textarea> 태그

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

<button> 태그

속성 : type = "submit" , "reset" , "button"

<lable> 태그 *연결 시킬 폼 요소와 콜론으로 연결

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

<fieldset> 태그

<legend> 태그

<form> 태그

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