로또번호 생성 웹사이트 무료로 만들기 4

이번 글에서는 저번 글에 이어서 navigator와 footer까지 마쳤으니 가장 중요한 main부분을 작성할 것이다.

index.html의 main 부분은 자동번호 받기를 구현할 생각이다.

네이버의 918회차

다음은 네이버의 918회차 당첨번호의 틀이다.

여기에서 중요한 점은 숫자 1~9 10~19 20~29 30~39 40~45까지 다른 색깔로 보여줘야한다는 것이다.

우리는 이 작업을 위해서 javascript코드를 작성해야한다.

우선 전체를 감쌀 div를 생성해주고 윗칸( 아랫칸(숫자들모임) div를 나눠줘야한다.

<div class="main">
        <div class="numberdiv">
            <div class="top-div">
                <div class="top-div-name">오늘의번호</div>
            </div>
            <div class="numberset">
                <div class="lottocircle"><p class="value">5</p></div>
                <div class="lottocircle"><p class="value">10</p></div>
                <div class="lottocircle"><p class="value">21</p></div>
                <div class="lottocircle"><p class="value">37</p></div>
                <div class="lottocircle"><p class="value">41</p></div>
                <div class="lottocircle"><p class="value">42</p></div>
            </div>
        </div>
</div>

다음과 같이 나눠줬다. 그 다음으로는 숫자에 따라 div의 css를 바꾸는 javascript를 프로그래밍해야한다.

정상적으로 작동하는지 확인하기 위해 우선 value들을 임의로 설정하였다.

후에는 랜덤을 이용해서 숫자를 div 안의 value로 넣을 것이다.

<script> 
        var number = document.getElementsByClassName("lottocircle");
        for (var i = 0 ; i < number.length ; i++) {
            if(parseInt(number[i].textContent)>=40){
                number[i].style="background-color:#8b00ff";
            }else if(parseInt(number[i].textContent)>=30){
                number[i].style="background-color:#146eb4";
            }else if(parseInt(number[i].textContent)>=20){
                number[i].style="background-color:#c1d82f";
            }else if(parseInt(number[i].textContent)>=10){
                number[i].style="background-color:#fbb034"; 
            }   
            else{
                number[i].style="background-color:#ff0000";  
            }
                
            
        }
</script> 

javascript 코드는 간단하다 lottocircle이라는 classname을 가진 모든 elements를 가져온다.

그 다음 반복문을 통해 만약 값이 조건문에 해당한다면 해당 색깔로 style을 주는 것이다.

javascript까지 작성했으니 마지막으로 css로 꾸며주면된다.

div 박스는 최근들어서 완전 사각형보다 모서리에 살짝 둥근 처리를 해주는 것이 보기 좋다.

따라서 border-radius를 설정하였다. border-radius의 문제는 바깥쪽 div의 border-radius가 정해져도 안쪽의 div의 border-radius를 계산하지 않으면 밖으로 튀어나와 버린다.

따라서 우리는 안쪽 div의 border-radius까지 설정해줘야한다.

.main{
    height: auto !important;
}
.numberdiv{
    width:60%;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

main과 numberdiv를 설정한 내용이다.

우리는 안쪽 div인 top-div의 border-radius를 계산하여 넣어야한다.

.top-div{
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    box-sizing: border-box;
    line-height: 30px;
    background-color: #bc0024;
    color:white;
}

border-radius 설정 간단히 다음과 같이 하면 된다.

이제 나머지 class의 css 설정을 하면 된다.

.top-div-name{
    font-weight: bold;
    font-size: 15px;
    padding-left:10px;

}
.numberset{
    width:400px;
    margin-left:auto;
    margin-right:auto;
    display: flex;
}
.lottocircle{
    display: table;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: none;
    text-align: center;
    font-weight: bold;
    font-size:15px;
    margin-top:10px;
    margin-bottom: 10px;
    margin-left:15px;
    margin-right:15px;
}
.value{
    display:table-cell;
    vertical-align: middle;
}

이렇게 모든 설정을 하고 저장을 한 뒤 웹페이지를 키면 다음과 같은 화면이 나온다.

당첨번호 틀을 완성한 mainpage

드디어 당첨번호 틀을 완성하였다.

이번 글에서 목표가 mainpage를 완성하는 것이었지만, 아직 해야할 일이 많이 남았다.

다음 글에서는 랜덤을 이용하여 n개의 자동번호 받기를 만들어보겠다.