HTML접기
<!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/>
</div>
<script>
//디버그, 수정할 때 이 값을 변경하면서 새로고침하여 갱신된 내용을 간편하게 확인 할 수 있음 (0=default, 1=main, 2=mmc, 3=blog)
screenSelection(0)
</script>
</body>
</html>
HTML접기 CSS 접기
@charset "UTF-8";
.marker{
border: 1px solid red;
}
/* 공통영역 */
body{
margin:0;
color:#ffffff;
font-family: Arial;
font-size:12px;
background-color:#000000;
}
a{
color: #ffffff;
text-decoration:none;
}
img{
width: 100%;
height: 100%;
}
iframe{
width: 100%;
height: 240px;
}
input{
color:#ffffff;
background-color:transparent;
border:0;
}
.fullWidth{
width:100%;
}
.fullHeight{
height:100%;
}
/* 헤더 영역 */
header h1 {
margin:0;
text-align: center;
}
#menu thead td{
text-align:center;
}
ul{
list-style:none;
padding-left:12px;
}
/* MAIN */
.bgmControl{
float:right;
}
.content{
padding:12px 8px 0;
text-align:justify;
}
/* MMC */
#screen_2{
text-align:center;
}
.seatTable{
border:0;
}
.seatCell{
text-align:center;
}
.sideCell{
width:8%;
text-align:right;
}
.hallwayCell{
width:4%;
}
.seatRadio{
margin:0;
border:1px solid red;
background-color:white;
}
input[type=radio]{
display:none;
}
/* BLOG */
#screen_3{
text-align:center;
}
#contentWrap{
text-align:left;
padding:20px;
}
CSS 접기 