프레임을 이용하여 화면 분할 하는 방법에 대하여 알아 보겠습니다. 프레임이란 프레임은 하나의 웹브라우저 화면을 여러개의 창으로 나누어 주는 역할을 합니다. HTML 문서를 몇 개의 파일로 나누어 작성한 후, 이 파일을 프레임으로 구분된 각 창에서 보여 줄 수 있습니다. 프레임 나누기 가로로 나누기 <FRAMESET ROWS = "나누는 개수만큼의 각 프레임의 세로길이들을 설정"> 세로로 나누기 <FRAMESET COLS = "나누는 개수만큼의 각 프레임의 가로길이들을 설정"> ※ 콤마(,)를 구분자로 하여 만들고 싶은 프레임의 개수만큼 길이를 입력합니다. 프레임의 길이 값 설정 예 픽셀의수(px) : 두개로 나눌 경우 "300, *" 백분율(%) : 세개로 나눌 경우 "10%, 50%, 40%" 비율 : 두개를 2:1로 나눌 경우 "2*, *" ※ 나머지 부분을 대신해서 * 를 사용 할 수 있습니다. 프레임의 속성 스크롤바 표시 속성 SCROLLING = "YES(항상 표시 됨), AUTO(문서의 길이가 길어지면 표시 됨), NO(표시하지 않음)" NAME 속성 프레임의 이름을 지정할 수 있습니다. 이름을 지정하게 되면 앵커(<A>) 태그를 사용 할 경우 TARGET속성으로 프레임의 이름을 지정하게 되면 해당 프레임에서 액션(페이지이동)이 발생하게 됩니다. 예제소스
예제결과 프레임 태그에 대하여 알아 보았습니다. DIV 프레임나누기프레임을 나눌땐 항상 어떤형태의 레이아웃을 구현할까 머리속으로 생각하면서 테이블이나 레이어구조를 만든다. 가장 주의할점은 어떤형태로 변할지에 대해 변칙적으로 구현 할 수있는 스타일을 만들어야 한다. 그럼 이번에는 스타일 정의를 통해 구조를 만들어 보도록 하겠다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV 프레임나누기</title> <style> .main_container { width:100%; height:100%;} .main_title { width:100%; height:130px; background-color: green; float:left; border-bottom-width:thin; border-bottom-color:rgba(25,80,100,0); border-bottom:solid;} .main_left_btn { width:50%; height:280px; background-color:red; float:left;} .main_right_btn { width:50%; height:280px; background-color:blue; float:left;} .main_list { width:100%; height:150px; background-color:yellow; float:left;} .main_left_btn_icon { width: 82px; height: 100px; margin: 0px auto; --> div 가운데 정열 text-align:center; --> div 안쪽 텍스트 가운데 정렬 background-repeat: no-repeat; background-image: url(../images/main_left_btn.png);} /** .main_left_btn_icon { width: 82px; height: 100px; margin: 0px auto; background-repeat: no-repeat; background-image: url(../images/main_left_btn.png); 버튼 백그라운드 이미지 넣기 position:absolute; left:50%; margin-left:-41px;}**/ </style> </head> <body> <div class="main_container"> <div class="main_title">타이틀</div> <div class="main_left_btn">왼쪽 <div class="main_left_btn_icon">중앙정렬</div> <div class="main_right_btn">오른쪽</div> <div class="main_list">리스트</div> </div> </body> </html> ※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※[홈페이지만들기] - div 배치하기 [홈페이지만들기] - html 테이블구조 만들기 [홈페이지만들기] - first-child / last-child 활용하기 |
HTML 프레임 나누기 - HTML peuleim nanugi
관련 게시물
저작권 © 2024 moicapnhap Inc.
