본문 바로가기
programming/Gukbi

국비 교육 55일차 - 화면 UI 편집, javaScript

csohb 2021. 3. 17. 07:56
728x90
반응형

팀프로젝트를 본격적으로 시작하기 때문에 이제 템플릿을 활용해서 각자 화면 UI를 디자인 하는 단계를 배웠다.

오늘은 메인화면에서 메뉴바와 footer를 분리해서 main 페이지로 따로 만들고, 그 안에 home화면을 따로 편집해서 사용하는 방법을 배웠다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<title>Food&Recipe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../css/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body id="top">
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<div class="wrapper row1">
  <header id="header" class="clear"> 
    <!-- ################################################################################################ -->
    <div id="logo" class="fl_left">
      <h1><a href="index.html">맛집 & 레시피</a></h1>
    </div>
    <div class="fl_right">
      <ul class="inline">
        <li>ID:<input type=text name=id class="input-sm" size=10></li>
        <li>Password:<input type=password name=pwd class="input-xs" size=10></li>
        <li><input type=button name=pwd value=로그인 class="btn btn-xs primary"></li>
      </ul>
    </div>
    <!-- ################################################################################################ --> 
  </header>
</div>

<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<div class="wrapper row2">
  <nav id="mainav" class="clear"> 
    <!-- ################################################################################################ -->
    <ul class="clear">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a class="drop" href="#">회원가입</a>
        <ul>
          <li><a href="pages/gallery.html">회원가입</a></li>
          <li><a href="pages/full-width.html">아이디찾기</a></li>
          <li><a href="pages/sidebar-left.html">비밀번호 찾기</a></li>
        </ul>
      </li>
      <!-- 로그인 처리가 되면 이 화면으로 바꿔짐
       <li><a class="drop" href="#">회원수정</a>
        <ul>
          <li><a href="pages/gallery.html">회원수정</a></li>
          <li><a href="pages/full-width.html">비밀번호변경</a></li>
          <li><a href="pages/sidebar-left.html">회원탈퇴</a></li>
        </ul>
      </li> -->
      <li><a class="drop" href="#">맛집</a>
        <ul>
          <li><a href="#">지역별맛집</a></li>
          <li><a href="#">맛집추천</a></li>
          <li><a href="#">맛집예약</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#">레시피</a>
        <ul>
          <li><a href="#">레시피</a></li>
          <li><a href="#">쉐프</a></li>
          <li><a href="#">오늘의 레시피</a></li>
          <li><a href="#">오늘의 쉐프</a></li>
          <li><a href="#">인기 레시피</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#">커뮤니티</a>
        <ul>
          <li><a href="#">자유게시판</a></li>
          <li><a href="#">묻고답하기</a></li>
          <li><a href="#">후기게시판</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#">뉴스</a>
        <ul>
          <li><a href="#">맛집뉴스</a></li>
          <li><a href="#">레시피뉴스</a></li>
          <li><a href="#">전체뉴스</a></li>
        </ul>
      </li>
      <li><a href="#">마이페이지</a></li>
      <!-- <li><a href="#">관리자페이지</a></li> -->
    </ul>
    <!-- ################################################################################################ --> 
  </nav>
</div>
<!-- 내용이 들어가는 위치 -->
	<jsp:include page="home.jsp"></jsp:include>
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<!-- 내용이 들어가는 위치 -->
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<div class="wrapper row4">
  <footer id="footer" class="clear"> 
    <!-- ################################################################################################ -->
    <p class="text-center">
    강북쌍용교육센터 G강의장 
    </p>
    <!-- ################################################################################################ --> 
  </footer>
</div>
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<!-- <div class="wrapper row5">
  <div id="copyright" class="clear"> 
    ################################################################################################
    <p class="fl_left">Copyright &copy; 2018 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a target="_blank" href="https://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
    ################################################################################################ 
  </div>
</div> -->
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a> 
<!-- JAVASCRIPTS --> 
<script src="../js/jquery.min.js"></script> 
<script src="../js/jquery.backtotop.js"></script> 
<script src="../js/jquery.mobilemenu.js"></script> 
<script src="../js/jquery.flexslider-min.js"></script>
</body>
</html>

메뉴랑 푸터만 남겨둔 main 페이지 소스이다. 여기서 신경써야 할건 css와 js의 경로를 설정하는 방법이다. 템플릿을 다운 받으면 폴더가 달라서 경로 설정이 잘못되어 있을 수 있어서 

본인이 만들어준 폴더에 잘 들어가 있는지 확인을 해주고 경로를 변경해야 한다.

 

(엑스형 프로젝트에서도 이 폴더 경로 설정을 몰라서 html파일이랑 사진 파일을 같은 폴더에 담아 뒀었는데 시간이 나면 좀 변경을 해둬야겠다. )

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="wrapper row3">
  <div id="slider" class="clear"> 
    <!-- ################################################################################################ -->
    <div class="flexslider basicslider">
      <ul class="slides">
        <li><a href="#"><img class="radius-10" src="../images/01.png" alt=""></a></li>
        <li><a href="#"><img class="radius-10" src="../images/02.png" alt=""></a></li>
        <li><a href="#"><img class="radius-10" src="../images/03.png" alt=""></a></li>
      </ul>
    </div>
    <!-- ################################################################################################ --> 
  </div>
