|
 |
 HTML 중급강좌
3. 화면 분할하기(2)
|
 |
[1][2][3][4]
|
※ 화면 분할해보기
속성과 기본형식을 알았으니 이제
본격적으로 예제와 함께 화면분할하는 걸 보도록
하죠^^
① 세로로 화면 2분할 하기
일반적으로 홈페이지에서 가장 많이
사용하는 형태인데요....20% 대 80% 비율로 나누어서
왼쪽에 메뉴를 만들어 고정시키고 메뉴를
선택하면 오른쪽 내용이 바뀌면서 해당 내용이
나타나게 하는 방식이져^^ 그럼 한번 만들어
볼까요?^^ ( 참고적으로 프레임태그화면에는 body
부분이 사용되지 않습니다. )
<html>
<head></head>
<frameset cols="20%, 80%"
frameborder="1">
<frame src="framex1.htm">
<frame src="framex2.htm">
</frameset>
</html> |
<html>
<head></head>
<frameset cols="20%, 80%" frameborder="0">
<frame src="framex1.htm" scrolling="no">
<frame src="framex2.htm" scrolling="no">
</frameset>
</html> |
| 예제보기
1 |
예제보기
2 |
자...위에 예제보기 1 과 2의 차이점이
있습니다. 예제보기 1의 경우 화면이 작을 때나
안의 내용이 화면을 오버할 땐 스크롤바가 양쪽에
생기게 되져....프레임구분선도 생기고요...하지만
예제보기 2의 경우 화면이 작거나 내용이 화면을
오버할 경우에도 절대 스크롤바가 생기지 않으며
프레임 구분선도 생기지 않져...^^
② 가로로 화면 2분할 하기
이번에는 가로로 2분할하는 방법을
알아보도록 하겠습니다. 이 방식도 홈페이지를
만드는데 많이 사용되고 있는데요... 분할하는
방법은.. 뭐....세로로 2분할 하는
거하고 거의 비슷하져^^ cols 속성을 rows
속성으로만 바꿔주면 되겠죠?^^
<html>
<head></head>
<frameset rows="20%, 80%" frameborder="1">
<frame src="framex3.htm" scrolling="no">
<frame src="framex2.htm" scrolling="no">
</frameset>
</html> |
<html>
<head></head>
<frameset rows="20%, 80%" frameborder="0"
framespacing="0">
<frame src="framex3.htm" scrolling="no"
noresize>
<frame src="framex2.htm" scrolling="no">
</frameset>
</html> |
| 예제보기1 |
예제보기2 |
위에 예제보기 1과 2는 언뜻 보기에 별
차이가 없는 것처럼 보이지만 실로 엄청난 차이가
있습니다. 왜냐하면 바로 noresize
☜ 속성때문이져.......예제보기 1에서
프레임구분선을 마우스로 조절을 하면 마음대로
프레임 비율이 조절되져......홈페이지 처음
만드는 초보분들이 주로 실수 하는 부분 중
하나인데....noresize 속성을 지정해주지 않으면
방문객들이 마음대로 프레임구분선을 조절할 수
있게 되버리죠....그리곤 다들 이렇게 생각하죠..."
이 홈페이지는 왕 초보가 만든거군..." ^^
framespacing ☜속성은 별루
그렇게 많이 쓰이는 건 아닌데.....프레임간에
간격을 조정해주죠...frameborder="1" 로 한
다음에 framespacing="50" 정도로 설정하고
태그연습장에서 실행시켜보세요^^ 그럼 어떤건지
확실히 이해되실겁니다. ^^
흠....벌써...... ^^ 다음페이지에서는 3분할
하는 걸 배워보도록 하죠^^ 다음페이지로....go!
|
이전 페이지로 || 태그연습장 || 다음 페이지로
|
|
|
|
