티스토리 뷰

안드로이드/코드

안드로이드 웹뷰 사용해보기 1 : 웹 사이트 제작

알렌보이스 2022. 4. 11. 21:52
728x90

평소에 웹뷰는 앱 내에서 인터넷 보여주는 용도로만 사용하고 그 외는 잘 사용하지 않았었는데
이번에 학습하면서 조금 더 깊게 알아보려고 합니다.

1. 학습 목표

  • 웹뷰 기본 사용 법
  • 웹 <-> 안드로이드 데이터 관리
  • 웹뷰 속성들 알아보기

 

이번 예제에서는 2가지 페이지를 제작해볼 예정입니다.
다만 웹이 몇 년 만에 하다 보니 javascript나 css 부분은 짜는 방식을 많이 까먹었습니다 ㅎㅎ..

2. HTML 작성

1) 로그인 화면

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>안드로이드 웹뷰 로그인화면</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <form action="select.html">
                <h3>로그인</h3>
                <div class="inputBox">
                    <span>ID</span>
                    <div class="box">
                        <div class="icon"><ion-icon name="person"></ion-icon></div>
                        <input id="login_id" type="text">
                    </div>
                </div>
                <div class="inputBox">
                    <span>PassWord</span>
                    <div class="box">
                        <div class="icon"><ion-icon name="lock-closed"></ion-icon></div>
                        <input id="login_pw" type="password">
                    </div>
                </div>
                <div class="inputBox">
                    <div class="box">
                        <input type="button" value="로그인" onclick="login()">
                    </div>
                </div> 
            </form>
        </div>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    </body>
</html>

2) 캐릭터 선택 화면

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>선택</title>
        <link rel="stylesheet" href="style2.css">
        
    </head>
    <body>
        <div class="container">
            <input type="radio" id="select1" name="select" value="1">
            <input type="radio" id="select2" name="select" value="2">
            <input type="radio" id="select3" name="select" value="3">
            <label id="label1" class="box" for="select1">
                <img src="001.png">
                <span>이상해씨</span>
            </label>
            <br><br>
            <label id="label2" class="box" for="select2">
                <img src="004.png">
                <span>파이리</span>
            </label>
            <br><br>
            <label id="label3" class="box" for="select3">
                <img src="007.png">
                <span>꼬부기</span>
            </label>
        </div>
        <button id="ok" onclick="itemSelected()">선택 완료</button>
    </body>
</html>

 

3. CSS 작성

1) 로그인 화면

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2f363e;
}
.container
{
    position: relative;
    width: 350px;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f363e;
    box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
    10px 10px 70px rgba(0, 0, 0, 0.25),
    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
    border-radius: 30px;
    padding: 50px;
}
.container h3
{
    color: #fff;
    font-weight: 600;
    font-size: 2em;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.inputBox
{
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}
.inputBox span{
    display: inline-block;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75em;
    border-left: 4px solid #fff;
    padding-left: 4px;
    line-height: 1em;
}
.inputBox .box
{
    display: flex;
}
.inputBox .box .icon
{
    position: relative;
    min-width: 40px;
    height: 40px;
    background-color: #ff2c74;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    color: #fff;
    font-size: 1.15em;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}
.inputBox .box input
{
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
    inset 2px 2px 5px rgba(255, 255, 255, 0.35),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}
.inputBox .box input[type="button"]
{
    background: #1f83f2;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 10px;
}
.inputBox .box input[type="button"]:hover
{
    filter: brightness(1.1);
}

2) 캐릭터 선택 화면

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #262626;
    padding: 30px 0 100px 0;
}
#select1, #select2, #select3
{
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}
.container
{
    position: relative;
    display: block;
    /*-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, #0004);*/
}
.container .box
{
    position: relative;
    width: 280px;
    height: 360px;
    margin: 0 20px;
    border-radius: 20px;
    background: linear-gradient(45deg, #09c14f 25%,
    #444 25%, #444 50%, #09c14f 50%, #09c14f 75%,
    #444 75%, #444 100%);
    background-size: 40px 40px;
    filter: grayscale(1);
    animation: animateBg 1s linear infinite;
    animation-play-state: paused;
    transition: filter 1s;
    display: flex;
    justify-content: center;
}
.container .box span
{
    position: absolute;
    bottom: 30px;
    background: white;
    border-radius: 30px;
    padding: 5px 20px;
    border: 2px solid #444;
    font-weight: 700;
}
#label2
{
    background: linear-gradient(135deg, #ff742a 25%,
    #444 25%, #444 50%, #ff742a 50%, #ff742a 75%,
    #444 75%, #444 100%);
    background-size: 40px 40px;
}
#label3
{
    background: linear-gradient(45deg, #2da2ff 25%,
    #444 25%, #444 50%, #2da2ff 50%, #2da2ff 75%,
    #444 75%, #444 100%);
    background-size: 40px 40px;
}
@keyframes animateBg
{
    0%
    {
        background-position: 0;
    }
    100%
    {
        background-position: 40px;
    }
}
.container .box img
{
    position: absolute;
    bottom: 20px;
    height: 100%;
    transition: height 0.5s;
}
#ok
{
    position: fixed;
    bottom: 30px;
    background: white;
    padding: 10px 20px;
    border-radius: 100px;
    border: 3px solid black;
    font-weight: 800;
}

 

4. 결과 화면

1) 로그인 화면

2) 캐릭터 선택 화면

제가 웹쪽은 오랜만이기도 하고 하는 김에 이쁘게 만들고 싶어서 YouTube 영상 보면서 만들어봤습니다.

자료 출처 : 

https://www.youtube.com/watch?v=MnLVEMsbJTI 

https://www.youtube.com/watch?v=R4rccU8YQjQ 

 

5. 안드로이드 프로젝트 생성 및 제작한 웹페이지 넣기

다음과 같이 assets 폴더를 생성 후 만들어둔 html, css와 이미지들을 넣어주면
이번 예제에서 사용할 웹사이트 준비는 완료가 됩니다!

첫 번째 글은 이걸로 마치고 다음 글에서 본격적으로 웹뷰를 사용해보겠습니다.

https://alanboyce.tistory.com/11

 

안드로이드 웹뷰 사용해보기 2 : 웹뷰 적용하기

2022.04.11 - [안드로이드/코드] - 안드로이드 웹뷰 사용해보기 1 : 웹 사이트 제작 안드로이드 웹뷰 사용해보기 1 : 웹 사이트 제작 평소에 웹뷰는 앱 내에서 인터넷 보여주는 용도로만 사용하고 그

alanboyce.tistory.com

 

728x90
저작자표시

'안드로이드 > 코드' 카테고리의 다른 글

도로명 주소 개발센터 API 사용해 보기 2:DI + Hilt 사용해 보기  (0) 2022.05.07
도로명 주소 개발센터 API 사용해보기1 : Api활용 신청, Retrofit  (0) 2022.04.28
안드로이드 서비스 사용해보기  (0) 2022.04.20
안드로이드 웹뷰 사용해보기 3: 각종 속성들 알아보기  (0) 2022.04.16
안드로이드 웹뷰 사용해보기 2 : 웹뷰 적용하기  (0) 2022.04.13
댓글