22/04/20 HTML 02

이미지 파일(Images)

 <img>태그로 표현하며 사진을 웹에 띄워주는 것으로 자신이 원하는 이미지를 미리 저장한 후, src로 불러와주면 이미지에 나타낼 수 있다.

이미지 파일이 뜨는 모습

이미지 파일

 

 

하이퍼 링크

 다른 페이지나 사이트로 연결해주는 역할을 하는 것으로 간단하게 링크라고 불리며 <a>태그로 표현한다.

왼쪽은 현재 브라우저에서 네이버로 갔으며 오른쪽은 새로운 창을 열어 네이버로 갔다.

 

내부링크 및 링크의 종류

 

 링크의 종류에는 <a name>태그로 표현하는 내부링크가 있는데 이는 타겟 지접 설정으로 클릭시 지정된 곳으로 이동되는 역할이다. top을 설정한다고 치면 클릭시 위로 이동한다. 그리고 메일을 보내기와 파일 다운로드, 이미지 보기 등이 있다.

  

top 클릭시 가장 위쪽으로 이동한다.

 

테이블 태그<table>

표를 만들어주는 태그로 표를 만들거나, 홈페이지의 레이아웃을 만드는데 사용하기도 한다. 테이블 태그에는 <th> <tr> <td>가 있다. <th> 는 표의 제목을 쓰는 역할이며 <tr>은 가로줄을 만드는 역할, <td>는 셀을 만드는 역할이다.

<th>는 가운데 정렬이며 <tr>과 <td>는 왼쪽정렬이 기본이다.

 

잘 보이게 하기 위해서 width(가로 500), height(세로 300), border(테두리 1), bgcolor(배경색) 를 줬다.

align / valign

 

표 내에 글자를 줄 수 있으며 위에서도 말했듯이 기본은 왼쪽부터 정렬이다. 만약 글자를 중앙이나 젤 위 등 위치를 옮기고 싶으면 align 과 valign 을 사용하여 위치를 바꿔줄 수 있다. align 은 좌,우 정렬이고 valign은 상,하 정렬이 된다.

 

왼쪽부터 top center / 기본 / right bottom

 

colspan / rowspan 

 표의 칸을 합치고 싶을 때에는 colspan 과 rowspan을 사용하는데, colspan은 가로로 칸을 합치는 경우고 rowspan은 세로로 줄을 합치는 것이다. 특히 colspan은 합친<td>를 지워줘야 한다. 가로의 줄을 합치기 때문에 세칸중 두칸을 합치면 두칸이 되기 때문이다.

가로줄 합치기 / 세로줄 합치기