</div>
<!-- ################################################################################################ --> 
<!-- ################################################################################################ --> 
<!-- ################################################################################################ -->
<div class="wrapper row3">
  <main class="container clear"> 
    <!-- main body --> 
    <!-- ################################################################################################ -->
    <ul class="nospace group btmspace-80">
      <li class="one_third first">
        <article class="service"><i class="icon fa fa-ambulance"></i>
          <h6 class="heading"><a href="#">Lorem Ipsum Dolor</a></h6>
          <p>Aenean semper elementum tellus, ut placerat leo. Quisque vehicula, urna sit amet.</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </li>
      <li class="one_third">
        <article class="service"><i class="icon fa fa-h-square"></i>
          <h6 class="heading"><a href="#">Lorem Ipsum Dolor</a></h6>
          <p>Aenean semper elementum tellus, ut placerat leo. Quisque vehicula, urna sit amet.</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </li>
      <li class="one_third">
        <article class="service"><i class="icon fa fa-hospital-o"></i>
          <h6 class="heading"><a href="#">Lorem Ipsum Dolor</a></h6>
          <p>Aenean semper elementum tellus, ut placerat leo. Quisque vehicula, urna sit amet.</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </li>
    </ul>
    <!-- ################################################################################################ -->
    <!-- 두번째 -->
<h2 class="sectiontitle">믿고 보는 맛집 리스트</h2>
    <!-- ################################################################################################ -->
    <div class="flexslider carousel basiccarousel btmspace-80">
      <ul class="slides">
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
      </ul>
    </div>
    
     <!-- 두번째 -->
<h2 class="sectiontitle">지역별 인기 맛집</h2>
    <!-- ################################################################################################ -->
    <div class="flexslider carousel basiccarousel btmspace-80">
      <ul class="slides">
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
      </ul>
    </div>
    
     <!-- 세번째 -->
<h2 class="sectiontitle">메뉴별 인기 맛집</h2>
    <!-- ################################################################################################ -->
    <div class="flexslider carousel basiccarousel btmspace-80">
      <ul class="slides">
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
        <li>
          <figure><img class="radius-10 btmspace-10" src="../images/320x185.png" alt="">
            <figcaption><a href="#">Lorem Ipsum Dolor Sit Amet</a></figcaption>
          </figure>
        </li>
      </ul>
    </div>
    
    
    <!-- ################################################################################################ -->
    <h2 class="sectiontitle">Lorem Ipsum Dolor</h2>
    <!-- ################################################################################################ -->
    <ul class="nospace group">
      <li class="one_half first">
        <article><img class="imgl radius-10" src="../images/100x100.gif" alt="">
          <h6 class="heading"><a href="#">Lorem Ipsum Dolor</a></h6>
          <p>Aenean semper elementum tellus, ut placerat leo. Quisque vehicula, urna sit amet.</p>
        </article>
      </li>
      <li class="one_half">
        <article><img class="imgl radius-10" src="../images/100x100.gif" alt="">
          <h6 class="heading"><a href="#">Lorem Ipsum Dolor</a></h6>
          <p>Aenean semper elementum tellus, ut placerat leo. Quisque vehicula, urna sit amet.</p>
        </article>
      </li>
    </ul>
    <!-- ################################################################################################ --> 
    <!-- / main body -->
    <div class="clear"></div>
  </main>
</div>
</body>
</html>

 

이거는 홈화면에 담길 내용이다. 여기서 편집을 해주고 main페이지에 같이 띄워주면 된다. 띄워주는 방법은 include를 활용하면 된다. 

<!-- 내용이 들어가는 위치 -->
	<jsp:include page="home.jsp"></jsp:include>

 Servlet으로 할때보다 훨씬 간단한거 같다. 

 

일단은 오늘은 여기까지 배우고, 각자 찾은 템플릿에 적용을 해보는 방식으로 수업이 진행됐다. 

 

그리고 오후에는 JavaScript

배열, 함수, 조건문등을 쓰는 방법을 배웠다. 

<!-- 
    for => 배열 , JSON => Ajax
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 일반 for
/*
 *  
 *        1 →  2    4
 *   for(변수;조건문;증감식)
	 {
	           ↓    ↑
	     반복 처리문장 3    
	 }
 */
