[Html] 프레임(frame) 과 리스트(List) 에 대해서

프레임(frame)

프레임(frame)은 하나의 웹브라우저 화면에 여러개의 HTML 문서를 표시할때 사용합니다. 주로 네비게이션(메뉴)과 컨텐츠 부분을 분리하기 위해서 사용합니다. 프레임을 사용하기 위해서는 프레임을 정의하는 문서, 그리고 프레임에 불러올 문서가 있어야 합니다. 창을 좌우로 나누고 왼쪽 프레임에는 홈짱닷컴을 오른쪽에는 네이버 페이지를 불러오는 예제를 만들어 보겠습니다. <frameset cols="25%,75%">     <frame src=http://www.homejjang.com>     <frame src="http://www.naver.com"> </frameset> 프레임을 정의하기 위해서는 <frameset>태그와 <frame>태그가 필요합니다. <frameset> 태그 문서를 어떻게 나눌것인가를 정의합니다. cols="25%,75%"의 의미는 문서를 수평으로 2개의 프레임으로 나누고, 프레임의 너비 비율을 25%, 75%로 지정한다는 의미입니다. cols 부분을 rows로 바꾸면 문서를 수직으로 나눌 수 있습니다. 그리고 각 프레임이 차지하는 너비를 %로 표현했는데 픽셀값으로 표현이 가능합니다.(실제로 픽셀값으로 많이 사용합니다. 메뉴의 너비가 고정되어 있어야 하므로) cols="200,*" 이런식의 표현을 많이 합니다. 왼쪽 프레임의 너비를 200픽셀로 지정하고, 오른쪽 프레임은 나머지 영역을 할당하라는 의미입니다. <frame> 태그 프레임안에 들어가는 문서의 속성을 지정하는 태그입니다.

frameset 태그

frameset 태그는 프레임을 어떻게 나눌것인가를 지정합니다. cols cols 속성값은 frame 개체의 너비를 지정합니다. cols="200,*" 으로 지정하면 프레임을 좌우로 나눈 다음 왼쪽 프레임의 크기를 200픽셀로, 오른쪽 프레임은 나머지 크기를 차지하도록 설정한다는 의미입니다. <frameset cols="200,*">     <frame src="menu.html">     <frame src="contents.html"> </frameset> rows rows 속성값은 frame 개체의 높이를 지정합니다. rows="200,*" 으로 지정하면 프레임을 상화로 나눈 다음 상단 프레임의 크기를 200픽셀로, 오른쪽 프레임은 나머지 크기를 차지하도록 설정한다는 의미입니다. <frameset rows="200,*">     <frame src="menu.html">     <frame src="contents.html"> </frameset> 2개이상의 프레임으로 나누기 프레임 태그를 중첩시키면 2개 이상의 프레임으로도 나눌 수 있습니다. <frameset rows="100,*">     <frame src="top_menu.html">     <frameset cols="200,*">         <frame src="left_menu.html">         <frame src="contents.html">     </frameset> </frameset> top_menu.html, left_menu.html, contents.html 3개의 파일을 추가적으로 만든 다음테스트 해보면 프레임에 대한 이해를 좀더 확실하게 할 수 있습니다.

frame 태그

<frame>태그는 기본적으로 src 속성을 가집니다. 어떤 문서를 프레임 안으로 불러올것인가를 지정해야 하기 때문이죠. <frame src="menu.html"> 기타 속성은 아래와 같습니다. frameborder 프레임의 경계선을 표시할지 여부를 지정합니다. 0으로 지정하면 경계선이 보이지 않고 1로 지정하면 경계선이 출력됩니다. <frame src="menu.html" frameborder="0" marginheight="20" marginwidth="0" name="menu_frame" noresize scrolling="auto"> marginheight와 marginwidth 프레임의 여백을 지정합니다. <frame src="menu.html" frameborder="0" marginheight="20" marginwidth="0" name="menu_frame" noresize scrolling="auto"> name 프레임명을 지정합니다. 이는 하이퍼링크의 타겟을 설정할때 중요한 의미를 지닙니다. <frame src="menu.html" frameborder="0" marginheight="20" marginwidth="0" name="menu_frame" noresize scrolling="auto"> noresize 이 속성에는 값을 지정하지 않습니다. 기본적으로 프레임의 경계선을 드래그하면 프레임의 크기를 조절할 수 있습니다. NORESIZE 속성을 사용하면 프레임의 크기를 조절하지 못합니다. 즉 프레임의 크기를 고정하고 싶을때 추가해 주는 속성입니다. <frame src="menu.html" frameborder="0" marginheight="20" marginwidth="0" name="menu_frame" noresize scrolling="auto"> scrolling 프레임내에 스크롤바가 생길지 여부를 지정합니다. yes로 지정하면 스크롤바가 생기고, no로 지정하면 생기지 않습니다. auto로 지정하면 문서의 내용이 프레임의 크기보다 큰 경우 스크롤바가 자동으로 생깁니다. <frame src="menu.html" frameborder="0" marginheight="20" marginwidth="0" name="menu_frame" noresize scrolling="auto">

