1.표만들기 (<table></table>태그)
개발자에게 있어서 가장 중요한 태그는 대표적으로 무엇이 있을까요? 물론 웹페이지를 구성하는 모든 태그들이 개발자에게 중요하지만 그 중에서도 핵심이 되는 태그는 <table>태그와 <form>태그입니다.
표는 정형표와 비정형표로 나뉘며 특히 비정형표는 개발자가 어떻게 쓰느냐에 따라 다양한 형태를 갖춥니다.
▶표를구성하는 태그
<table> : 표 전체를 담는 컨테이너
<caption> : 표 제목
<thead> : 헤딩 셀 그룹
<tfoot> : 바닥 셀 그룹
<tbody> : 데이터 셀 그룹
<tr> : 행. 여러개의 <td>, <th> 포함
<th> : 제목(헤딩) 셀
<td> : 데이터 셀
▶예시 (정형표)
▲코딩
▲출력 결과
▶예시 (비정형표)
▲코딩
위 이미지는 <th>태그에 rowspan속성을 주어 열을 합친것이다. colspan은 행을 합치는 속성이다.
▲출력 결과
※참고
표를 만들때 <caption>, <thead>, <tbody>, <tfoot> 태그를 사용하지 않고 <tr>만 표를 만드는 경우가 있는데 이것은 바람직하지 않다. 이유는 검색 엔진은 표의 의미(시맨틱)를 파악하기 위해 <caption>, <thead>, <tbody>, <tfoot>태그들을 찾기 때문이다. 또한 <tfoot>은 <tbody>전에 나오는 것이 좋다.
또한 테이블에서 <width>, <height>를 주어 테이블의 넓이와 높이를 설정할때 <table>태그 내의 반복문에는 따로 줄필요가 없다.
이미지를 넣고 싶을 때는 <tr>태그 내에서 <td>태그와 <img>태그를 활용한다.
하이퍼링크는 <a>태그의 href 속성으로 만들며 href속성 말고도 target, download 속성이 있다
▲코딩
같은 사이트를 연결하는 경우 HTML파일의 경로명만 지정하면 된다. 단, 같은 사이트에 사진이미지가 있는 html웹페이지가 있어야 한다.
▲출력 결과
▲코딩
target속성은 밑에서 다루기로한다.
▲출력 결과
▶<a href> 예시 (이미지에 하리퍼링크 만들기)
▲코딩
▲출력 결과
src값은 이미지가 나에게 있을 때 활성화되고 없다면 alt값이 활성화된다. 때문에 위 이미지를 보면 나에게 네이버사진이 없는 것을 알 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
3.id 속성으로 앵커 만들기 (<a></a>태그)
긴 내용을 가진 웹 페이지를 읽으려고 할때 사용자는 스크린을 업다운하는 불편함이 있다. 이런 불편함을 해소하고자 문서 내 특정 위치로 이동하는 링크를 만들수 있도록 하였는데, 이때 문서의 특정 위치를 앵커라고한다.
앵커는 어떤 태그든 그 위치에 만들어지고 앵커를 만들기 위해선 태그의 id속성에 앵커이름을 지정하고 앵커에 연결하는 링크를 만들면 된다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
4.파일 다운로드 링크 만들기,<a>의 download 속성
<a>태그의 download속성은 이미지, PDF, MP3, HTML파일, HWP파일, PPT파일 등 모든 파일을 다운로드 할 수 있는 링크를 만든다. 이때 다운로드 할 파일명은 href속성에 지정한다.
▶예시
▲코딩
첫문장의 download속성에 download값을 주면 반복문장에서는 값을 생략가능하다.
▲출력 결과
▲코딩
위와같은 코딩으로 두개의 iframe을 다른 HTML페이지에 출력할수 있는데, 이때 2개의 iframe.html 문서가 있어야하며 없을경우 </iframe>앞에 텍스트가 대신 출력된다.
▲출력 결과 (2개의 iframe.html문서가 있는경우)
▲코딩
'HTML' 카테고리의 다른 글
| HTML / DOM요소는 어떻게 만들어지나 (0) | 2020.12.25 |
|---|---|
| HTML / 스크립트 태그 작성 방법 (0) | 2020.12.25 |
| H4. 미디어 삽입, 웹폼 (0) | 2020.03.06 |
| H2. HTML의 기본 태그 살펴보기! (0) | 2020.03.05 |
| H1. HTML과 CSS, J.S를 맛보기로 살짝 활용해 간략한 자기 소개 페이지 만들기! (0) | 2020.03.04 |
