본문 바로가기

개발일지/Front

html 리스트, 프레임, 불러오기 복습

클릭하면 크게 볼 수 있습니다

전체화면 / 메뉴에 마우스 올렸을 때 / 클릭 했을 때

 

여기에 이런 페이지가 있다. 메인에 메뉴와 초록색 배경화면이 있는 조촐한 페이지가.. 메뉴에 마우스를 올려 놓으면 주황색이 되고, 클릭했을 때 각자의 사이트가 새 창에 뜨는 것이 아니라 아래 초록색 화면에 뜬다. 일주일 동안 내가 배웠던 것들이 이 사이트 안에 다 들어있는 것이다. 파일은 3가지를 준비하면 된다.

 


1. green.html

 <head>
  <meta charset="UTF-8">
  <title> </title>
  <style>
	body{ background:#CEF279; }
  </style>
 </head>

첫번째 파일 정말 별 거 없다. head - style에 배경색을 깔아주는 것 뿐이다.

 

2. menu.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>List</title>
  <style>
	body{ background: #FAED7D; }
	ul{ list-style:none; 
		background:#FFF; 
		margin:0px; padding:5px;
		text-align:center;
	  }
	 li{ display:inline; padding:10px; }
	 a{ color:black; text-decoration:none; padding:5px 10px; }
	 a:hover{ background:#F29661; color:white; } /* 마우스가 올라 갔을 때 */
  </style>
 </head>
 <body>
	<ul>
		<li>
			<a href="http://www.inia.co.kr" target="sc">인천일보아카데미</a>
		</li>
		<li><a href="http://www.incheon.go.kr" target="sc">인천시청</a></li>
		<li><a href="http://www.seoul.go.kr" target="sc">서울시청</a></li>
		<li><a href="http://www.naver.com" target="sc">네이버</a></li>
		<li><a href="http://www.daum.net" target="sc">다음</a></li>
	</ul>
 </body>
</html>

 

 

위쪽에 들어가는 메뉴를 만드는 html 파일이다. <ul><li> 리스트 태그를 이용해서 일단 메뉴들을 만들어준다. 하이퍼링크도 걸어준다. css에서 원하는대로 꾸며준다. 여기서 새롭게 등장하는 용어는 a:hover{ }인데 마우스가 올라 갔을 때 라는 뜻을 가지고 있다. 마우스가 올라 갔을 때 배경색은 주황색, 글씨색은 하얀색이 되도록 꾸며주었다. <a> 태그에 target을 보면 sc 라고 되어 있다. 이것은 임의로 정한 이름이다. 선언이 되어진 영역(초록색 배경)의 이름을 넣은 것 뿐이다. 그럼 선언된 영역에 사이트가 뜨는 것이다.

 

3. index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
<frameset rows="6%,*" frameborder="0">
	<frame src="menu.html">
	<frame src="green.html" name="sc" >
</frameset>
</html>

마지막으로 영역을 나누고 파일을 불러 온 파일을 들여다보자. frameset으로 영역을 반 나눠줬다. 위 아래 사이좋게 링크를 주었다. 위쪽은 메뉴 파일, 아래쪽은 초록색 배경파일이다. 그리고 배경의 영역을 선언하는 옵션이 name=""이다. frameset의 선을 없애기 위해서는 frameborder="0"이라는 옵션을 주었다.