프레임(frame)으로 나누어진 문서에서 타겟을 설정하는 방법

간단한 예제를 통하여 프레임 링크의 타겟을 설정하는 방법을 알아보겠습니다. menu.html 먼저 아래와 같이 코딩한 다음 menu.html 로 저장합니다. 이는 왼쪽 프레임에 위치할 문서입니다. <p><a href="http://www.homejjang.com" target="right">홈짱닷컴</a></p> <p><a href="http://www.naver.com" target="right">네이버</a></p> 위의 소스를 보면 링크의 타겟값을 right로 지정했음을 알 수 있습니다. 이는 right라는 이름을 가지고 있는 프레임에 링크가 걸린 페이지를 불러온다는 의미입니다. frame.html 왼쪽 문서가 만들어졌으면 이제는 프레임을 정의하는 문서를 만들어 보겠습니다. 아래와 같이 코딩한 다음 frame.html로 저장합니다. <frameset cols="150,*">     <frame src="menu.html">     <frame src="http://www.homejjang.com" name="right"> </frameset> 왼쪽 문서의 링크의 타겟값이 right로 지정했으므로 오른쪽 프레임의 name 값을 right 지정해야 합니다. 이렇게 타겟값과 프레임의 이름을 동일하게 맞춰주어야만 링크한 문서가 타겟에 설정한 프레임에 나오게 됩니다.

noframes 태그

특정 웹브라우저에서는 프레임 태그를 읽지 못하는 경우가 있습니다. 이를 대비해서 <noframes> 태그를 사용하여 프레임으로 이루어진 문서라는 것을 안내해줘야 합니다. 현재 대부분의 웹브라우저가 프레임 태그를 인식하므로 필요성이 점차 줄어들고 있는 태그입니다. <noframes>와 </noframes> 사이에 프레임으로 작성된 문서라는 안내문을 넣으면 됩니다. <noframes>이 문서는 프레임을 인식할 수 있는 웹브라우저에서만 열람이 가능합니다.</noframes> 만일 <noframes>를 사용하지 않고 프레임 태그(<frameset>과 <frame>)만 사용했는데 이를 웹브라우저가 인식하지 않으면 화면에 공백만 나올겁니다. <noframes> 태그를 프레임 태그 아래에 추가해주면 좀더 방문자를 배려해 줄 수 있습니다.

리스트(List) 태그

HTML에서 리스트는 순서 있는 리스트(Ordered Lists)와 순서 없는 리스트(Unordered Lists)로 구분할 수 있습니다. 순서 있는 리스트(Ordered Lists) HTML 강좌 <ol>  <li>줄바꾸기</li>  <li>헤드라인</li>  <li>기본태그</li> </ol> HTML 강좌 줄바꾸기 헤드라인 기본태그 순서 없는 리스트(Unordered Lists) HTML 강좌 <ul>  <li>줄바꾸기</li>  <li>헤드라인</li>  <li>기본태그</li> </ul> HTML 강좌 줄바꾸기 헤드라인 기본태그

HTML 리스트(list)의 type 속성

type 속성을 이용하면 marker 부분을 바꿀 수가 있습니다. <ol type="A">  <li>줄바꾸기</li>  <li>헤드라인</li>  <li>기본태그</li> </ol> 순서 있는 리스트(Ordered Lists)에서 type속성값을 A로 지정하면 A부터 시작하는 리스트를 만들 수 있습니다. 줄바꾸기 헤드라인 기본태그 A외에도  a, I, i, 1 등을 사용할 수 있습니다. <ol type="i">  <li>줄바꾸기</li>  <li>헤드라인</li>  <li>기본태그</li> </ol> 줄바꾸기 헤드라인 기본태그