접기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Unit 자율동아리 홈페이지">
<meta name="keywords" content="HTML,JavaScript,unit,자율동아리,동아리,보정고,보정고등학교,css,php,mmc,mmc티켓팅">
<meta name="author" content="hepheir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--크롬 주소 표시줄 색상 변경-->
<meta name="theme-color" content="#000000">
<title>Project UNIT</title>
<link rel="alternate" type="application/rss+xml" title="UNIT" href="https://project-unit.tistory.com/rss" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 나중에 따로 js파일로 옮길 예정인 스크립트 -->
<script>
//메인화면 유튜브 보이기/숨기기
function bgmDrawer(n){
switch(n){
case 1: //show
$('#bgm').slideDown(800);
break;
case 2: //hide
$('#bgm').slideUp(800);
break;
default:
}
}
//페이지에 표시할 내용
function screenSelection(n){
switch(n){
case 1: //MAIN
$('#screen_1').delay(400).fadeIn(400);
$('#screen_2').fadeOut(400);
$('#screen_3').fadeOut(400);
break;
case 2: //MMC
$('#screen_1').fadeOut(400);
$('#screen_2').delay(400).fadeIn(400);
$('#screen_3').fadeOut(400);
break;
case 3: //BLOG
$('#screen_1').fadeOut(400);
$('#screen_2').fadeOut(400);
$('#screen_3').delay(400).fadeIn(400);
break;
default: //최초 접속시 나타날 화면 애니메이션
$('#screen_1').hide().delay(400).fadeIn(800);
$('#screen_2').hide();
$('#screen_3').hide();
}
}
</script>
</head>
<body>
<header id="header">
<br/>
<h1><a href="https://project-unit.tistory.com/">UNIT</a></h1>
</header>
<table id="menu" class="fullWidth">
<thead>
<td><input type="button" value="Main" onclick="screenSelection(1)"/></td>
<td><input type="button" value="MMC" onclick="screenSelection(2)"/></td>
<td><input type="button" value="Blog" onclick="screenSelection(3)"/></td>
</thead>
</table>
<!-- MAIN -->
<div id="screen_1">
<iframe id="bgm" src="https://www.youtube.com/embed/playlist?list=PLSGdYLt-DLMUb6kYq5w0qA6gLvplRAptE&autoplay=1" frameborder="0"></iframe>
<div class="bgmControl">
BGM Player
<input type="button" class="button" id="bgmOff" name="bgm" value="Show" onclick="bgmDrawer(1)"/>
<input type="button" class="button" id="bgmOn" name="bgm" value="Hide" onclick="bgmDrawer(2)"/>
</div>
<!--소개글-->
<div>
<div class="content">
<h2>What is UNIT?</h2>
<p>Unit is a team founded by 3 highschool students. Unit stands for 'United IT' as we mainly focus on learning how to provide Web Services, and creating UCCs.</p>
<h2>Member of UNIT</h2>
<ul>
<li>김동주</li>
<li>이현오</li>
<li>박종운</li>
<li>이진호</li>
<li>김법기</li>
<li>최재원</li>
</ul>
</div>
</div>
</div>
<!-- MMC -->
<div id="screen_2">
<h3>FRONT</h3>
<div id="seatStatus" class="">
<form action="https://project-unit.tistory.com/">
<table class="seatTable fullWidth fullHeight">
<!-- 좌석 배치표 -->
<script> //row = 행, column = 열 - 직접 설정 가능
var row = 9;
var column = 16;
for(i=0;i<=row;i++){
document.write('<tr class="sideCell">');
if(i==0){ //맨 윗줄의 숫자열
document.write('<td></td>');
for(j=1;j<=(column/2);j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%">'+j+'</td>');
}
document.write('<td class="hallwayCell"></td>'); //중앙 복도
for(;j<=column;j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%">'+j+'</td>');
}
document.write('<td class="sideCell"></td>');
}
else{ //좌석 박스
document.write('<td class="sideCell">'+i+'</td>');
for(j=1;j<=(column/2);j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%"><label class="seatRadio" for="seat_'+j+i+'">o</lable><input type="radio" name="seat" id="seat_'+j+i+'" value="'+j+','+i+'"/></td>');
}
document.write('<td class="hallwayCell"></td>');
for(;j<=column;j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%"><label class="seatRadio" for="seat_'+j+i+'">o</lable><input type="radio" name="seat" id="seat_'+j+i+'" value="'+j+','+i+'"/></td>');
}
document.write('<td class="sideCell"></td>');
}
document.write('</tr>');
}
</script>
</table>
<input type="submit" value="제출"/>
</form>
</div>
</div>
<!-- BLOG -->
<div id="screen_3">
<br/>
<a href="/admin"><h3>관리자 페이지</h3></a><br/>
<a href="http://cfs.tistory.com/custom/blog/211/2113935/skin/images/logs.html"><h3>4월 활동기록</h3></a><br/>
<a href="http://cfs.tistory.com/custom/blog/211/2113935/skin/images/sub.html"><h3>핵 초창기 사이트 모습</h3></a>
<s_article_rep>
<div class="entry">
<div class="article">
<HEAD>에서 선언한 함수들의 if, else if, else 조건문을 switch문으로 바꿈
VIDEO
더보기 접기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Unit 자율동아리 홈페이지">
<meta name="keywords" content="HTML,JavaScript,unit,자율동아리,동아리,보정고,보정고등학교,css,php,mmc,mmc티켓팅">
<meta name="author" content="hepheir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--크롬 주소 표시줄 색상 변경-->
<meta name="theme-color" content="#000000">
<title>Project UNIT</title>
<link rel="alternate" type="application/rss+xml" title="UNIT" href="https://project-unit.tistory.com/rss" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 나중에 따로 js파일로 옮길 예정인 스크립트 -->
<script>
//메인화면 유튜브 보이기/숨기기
function bgmDrawer(n){
switch(n){
case 1: //show
$('#bgm').slideDown(800);
break;
case 2: //hide
$('#bgm').slideUp(800);
break;
default:
}
}
//페이지에 표시할 내용
function screenSelection(n){
switch(n){
case 1: //MAIN
$('#screen_1').delay(400).fadeIn(400);
$('#screen_2').fadeOut(400);
$('#screen_3').fadeOut(400);
break;
case 2: //MMC
$('#screen_1').fadeOut(400);
$('#screen_2').delay(400).fadeIn(400);
$('#screen_3').fadeOut(400);
break;
case 3: //BLOG
$('#screen_1').fadeOut(400);
$('#screen_2').fadeOut(400);
$('#screen_3').delay(400).fadeIn(400);
break;
default: //최초 접속시 나타날 화면 애니메이션
$('#screen_1').hide().delay(400).fadeIn(800);
$('#screen_2').hide();
$('#screen_3').hide();
}
}
</script>
</head>
<body>
<header id="header">
<br/>
<h1><a href="https://project-unit.tistory.com/">UNIT</a></h1>
</header>
<table id="menu" class="fullWidth">
<thead>
<td><input type="button" value="Main" onclick="screenSelection(1)"/></td>
<td><input type="button" value="MMC" onclick="screenSelection(2)"/></td>
<td><input type="button" value="Blog" onclick="screenSelection(3)"/></td>
</thead>
</table>
<!-- MAIN -->
<div id="screen_1">
<iframe id="bgm" src="https://www.youtube.com/embed/playlist?list=PLSGdYLt-DLMUb6kYq5w0qA6gLvplRAptE&autoplay=1" frameborder="0"></iframe>
<div class="bgmControl">
BGM Player
<input type="button" class="button" id="bgmOff" name="bgm" value="Show" onclick="bgmDrawer(1)"/>
<input type="button" class="button" id="bgmOn" name="bgm" value="Hide" onclick="bgmDrawer(2)"/>
</div>
<!--소개글-->
<div>
<div class="content">
<h2>What is UNIT?</h2>
<p>Unit is a team founded by 3 highschool students. Unit stands for 'United IT' as we mainly focus on learning how to provide Web Services, and creating UCCs.</p>
<h2>Member of UNIT</h2>
<ul>
<li>김동주</li>
<li>이현오</li>
<li>박종운</li>
<li>이진호</li>
<li>김법기</li>
<li>최재원</li>
</ul>
</div>
</div>
</div>
<!-- MMC -->
<div id="screen_2">
<h3>FRONT</h3>
<div id="seatStatus" class="">
<form action="https://project-unit.tistory.com/">
<table class="seatTable fullWidth fullHeight">
<!-- 좌석 배치표 -->
<script> //row = 행, column = 열 - 직접 설정 가능
var row = 9;
var column = 16;
for(i=0;i<=row;i++){
document.write('<tr class="sideCell">');
if(i==0){ //맨 윗줄의 숫자열
document.write('<td></td>');
for(j=1;j<=(column/2);j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%">'+j+'</td>');
}
document.write('<td class="hallwayCell"></td>'); //중앙 복도
for(;j<=column;j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%">'+j+'</td>');
}
document.write('<td class="sideCell"></td>');
}
else{ //좌석 박스
document.write('<td class="sideCell">'+i+'</td>');
for(j=1;j<=(column/2);j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%"><label class="seatRadio" for="seat_'+j+i+'">o</lable><input type="radio" name="seat" id="seat_'+j+i+'" value="'+j+','+i+'"/></td>');
}
document.write('<td class="hallwayCell"></td>');
for(;j<=column;j++){
document.write('<td class="seatCell" style="width:'+(80/column)+'%"><label class="seatRadio" for="seat_'+j+i+'">o</lable><input type="radio" name="seat" id="seat_'+j+i+'" value="'+j+','+i+'"/></td>');
}
document.write('<td class="sideCell"></td>');
}
document.write('</tr>');
}
</script>
</table>
<input type="submit" value="제출"/>
</form>
</div>
</div>
<!-- BLOG -->
<div id="screen_3">
<br/>
<a href="/admin"><h3>관리자 페이지</h3></a><br/>
<a href="http://cfs.tistory.com/custom/blog/211/2113935/skin/images/logs.html"><h3>4월 활동기록</h3></a><br/>
<a href="http://cfs.tistory.com/custom/blog/211/2113935/skin/images/sub.html"><h3>핵 초창기 사이트 모습</h3></a>
<s_article_rep>
<div class="entry">
<div class="article">
</div>
</div>
</s_article_rep>
</div>
<script>
//디버그, 수정할 때 이 값을 변경하면서 새로고침하여 갱신된 내용을 간편하게 확인 할 수 있음 (0=default, 1=main, 2=mmc, 3=blog)
screenSelection(3)
</script>
</body>
</html>
접기
</div>
</div>
</s_article_rep>
</div>
<script>
//디버그, 수정할 때 이 값을 변경하면서 새로고침하여 갱신된 내용을 간편하게 확인 할 수 있음 (0=default, 1=main, 2=mmc, 3=blog)
screenSelection(3)
</script>
</body>
</html>
접기 