몰랐던 내용체크
-
document.write""''같은 따옴표 안에 넣어서 표시가능 -
class="ball ball1"중에서ball은 형태에 대해서 스타일속성을 지정했고ball1은 배경색에 대해서 스타일 속성을 지정했다.
-
if의 조건문에lotto.length < 6이라고 작성했어야 됐는데
lotto().length < 6이라고 작성했다
()는 무언가를 행동? 실행하는 함수일때 사용한다!!
lotto 는 배열일 뿐이니 그냥 lotto라고 사용하자
CSS 표시
- 나란히 배열
float: left;
margin-right: 6px;- 가로세로 60px 원
width: 60px;
height: 60px;
border-radius: 100%;- 글자 스타일 지정
line-height: 60px;
font-size: 28px;
text-align: center;
color: #fff;
font-weight: 500;
text-shadow: 0px 0px 3px rgba(73, 57, 0, .8);- 수직으로 가운데 정렬
line-height을 지정해주지 않으면
vertical-align: middle가 작동되지 않는다
vertical-align: middle;
line-height: 60px;그래서 둘의 상관관계를 찾기위해 검색을 했더니, 아래와 같은 블로그를 찾았다. 아직은 이해하기 어렵지만 보면 좋을 것 같다.
inline formatting context를 형성하는 주요한 역할
line-height와 vertical-align
출처 : https://wit.nts-corp.com/2017/09/25/4903
코드 결과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로또 번호 추첨기</title>
<!-- 외부스타일시트 추가 -->
<link rel="stylesheet" href="style.css" />
<!-- CSS 스타일속성 -->
<style>
.ball {
float: left;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 28px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
color: #fff;
font-weight: 500;
text-shadow: 0px 0px 3px rgba(73, 57, 0, .8);
margin-right: 6px;
}
.ball1 { background: #fbc400; }
.ball2 { background: #69c8f2; }
.ball3 { background: #ff7272; }
.ball4 { background: #aaa; }
.ball5 { background: #b0d840; }
.ball6 { background: #c7c7c7; }
</style>
</head>
<body>
<h1>로또 번호 추첨기</h1>
<script>
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
lotto.sort((a, b) => a - b);
// 화면에 보이도록 하는 코드 추가
document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
document.write("<div class='ball ball2'>" + lotto[1] + "</div>");
document.write("<div class='ball ball3'>" + lotto[2] + "</div>");
document.write("<div class='ball ball4'>" + lotto[3] + "</div>");
document.write("<div class='ball ball5'>" + lotto[4] + "</div>");
document.write("<div class='ball ball6'>" + lotto[5] + "</div>");
</script>
</body>
</html>
새로운 것을 도전하고 배운것을 정리하려 합니다.