반응형
3일차 복습
- 6자리 랜덤값 생성하기
String( // 문자열로 형변환
Math.floor( // 소숫점 아래 버림
Math.random()*1000000 // 0~1사이 랜덤값 생성 및 6자리로 표현
)
). padStart(6,"0") // 문자열 길이 지정, 앞에 " "안의 문자 넣음
함수
- 함수 작성방법 3가지
- 선언식
function hello() {
alert("안녕하세요")
}
- 표현식
const hello=function() {
alert("안녕하세요")
}
- 화살표함수
const hello=()⇒ {
alert("안녕하세요")
}
- 함수 실습
버튼을 누르면 인증번호를 생성하는 함수 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>함수</title>
<script>
function cer() {
const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0")
document.getElementById("number").innerText = token
}
</script>
</head>
<body>
<span id="number">000000</span>
<button onclick="cer()">인증번호 전송</button>
</body>
</html>
onclick="함수명()"
: 버튼을 클릭했을 때 함수 실행
document.getElementById("설정한 id이름").innerText
: 해당 html 파일에서. 설정한 id이름에서. text값을 가져온다
웹사이트의 구조
- 브라우저란?
앱(application)
- 브라우저의 기능?
html, css, js를 해석하는 것 // 랜더링
→ 받아온 데이터를 읽고 해석하는 것!
Q. 개발자 코드는 모든 브라우저에서 읽힐 수 있는가?
Q. 각각 다른 버전에서도 읽힐 수 있는가?
A. NO!
ex) 이 프로그램은 xxx브라우저에 최적화되어있습니다.
- 웹앱 서비스의 기본 구조
각 기능이 필요할 때마다 기능에 맞는 API가 존재해야한다.
내장함수
- 시간지연함수
setTimeout(함수, 초(ms))
⚠️ 1ms = 1s
- 시간반복함수
setInterval(함수, 초(ms))
clearInterval(id값)
- 3분 타이머 실습
setInterval(function() {
const minutes = Math.floor(time / 60)
const seconds = time % 60
if (time >= 0) {
console.log(minutes + ":" + seconds)
time = time - 1
}
}, 1000)- 인증번호 실습 (버튼을 누르면 랜덤숫자 생성 및 타이머 실행)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>함수</title>
<script>
let isActive = false
const t=()=> {
if (isActive === false) {
isActive = true
const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0")
document.getElementById("number").innerText = token
let time = 180
setInterval(function() {
const minutes = Math.floor(time / 60)
const seconds = time % 60
if (time >= 0) {
document.getElementById("time").innerText = minutes + ":" + String(seconds).padStart(2,"0")
time = time - 1
}
}, 1000)
}
}
</script>
</head>
<body>
<span id="number">000000</span>
<button onclick="t()">인증번호 전송</button>
<div id="time">0</div>
</body>
</html>
Cyworld
jukebox.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>쥬크박스</title>
<link href="styles/jukebox.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="wrapper">
<div class="wrapper__header">
<div>
<span class="sub-title">추억의 BGM</span>
<span class="sub-description">TODAY CHOICE</span>
</div>
<div class="divider"></div>
<div class="album-wrapper">
<div class="album-wrapper__item">
<img class="album-image" src="images/jukebox-01.png">
<div class="album-song">Y(Please Tell Me Why)</div>
<div class="album-singer">프리스타일</div>
</div>
<div class="album-wrapper__item">
<img class="album-image" src="images/jukebox-02.png">
<div class="album-song">눈의 꽃</div>
<div class="album-singer">박효신</div>
</div>
<div class="album-wrapper__item">
<img class="album-image" src="images/jukebox-03.png">
<div class="album-song">사랑했나봐</div>
<div class="album-singer">윤도현</div>
</div>
</div>
</div>
<div class="wrapper__body">
<div>
<span class="sub-title">추억의 BGM</span>
<span class="sub-description">TODAY CHOICE</span>
</div>
<table class="album-table">
<tr>
<th class="album-table-checkbox"><input type="checkbox" /></th>
<th class="album-table-number">번호</th>
<th class="album-table-song">곡명</th>
<th class="album-table-singer">아티스트</th>
</tr>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">1</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> 눈의 꽃</td>
<td class="album-table-singer">박효신</td>
</tr>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">2</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> 사랑스러워</td>
<td class="album-table-singer">김종국</td>
</tr>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">3</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> 내사람: Partner For Life</td>
<td class="album-table-singer">SG워너비</td>
</tr>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">4</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> Love Love Love</td>
<td class="album-table-singer">에픽하이</td>
</tr>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">5</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> 애인...있어요</td>
<td class="album-table-singer">이은미</td>
</tr>
</table>
<div class="album-table-footer">
<div class="album-table-footer__left">
<button>듣기</button>
</div>
<div class="album-table-footer__center">
| <span>1</span> |
</div>
<div class="album-table-footer__right">
<button>이동</button>
<button>배경음악 등록</button>
</div>
</div>
</div>
</div>
</body>
</html>jukebox.css
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
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: 464px;
}
.wrapper__header .divider {
margin: 8px 0px;
border-bottom: 1px solid gray;
}
.wrapper__body {
width: 464px;
}
.wrapper__body .sub-title {
margin-bottom: 8px;
}
.wrapper__body .video {
width: 100%;
}
.sub-title {
font-size: 13px;
font-weight: bold;
color: #55B2D4;
}
.sub-description {
font-size: 8px;
}
.album-wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 12px;
}
.album-wrapper__item .album-image {
width: 120px;
height: 120px;
}
.album-wrapper__item .album-song {
font-size: 11px;
font-weight: bold;
color: #0F465E;
display: flex;
flex-direction: row;
justify-content: center;
}
.album-wrapper__item .album-singer {
font-size: 10px;
font-weight: bold;
color: gray;
display: flex;
flex-direction: row;
justify-content: center;
}
.album-table {
border-spacing: 0px;
width: 100%;
padding-top: 8px;
}
.album-table th {
height: 20px;
font-size: 10px;
font-weight: bold;
color: gray;
background-color: #EEEEEE;
padding-top: 5px;
border-top: 1px solid gray;
border-bottom: 1px dashed gray;
}
.album-table td {
height: 20px;
font-size: 10px;
color: #0F465E;
border-bottom: 1px dashed gray;
}
.album-table-checkbox {
width: 5%;
text-align: center;
}
.album-table-number {
width: 10%;
text-align: center;
}
.album-table-song {
width: 45%;
text-align: left;
}
.album-table-singer {
width: 30%;
text-align: left;
}
.arrow {
width: 10px;
height: 10px;
text-align: center;
color: red;
border: 1px solid gray;
border-radius: 2px;
}
.album-table-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 10px;
padding-top: 10px;
}
.album-table-footer button {
font-size: 8px;
color: gray;
padding: 3px;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 57.43%, #DDDDDD 100%);
border: 1px solid gray;
border-radius: 5px;
}
.album-table-footer__center span {
color: red;
}반응형
'Review' 카테고리의 다른 글
| [후기] 항해99 수료 후기 - 항해99 과정 및 솔직 후기 (10) | 2022.08.18 |
|---|---|
| [후기] 메가 IT 아카데미 웹프로그래밍 과정, 6개월 간의 여정 회고 (0) | 2022.04.19 |
| [코드캠프] 프리캠프 3일차 (0) | 2021.10.27 |
| [코드캠프] 프리캠프 2일차 (0) | 2021.10.27 |
| [코드캠프] 프리캠프 1일차 (0) | 2021.10.26 |