/*window.onload=function()
{
	for(let i=1;i<=10;i++)
	{
	   document.write(i+"&nbsp;");	// <body>안에 출력
	}
}*/
// for - of , for - in => Collection
window.onload=function()
{
	// 배열 선언 
	let names=["홍길동","심청이","박문수","이순신","춘향이"];
	let sexs=["남자","여자","남자","남자","여자"];
	for(let i=0;i<names.length;i++)
	{
		document.write(names[i]+"<br>");
	}
	document.write("<hr>");
	// for - of => forEach구문 
	for(let n of names)
	{
		document.write(n+"<br>");
	}
	// for - in => index번호 => 배열 여러개를 동시에 수행할 때 주로 사용
	document.write("<hr>");
	for(let i in names)
	{
		document.write(i+":"+names[i]+"("+sexs[i]+")<br>");
	}
	document.write("<hr>");
	names.forEach(name=>{
		document.write(name+"<br>");
	})
	document.write("<hr>");
	names.forEach(function(name){
		document.write(name+"<br>");
	})
	document.write("<hr>"); 
	// 권장
	names.map(name=>{
		document.write(name+"<br>");
	})
	document.write("<hr>");
	names.map(function(name){
		document.write(name+"<br>");
	})
	
}
// forEach , map
</script>
</head>
<body>

</body>
</html>

 

 자바에서 forEach와 유사한 함수들을 배웠는데, 가장 권장되는 사항은 maps라고 한다. 

또 배열을 이용해서 forEach를 사용하는 방법도 있다.

 

<!-- 
	배열 이용 => 객체
	let 변수명 =[{},{},{},{},{}]
	객체 표현법
		=> {키:값, 키:값....}
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
	/*
		class Sawon
		{
			int sabun;
			String name, dept, job, hiredate;
			int pay;
		}
	
	자바 ===> 데이터 ===> 자바스크립트
			JSON/XML
	*/
	/*let sawon={sabun:1, name:"이제노", dept:"개발부", job:"대리", hiredate:"2019-01-01", pay:3800} // {}가 한명에 대한 정보 => class
	console.log("사번:"+sawon.sabun)
	console.log("이름:"+sawon.name)
	console.log("부서:"+sawon.dept)
	console.log("직위:"+sawon.job)
	console.log("입사일:"+sawon.hiredate)
	console.log("연봉:"+sawon.pay)*/
	let info=[
				{sabun:1, name:"이제노", dept:"개발부", job:"대리"},
				{sabun:1, name:"종천러", dept:"개발부", job:"대리"},
				{sabun:1, name:"박지성", dept:"개발부", job:"대리"},
				{sabun:1, name:"이동혁", dept:"개발부", job:"대리"},
				{sabun:1, name:"황런쥔", dept:"개발부", job:"대리"},
				];
	info.forEcah(function(sawon){
		document.write(sawon.saban+" "+sawon.dept+" "+sawon.job+"<br>");
	})
	
	document.write("<hr>");
	info.map(function(sawon){
		document.write(sawon.sabun+" "+sawon.name+" "+sawon.dept+" "+sawon.job+"<br>");
	});
	
	document.write("<hr>");
	info.forEach((sawon)=>{
		document.write(sawon.sabun+" "+sawon.name+" "+sawon.dept+" "+sawon.job+"<br>");
	});
	
	document.write("<hr>");
	info.map((sawon)=>{
		document.write(sawon.sabun+" "+sawon.name+" "+sawon.dept+" "+sawon.job+"<br>");
	});
	
	document.write("<hr>");
	for(let sawon of info)
	{
		document.write(sawon.sabun+" "+sawon.name+" "+sawon.dept+" "+sawon.job+"<br>");
	}
	
	document.write("<hr>");
	for(let i=0;i<info.length;i++)
	{
		document.write(info[i].sabun+" "+info[i].name+" "
				+info[i].dept+" "+info[i].job+"<br>");
	}
	
}
</script>
</head>
<body>

</body>
</html>
<!-- 
      1) function 함수명()
         {
         }
      2) => 화살표 함수 
         let add=()=>{}
         => let add=function(){}
         => let add=(a,b)=>a+b
         => let add=function(a,b){return a+b} => this
        
      public class A
      {
          public A(){this=A}
          B b=new B(){
             this=B
             public void display(){}
          }
      }
      public class B
      {
         public void display(){}
      }
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*let display=function(){
	document.write("Hello");
}*/
let display=()=>{
	document.write("Hello");
}
display();
</script>
</head>
<body>

</body>
</html>

 자바스크립트에서 함수를 화살표로 표현하는 방법도 있다. 개발자들마다 쓰는 방식이 다르기 때문에 이 내용 역시 알아둬야 한다. 또 나중에 this 를 쓸때 화살표가 없으면 혼란이 생겨 지정이 잘 안된다고 한다. 

 

그렇기 때문에 화살표를 이용한 함수에 좀더 익숙해질 필요가 있을것 같다. 

 

 

728x90
반응형

'programming > Gukbi' 카테고리의 다른 글

국비 교육 57일차 - request&response  (0) 2021.03.19
국비 교육 56일차 - jquery, jsp  (0) 2021.03.17
국비 교육 54일차 - JavaScript  (0) 2021.03.15
국비 교육 53일차 - Trigger  (0) 2021.03.14
국비 교육 52일차 - 오라클 정리, css 마무리  (0) 2021.03.11

'programming/Gukbi' Related Articles

티스토리툴바