TIL 02_HTML 기초2

태그 속성

1. TABLE 태그

<table> 태그는 데이터를 포함한 셀(cell)들의 행과 열로 구성된 테이블을 정의할 때 사용한다.
이러한 테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>,<th>,<td> 요소들로 구성된다.

기본 문법

<table>
    <tr>
        <th>텍스트</th>
    </tr>
    <tr>
        <td>텍스트</td>
    </tr>
</table>

<tr> : 테이블의 각 행(row)을 정의
<th> : 테이블의 각 열(column)의 제목을 정의
<td> : 하나의 테이블 셀(cell)을 정의
<colspan> <rowspan> : 행 또는 열 합치기
<thead> <tbody> <tfoot> : 표 구조 정의 ***제목이나 본 내용 등 각 내용의 구조를 정의함

2. IMAGE 태그

<image> 태그는 HTML 페이지에서 이미지를 정의한다.
그런데 자세히 살펴보면 이미지를 삽입된 요소를 정의하는 것이 아니라, 이미지(요소)가 삽입될 공간을 정의하는 태그이다.

기본 문법

<ima src="이미지 주소">

***<image>태그는 닫는 태그가 없다.

이미지 사이즈 조정

<img src="이미지 주소" height="높이" width="폭">

스크린 리더를 위한 Mark-up

<img src="이미지 주소" alt="해당 이미지 설명">

<alt>태그는 이미지를 설명하는 대체 텍스트이다.
이미지가 깨져서 나오지 않을 경우 텍스트 링크를 알려주거나 화면 낭독기가 읽어주게 된다.

3. 하이퍼링크 태그

<a>, href 속성

<a> 태그는 특정 문자에 하이퍼링크를 걸 때 사용된다.
하이퍼링크를 걸고자 하는 문자를 <a> 태그로 감싸주고, href=""를 사용해 이동하고자 하는 웹사이트를 입력한다.
***여기서 href는 hypertext reference의 약자이다.

기본 문법

<a href="링크할 주소"[속성="속성 값"]>텍스트</a>

<a>태그에 사용할 수 있는 속성

• href : 링크한 문서나 사이트의 주소를 입력
• target : 링크한 내용이 표시도리 위치를 지정
• download : 링크한 내용을 보여 주는 것이 아니라 다운로드
• rel : 현재 문서와 링크한 문서의 관계를 알려줌
• hreflang : 연결한 문서의 언어 지정
• type : 연결한 문서의 파일 유형 지정

<target>속성

기본 문법

<a href="링크할 주소" target="값">텍스트</a>

<target>태그에 사용할 수 있는 값

• _blank : 링크 내용이 새 창이나 새 탭에서 열림
• _self : target 속성의 기본값으로 링크가 있는 화면에서 열림