인터넷 홈페이지의 이해 - 5차시(테이블, 아이프레임) 개인소장용

html table(테이블), iframe(아이프레임)의 이해

 

사진 폴더에선 한글이던 파일명이 다른 곳에선 영어로 변경됨. -한글 윈도우 바탕화면의 경우에만 적용.

RGB(비트맵) 이미지는 작게는 가능하나 크게는 작업이 불가하다.

<hr>가로선 주기 명령어. 아래는 명령어를 추가한 모습

추가 명령 <hr align=center width=700 size=5 noshade color=red>

중앙 정렬      크기      굵기      공간        색깔

&nbsp; 는 띄어쓰기 명령어

<td>네이버
</td>
<td>다음
</td>
<td>네이트
</td>             -> 이렇게 만들었을 때 '다음'은 글자수가 적어서 표의 크기가 가장 작게 나옴. 그래서 td에서 크기 설정이 필요함.

표>줄>칸. 즉, 명령어의 순서는 좌측 큰 것부터 입력할 것. table>tr>td / <table border 테두리>

물론 요즘 표는 아래와 같이 div를 더 자주 씀. (표 그리기가 더욱 간편함), 테이블 명령어가 아직 남은 이유는 있겠지.

<div>  </div>

 

테이블 즉, 표는 자세히 보면 부모표 안에 아기표가 들어가 있는 형태다. 그래서 칸과 줄을 자유롭게 합치거나 늘릴 수가 있다.

칸 합치기 : <td> 합치기. <td colspan=칸수>. 칸을 늘리면서 우측으로 밀어버림.

줄 합치기 : <td> 합치기. <td rowspan=줄수>.

 

 

 

아이프레임

 

tag에서는 분할 기능 없음. 드림위버는 있음. 임의로 칸을 늘릴 수가 없다. (태그에서는 합치기 기능을 활용할 것)

드림위버는 일반 문서의 기능과 동일해서 사용자의 편의성을 준다. 하지만 홈페이지 상에서는 내가 원하는 표가 아닐 수 있으니, 드림위버에서는 사용하지 않는 것이 좋음.

아이프레임(iframe) 원래 독립된 frame가 존재했으나 사라짐. div

<iframe width=700 height=400 name=if>   
</iframe>

인터넷 화면 안에 또다른 화면이 들어가도록 만든 창이 바로 아이프레임이다. 타겟을 지정하면 '다음'은 아이프레임 안에 뜨지만 '네이버'나 '구글'은 뜨지 않는다.

<TD width="100" align="center" bgcolor="#c0a0f0"><A title="google~" href="img/jeju.jpg" target="if"> 전주 </A> </TD>

칸 크기    중앙 색깔       배경 색깔                   말풍선                   링크               타겟 if에 띄우기

<TD colspan="4"><IFRAME name="if" width="700" height="400"></IFRAME>

칸 4칸 합치기         아이프레임 만들기          프레임 크기             완료

 

아이프레임에 띄우는 사진의 크기 조절 방법

-한글 : 사진을 불러온 후 shift키를 누르고 칼이 나오면 자르기 가능. 사진에 우측파일 누르면 그림파일로 저장 가능.

-포토샵 :  컨+알+i 에서 조절

<table cellspacing=0 cellpadding=33>
<tr>
<td> <a href=img/if1.jpg target=if> 서울 </a> </td>
<td> <a href=img/if2.jpg target=if> 제주 </a> </td>
<td> <a href=img/if3.jpg target=if> 부산 </a> </td>
<td> <a href=img/if4.jpg target=if> 경주 </a> </td>
<td> <a href=img/if5.jpg target=if> 전주 </a> </td>
</tr>
</table>

<iframe name=if width=520 height=394> </iframe>
프레임의 이름을 정해줘야 찾아갈 수 있음.

<iframe src=0220.html name=if width=520 height=394>
</iframe> : 대기화면 띄우기. 미리 만든 html.

<iframe src=http://daum.net name=if width=520 height=394>

</iframe> : 대기화면에 다음 띄우기

<iframe marginwidth=0 가로 여백 제거 marginheight=0 세로 여백 제거
*투명선 처리를 많이 하므로 실제로 많이 쓰진 않음. 줄이 너무 안 맞을 때 맞추기 위해서 사용.

scrolling=no 스크롤 없애기. 실제 0은 안 먹힘. 드림위버에는 아이프레임이 없으므로 직접 작업을 해야 함.
scrolling=yes or 1 스크롤 생성.
scrolling=true. false??. 도 가능. fault. default

style=text-decoration:none 링크 선 없애기.