- 싸이월드 실습 4 -
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Game</title>
<link href="./styles/game.css" rel="stylesheet">
<script src="./game.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrapper_header">
<div class="header_title">
<div class="title">GAME</div>
<div class="subtitle">TODAY GAME</div>
</div>
<div class="divideLine"></div>
</div>
<div class="game_container">
<img src="./images/word.png">
<div class="game_title">끝말잇기</div>
<div class="game_subtitle">제시어 : <span id="question">사과</span></div>
<div class="game_word">
<input class="word" id="word" placeholder="단어를 입력하세요">
<button class="search" onclick="wordGame()">검색</button>
</div>
<div class="result" id="result">결과!</div>
</div>
<div class="game_container">
<img src="./images/lotto.png">
<div class="game_title">Lotto</div>
<div class="game_subtitle"><span>버튼을 누르세요.</span></div>
<div class="lotto_num">
<span class="num1">3</span>
<span class="num2">9</span>
<span class="num3">15</span>
<span class="num4">25</span>
<span class="num5">37</span>
<span class="num6">55</span>
</div>
<button class="lotto_button">Button</button>
</div>
</div>
</body>
</html>const wordGame = () => {
let question = document.getElementById("question").innerText
let word = document.getElementById("word").value
let firstword = word[0]
let lastword = question[question.length - 1]
if(firstword === lastword){
document.getElementById("result").innerText = "통과"
document.getElementById("question").innerText = word
document.getElementById("word").value = ""
}else{
document.getElementById("result").innerText = "오답"
document.getElementById("word").value = ""
}
}
싸이월드 4일차 끝말잇기
새로 추가한 game.js 파일.
끝말잇기 기능 중 답이 틀릴 경우 '오답'이라는 텍스트를 출력하고 올바른 답을 입력할 경우 '통과'라는 텍스트와 함께 제시어가 입력한 단어로 변경하게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Jukebox</title>
<link href="./styles/jukebox.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="wrapper_header">
<div class="header_title">
<div class="title">BGM</div>
<div class="subtitle">TODAY CHOICE</div>
</div>
<div class="divideLine"></div>
<div class="wrapper_album">
<div class="album">
<img src="./images/jukebox-1.jpg">
<div class="album_title">Supernova</div>
<div class="album_subtitle">aespa</div>
</div>
<div class="album">
<img src="./images/jukebox-2.jpg">
<div class="album_title">클락션 (Klaxon)</div>
<div class="album_subtitle">(여자)아이들</div>
</div>
<div class="album">
<img src="./images/jukebox-3.jpg">
<div class="album_title">Love wins all</div>
<div class="album_subtitle">아이유(IU)</div>
</div>
</div>
</div>
<div class="wrapper_body">
<div class="header_title">
<div class="title">BGM</div>
<div class="subtitle">TODAY CHOICE</div>
</div>
<table class="album_table">
<tr>
<th class="table_checkbox"><input type="checkbox"></th>
<th class="table_num">번호</th>
<th class="table_song">곡명</th>
<th class="table_singer">아티스트</th>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">1</td>
<td class="table_song">Supernova</td>
<td class="table_singer">aespa</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">2</td>
<td class="table_song">클락션 (Klaxon)</td>
<td class="table_singer">(여자)아이들</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">3</td>
<td class="table_song">Love wins all</td>
<td class="table_singer">아이유(IU)</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">4</td>
<td class="table_song">How Sweet</td>
<td class="table_singer">NewJeans</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">5</td>
<td class="table_song">Magnetic</td>
<td class="table_singer">아일릿(ILLIT)</td>
</tr>
</table>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
padding: 20px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.wrapper_header {
width: 100%;
display: flex;
flex-direction: column;
align-items: space-between;
}
.header_title {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.title {
font-size: 13px;
font-weight: 700;
color: #55B2D4;
}
.subtitle {
font-size: 8px;
font-weight: 400;
padding-left: 5px;
}
.divideLine {
width: 100%;
border-top: 1px solid gray;
}
.wrapper_album {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px;
}
.album{
width: 120px;
height: 158px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.album_title {
font-size: 11px;
font-weight: 700;
color: #0f465e;
}
.album_subtitle {
font-size: 10px;
font-weight: 700;
color: #999999;
}
.wrapper_body {
width: 100%;
}
.album_table {
width: 100%;
padding-top: 9px;
border-spacing: 0px;
}
.album_table th {
height: 20px;
font-size: 10px;
color:gray;
background-color: #eeeeee;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
.album_table td {
height: 20px;
font-size: 10px;
color: #0f465e;
border-bottom: 1px dotted #999999;
}
.table_checkbox {
width: 5%;
text-align: center;
}
.table_num {
width: 10%;
text-align: center;
}
.table_song {
width: 45%;
text-align: start;
}
.table_singer {
width: 30%;
text-align: start;
}
싸이월드 4일차 BGM
새로 추가한 BGM 페이지
상단에 앨범 이미지와 하단에는 앨범 테이블을 보여주는 페이지를 작성하였다.
테이블 같은 경우
<table class="album_table">
<tr>
<th class="table_checkbox"><input type="checkbox"></th>
<th class="table_num">번호</th>
<th class="table_song">곡명</th>
<th class="table_singer">아티스트</th>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">1</td>
<td class="table_song">Supernova</td>
<td class="table_singer">aespa</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">2</td>
<td class="table_song">클락션 (Klaxon)</td>
<td class="table_singer">(여자)아이들</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">3</td>
<td class="table_song">Love wins all</td>
<td class="table_singer">아이유(IU)</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">4</td>
<td class="table_song">How Sweet</td>
<td class="table_singer">NewJeans</td>
</tr>
<tr>
<td class="table_checkbox"><input type="checkbox"></td>
<td class="table_num">5</td>
<td class="table_song">Magnetic</td>
<td class="table_singer">아일릿(ILLIT)</td>
</tr>
</table>
위와 같이 <th> 태그와 <tr> 태그를 사용함으로 테이블의 헤드 부분과 내용 부분을 나눈다.
CSS 또한 <th> 와 <tr> 태그를 사용하려면 html에서 class 명을 작성해주는 것이 아니라
.(테이블 클래스명) th {
height: 20px;
font-size: 10px;
....
}
.(테이블 클래스명) tr {
height: 20px;
font-size: 10px;
....
}
위와 같이 사용하면 된다.
'프론트엔드 공부 > 싸이월드 실습' 카테고리의 다른 글
| 07일차 프론트엔드 공부 - 싸이월드 실습 5 (2) | 2024.09.04 |
|---|---|
| 05일차 프론트엔드 공부 - 싸이월드 실습 3 (1) | 2024.09.04 |
| 05일차 프론트엔드 공부 - 싸이월드 실습 2 (0) | 2024.09.04 |
| 03일차 프론트엔드 공부 - 싸이월드 실습1 (0) | 2024.09.04 |