문서에 빵구를 내는 태그 IFRAME

아이프레임은 아주 많이 쓰이지요. 프레임과 다르게 웹페이지 전체에 경계를 만들어서 사용 되는 것이 아니라 특정한 부분만 사각형으로 잘라내어서 그 부분에 문서를 연결 할 수 있습니다.

src : 문서 경로
width : 프레임의 가로의 폭 길이
height : 프레임의 세로의 폭 길이
frameboder : 프레임의 경계선 표시
scrolling : 스크롤 제어
marginwight : 프레임의 좌우 여백
marginheight : 프레임의 상하 여백
align : 정렬
name : 프레임 이름

저는 아이프레임이 처음에 나오는 문서를 설정을 안해 주었는데요. src=”문서의 경로” 해주시면 처음 열었을 때 아이프레임에 나올 문서를 설정 할 수 있습니다.

영역을 나누어주는 태그 FRAMESET, FRAME

프레임을 나누는 것은 요즘들어 많이 줄어 드렀습니다. 저의 홈페이지 같은 경우도 통 프레임이지요.
하지만 처음 만드시는 분들께서는 자주 사용을 하지요. 프레임을 나누어서 한쪽은 메뉴 한쪽은 내용 이런식으로 만들면 만들기도 편하고 보기도 편합니다. 여기서 <A> 태그의 target 속성을 자세히 알아보죠.

<FRAMESET> 속성 .
cols : 세로 프레임 분할 ( pixel / % / * )
rows : 가로 프레임 분할 ( pixel / % / * )
border : 구분선 표시

<FRAME> 속성 .
src : 문서 연결 경로
name : 프레임 이름
noresize : 구분선의 고정
scrolling : 스크롤의 제어
marginwidth : 좌우 여백 지정
marginheight : 상하 여백 지정

 

 

위의 프레임은 세로로 나누어서 그안에서 또 다시 가로로 나눈 것입니다. 이런식으로 몇개 씩이나 나눌 수 있습니다.
나눌 때 “150,*” 이런식으로 적어 주었는데 여기서 ‘*’ 이것은 전부 라는 뜻입니다. 그러니 cols=”150,*” 이것은 세로로 나누고 처음 프레임의 폭을 150 으로 설정 하고 그리고 나머지 전부라는 뜻이지요. 그리고 프레임을 보면 알겠지만 오른쪽 밑에 있는 프레임은 스크롤이 나와 있는 것을 보았을 것입니다. 그것은 속성의 SCROLLING=”YES” 로 해주었기 때문입니다. 만약에 안쓰게 된다면 그 프레임이 오버 되기전에는 스크롤이 생기지 않습니다. “NO” 라고 설정을 해주면 오버가 되어도 스크롤이 생기지 않겠지요.
이제 진정한 target 을 설정 하였습니다. 링크를 걸 때 프레임의 이름을 써 넣어 주시면 해당 프레임에서 문서이동이 되겠지요.

가장 중요한 테이블 (제생각^^;;) table, tr, td

테이블 태그는 엄청나게 중요합니다. 이 태그를 안쓰고 홈페이지를 만든다면…
때리쳐.-_-; 또한 html중에서 배울때 가장 애먹는 놈입니다. 빳싹 긴장하고 보시죠~

<table> 속성 .
align : 표 정렬 ( left / center / right )
bgcolor : 표 바탕 색 지정
border : 표 경계선의 굵기 ( 픽셀 단위 )
bordercolor : 표 경계선의 색 지정
width : 표 가로의 폭 길이
height : 표 세로의 폭 길이
cellpadding : 셀 내부의 여백 지정
cellspacing : 셀의 구분선 굵기 지정
<tr> <td> 속성.
align : 셀 내부의 가로 정렬 ( left / center / right )
valign : 셀 내부의 세로 정렬 ( top / middle / bottom )
bgcolor : 셀 바탕 색 지정
background : 셀 배경 이미지
width : 셀의 가로 너비
height : 셀의 세로 너비
colspan : 셀이 펼쳐져 있는 열의 수
rowspan : 셀이 걸쳐져 있는 행의 수

표가 어떻게 생성 되는지 설명해 드리겠습니다. 우선 <table> 이라는 태그로 시작을 합니다.
그리고 <tr> 이라는 태그로 하나의 행을 만듭니다. 편하게 가로로 줄을 그린다고 생각 하시면 좋습니다.
그 다음 <td> 라는 태그로 칸을 만드는 거지요. <tr> 태그 안에 <td> 태그가 10개 들어 가면 가로로 칸이 10개가 있는 테이블이 만들어 집니다. 당연히 태그가 시작하면 닫아 주는 태그도 써주셔야지요.
<table> 안에 bgcolor를 설정 하는 것과 <td> 안에 설정 하는 것이 다르다는 것을 느끼세요. <table> 안에 설정하면 table 전체가 <td> 안은 그 해당 되는 셀 안쪽만 색이 입혀 집니다.
colspan 은 가로로 있는 셀과 합쳐 지는 것입니다. 만약 테이블이 한 행으로만 이루어져 있다면 합쳐질 수가 없겠지요? rowspan 도 같습니다. rowspan 은 세로로 있는 셀과 합쳐 지는 것입니다.
이해가 안돼는 분이 여기서 많이 나올꺼라고 예상합니다. colspan 하고 rowspan 이 뭘 어떻게 작용하는지 처음에는 잘 이해가 안돼는데요. 여러번 직접 코딩하시고 보시면 빨리 이해 하실꺼라 믿습니다.