Front-project 1일차

 

프로젝트의 주제는 특정팀의(KT위즈) 야구사이트를 나만의 아이디어로 만들기로했다 (물론 좋은 공부가될부분은 모방을 한부분도있을것이다) 그래서 일단 피그마를 짜기로했다 

 

baseball – Figma

Figma

현재까지는 메인페이지와 선수소개페이지 티켓구매 페이지만 구성하기로했고 추후에 시간이 남으면 다른페이지도 도전할예정이다. 

 

일단 메인페이지의 구성요소를 본다면 네비바, 메인, footer로 구성이 되어있는데 메인에는 선수소개버튼, 실시간 경기순위, 경기일정, 등 여러 버튼들을 만들어서 구성할 예정이다 구성은 다음과 같다. 

    <div id="container">
        <div class = "backImg">
            <div class="nav">
                <ul class="subnav">
                    <li><a href="">HOME</a></li>
                    <li>
                        <a href="">PLAYER</a>
                        <ul>
                            <li>감독/코치</li>
                            <li>내야수</li>
                            <li>외야수</li>
                            <li>포수</li>
                            <li>투수</li>
                        </ul>
                    </li>
                    <li><a href="">MEDIA</a></li>
                    <li><a href="">STORE</a></li> 
                    <li><a href="">TICKET</a></li>
                </ul> 
                <!-- <header class = "header">
                    <div>이미지보일부분</div>
                </header> -->
            </div>
            <div id = "main">
                <div class = "title">KT위즈는 우승을 향햐 달려갑니다</div>
                <div class = "main">
                    <div class = "item item2">
                        <div>리그순위</div>
                        <table class = "table">
                            <thead>
                                <th>순위</th>
                                <th>팀이름</th>
                                <th>승</th>
                                <th>패</th>
                                <th>승률</th>
                            </thead>
                            <tbody>
                                <td>5</td>
                                <td>KT위즈</td>
                                <td>7</td>
                                <td>4</td>
                                <td>40%</td>
                            </tbody> 
                        </table>
                    </div>
                    <div class = "item item3">티켓구매하기</div>
                    <div class = "item item4">선수소개</div>
                    <div class = "item item1">경기일정</div>
                </div>
                <div class = "news">
                    <div class = "KTNEWS">KT NEWS</div>
                </div>
            </div> 
        </div>
    </div>
    <div id = "container2">

그리고 피그마를보면 메인부분의 버튼들이 제각각의 크기로 나란히 정렬이 되어있는데 css의 grid특성을 사용하여 구성하였다. 내가참조한 사이트는 이부분이다. 

CSS Grid Item (w3schools.com)

CSS Grid Item

이 그리드를 사용하여 화면의 기본구성요소를 맞친상태이고 그리고 웹을 반응형으로하기위해서 크기조정등을 마친상태이다. 

그리고 메뉴바도 생성을 시켰고 내일은 드롭다운을 구현할 예정이다. 

중간과정부분인데 앞으로더 발전시킬 예정이다