채팅앱 만들기 1. login page 만들기

자 본격적으로 시작을 해보자 login page를 만들도록 하겠다

원래는 UI디자인을 해두고 해야하지만 그냥 막 하도록 하자

먼저 프로젝트를 새로 만들고

ionic start chat_dev 으로 생성을 해주고

로그인 페이지를 추가한다

ionic g page login

이후 login 페이지를 lazy loading하도록 설정을

rootPage:string = 'LoginPage';으로 해주자

자 여기서 LoginPage는 새로생성한 pages/login/login.ts 안에 있는 class명으로 지정해야 한다

Ctrl + ` (1 옆에있는)을 누르면 터미널이 활성되고 해당폴더에 cmd창이 바로 열린다

거기서 ionic serve -o를 해서 페이지를 확인하자

갤럭시 S5 기준으로 보이는 뷰이고

아래와 같이 수정을 하자

login.html

<!--

Generated template for the LoginPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

-->

<!-- <ion-header>

<ion-navbar>

<ion-title>login</ion-title>

</ion-navbar>

</ion-header> -->

<ion-content padding class="background" overflow-scroll="false">

<img src="assets/img/logo.png" alt="Logo" class="logo">

<ion-card>

<ion-card-content>

<ion-item>

<ion-label floating>Email Address</ion-label>

<ion-input type="text"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password"></ion-input>

</ion-item>

</ion-card-content>

<ion-row >

<button ion-button>Register</button>

<button ion-button>Login</button>

</ion-row>

</ion-card>

</ion-content>

login.scss

// page-login {

// }

.background {

background-color: #ffe900;

}

.logo {

margin: 0 auto;

padding-top: 20%;

padding-bottom: 20%;

display: block;

width: 40%;

height: auto;

}

ion-card ion-row {

padding: 10px;

float: right;

}

로고파일은

www/assets/img/logo.png 로 저장하도록 하자

으로 했다 카카오툭....

그러면 아래와 같이 화면이 나올것이다

오늘은 과제를 해야하니 여기까지 하고;;

다음시간에 register 페이지를 만들고 가입신청을 받아보도록 하겠다