홍준혁

Maeily-메인화면 구현 및 이동 본문

팀프로젝트/B1ND_Maeily

Maeily-메인화면 구현 및 이동

홍준혁 [Hong-JunHyeok] 2020. 9. 16. 15:04
728x90

저번에 로그인폼을 만들었으니 이제 로그인 버튼을 누르면 메인화면으로 이동할 수 있도록 코드를 작성하였다.

 

먼저 Vue를 이용해서 새로고침을 방지하는 코드를 작성하였고 methods에 메인화면으로 이동하는 코드를 추가해 주었다.

new Vue({
                el: ".login_wrap",
                methods: {
                    goto_main() {
                        window.open("/main/main.html", "_self");
                    },
                },
            });

이 goto_main을 

v-on:submit.prevent="goto_main"

submit이벤트가 발생할때 새로고침을 방지하는 prevent수식어를 사용하고 goto_main의 함수를 실행하라는 

내용이다.

 

그래서 로그인 버튼을 누르면 

로그인화면 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

메인화면

위에 메인화면은 설계정도만 해놓았다.

html 코드는 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Meaily</title>
        <link rel="stylesheet" href="./main.css" />
    </head>
    <body>
        <div class="header">
            헤더부분입니다.
            <div class="logo"></div>
        </div>
        <div class="body">
            바디부분입니다.
            <div class="today_schedule"></div>
            <div class="school_schedule"></div>
            <div class="our_schedule"></div>
            <div class="my_profile"></div>
            <div class="meal_info"></div>
        </div>
        <div class="footer">푸터부분입니다.</div>
    </body>
</html>

 

이렇게 작성을 했다

메인화면의 서비스 내용은

 

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

홈(메인)화면

 사용자 프로필(아래 참조)
채널(아래 참조)
개인 캘린더(아래 참조)
급식

 

 

먼저 기존에 있던 Maeily 프로토타입을 보면 

매일리 프로토타입

이런 식이다.  

프로토타입에 맞춰서 css로 틀을 좀 꾸며주면

프로토타입 기반으로 만든 레이아웃

이런 모양이 완성되었다.

사실 레이아웃 구성을 못해서 코드가 정말 더럽다.

그래도 구현을 했다는 것에 의미를 두고 div 간의 간격도 띄어보고 형태를 갖춰보도록 하겠다.

margin으로 간격을 맞추었다

header와 길이를 맞추기 위해서 width값도 조절해주었다.

근데 프로토타입을 보니까 margin값이 더 들어간 것 같다.

그래서 margin : 20px;로 설정해주고 width와 height를 조절해주었다.

최종으로 만들어진 프로토타입...아마도?

 

그리고 글 쓰면서 footer는 쓸 곳이 없어 보여서 지웠다.

 

다음에는 레이아웃을 설계했으니 기능을 넣어야겠다.

728x90

'팀프로젝트 > B1ND_Maeily' 카테고리의 다른 글

Maeily-메인화면 기능추가 및 꾸미기(1)  (0) 2020.09.16
Maeily-로그인 기능 구현해보기(2)  (0) 2020.09.15
Maeily-로그인 기능 구현해보기(1)  (1) 2020.09.15
'팀프로젝트/B1ND_Maeily' Related Articles more
Comments