Kivy 시작하기 5 (상단 바 버튼 만들기)
사용 버전: Python 3.6.8, Kivy 1.11.1
사용 프로그램: Atom 1.42.0 x64
이번 시간에는 상단 바를 만들어 보겠습니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdUul4cETqH12WsCqpqQKhAzFzHJnYrrEF1EcAIOeBn-JCc5rhRqw0SBdMj_n_0s_9-cvRUFhBiF_Vdegj4hC1QmUNLTXicmMUX-KP1K1LOsD4SVe-Y8AlzzwwCMkVPnIhhK6WEHw-Fc/s1600/1.png)
상단 바에는 Help와 About이 들어갑니다.
상단 바와 밑의 URL 부분을 2 등분하기 위해, 우리는 BoxLayout을 사용할 겁니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-PnWFd_FjtFZd43phg-xbr_kw7lN1mFaXDEXCxfPJ9EaW66GSMc2HJfBWivFWfscG1QQ8WfyB3c85xTNlUEqIrPKPXVhJkx0ljnmDE1FN8kHCZ0r_trOrhjoRNmmOmMT6wV5o_U6fKU/s1600/2.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WyGXBEidOFo6If59WG6LDWHhzkoWA9fr9GfQaCFhrhZ24vn5nKcx9bfxvpoWXAhIqaVRsFC-WMdB4h_CBC4eXFKE-zlGbgofPnJXhjz5N2OZKLFTJEKy2xiSLs07TNN6jz2P0EboDpA/s1600/3.png)
짜잔, 위와 아래로 나누어졌습니다.
자세히 보기 위해, 색깔을 넣어보겠습니다.
색깔은 canvas.before을 사용하여 넣을 수 있습니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVM3Syu5gMEdCSEoise1GCIArS3XckQP0PTapk_XLBM8wM0QPPttgsZFOg-hpksVba1dVI3RgJgoeO4UFILHL7WEkBWR9Bd2RBjDG2i33vJ6tY2jxMkoK7wZlRT_ALkRMMH-YHkLLVybk/s1600/4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ItNTWyw3i5rcAMgnOFLulUNolb36egHwbuT6c5f2Eb-o3MrO73-srB47eiLPAl29kmfcjRQSZVylDGC0313uVr2Q4ExhJvLn7QnOd6l9DXLjh4vTfgafamw9ixa9vEdGeV6RiuFGaFA/s1600/5.png)
그럼 이제, 위쪽 Hello world를 얇게 만들어야겠네요.
이때 사용하는 게, size_hint입니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGPumX6p1k9qBWt2G9axVnfqIepliRpl9k2roFWZ-g5PotjNFaDqxAa-c72ZwqtoNopO9VqKt6VdHGGSQO-pz77PulPMhiNlb-jf8PPEVMUhzZ9XFd98VLR7CEvjf0am01xrxqmc_i_FQ/s1600/6.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKVVvF1Mo78ZmbuwwWDTIHQco2Rcs_YjPL5RXTaGMn5o1Mmpg_j8K6XwtuNBADIxb_GhDnmCeEzKG4xjX0Y6NlIdj5t9rLb-sBjbj4px5qyNaTpwV9lwX95vvwBco59A_0d2HRaVYAk8/s1600/7.png)
이제 버튼을 만들 차례입니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxdBoASL8V1XKPAuqrJyBVJvO6jQw8vu75MMNAFOa8LpwtNIovdzmdsX5rxIT080XToEVPnX89SIqes9vqNJSgIcBDY1fNWuPInqkJwK7RkG93F55gw2GKCPNAgbwOApZdvmF4UN0dsU/s1600/8.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FwsMUtXStGnsuF67Zd7LWLBsVrvPtEtufdl1kj_9NIUBnOoNJnsDmicz21wG-YHWs3tlkFcQxyudj4gHj4sD7jqIOAPA6wGrQASGcdtgjbeKi79oaHzjAG6RzjHOftXQudYzuyxdVdw/s1600/9.png)
Help와 about의 크기를 조절해줍니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzR1xSVIIaz9BUMJ82yzsQc74bv0csiG-pTHyFQjYp4LsOkvmWu9-2i8gkdv_gr_i5DEnUqlUV5OPvKoIZyEMgEd9fFR8VN5vQkILxEjic7qu2fl1GsdmTbcd8tpqvtIAku0Ljw9sniiA/s1600/10.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFwz1dKOWDSRGxacEUOOWYSX5-txQ0L9YS0IebN5po7q5q-bP4Gp9MOisB0o8PIgtL5jCjjOfGQMIGalpweHwNHW0XEFUSHjEiR7AN-caanWMCbt1IAutb1VS2d4hckaitxBgSvA8TeI/s1600/11.png)
이제 팝업 창을 만들 차례입니다.
그건, 다음 시간에 진행하겠습니다.
코드:
https://github.com/shwoghk14/Kivy_for_Starter
앱:
https://play.google.com/store/apps/details?id=starlight.jaehwa.one
끝.
사용 프로그램: Atom 1.42.0 x64
기획: URL 소스 자료를 내 컴퓨터에 저장하는 앱.
이번 시간에는 상단 바를 만들어 보겠습니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdUul4cETqH12WsCqpqQKhAzFzHJnYrrEF1EcAIOeBn-JCc5rhRqw0SBdMj_n_0s_9-cvRUFhBiF_Vdegj4hC1QmUNLTXicmMUX-KP1K1LOsD4SVe-Y8AlzzwwCMkVPnIhhK6WEHw-Fc/s1600/1.png)
상단 바에는 Help와 About이 들어갑니다.
상단 바와 밑의 URL 부분을 2 등분하기 위해, 우리는 BoxLayout을 사용할 겁니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-PnWFd_FjtFZd43phg-xbr_kw7lN1mFaXDEXCxfPJ9EaW66GSMc2HJfBWivFWfscG1QQ8WfyB3c85xTNlUEqIrPKPXVhJkx0ljnmDE1FN8kHCZ0r_trOrhjoRNmmOmMT6wV5o_U6fKU/s1600/2.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WyGXBEidOFo6If59WG6LDWHhzkoWA9fr9GfQaCFhrhZ24vn5nKcx9bfxvpoWXAhIqaVRsFC-WMdB4h_CBC4eXFKE-zlGbgofPnJXhjz5N2OZKLFTJEKy2xiSLs07TNN6jz2P0EboDpA/s1600/3.png)
짜잔, 위와 아래로 나누어졌습니다.
자세히 보기 위해, 색깔을 넣어보겠습니다.
색깔은 canvas.before을 사용하여 넣을 수 있습니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVM3Syu5gMEdCSEoise1GCIArS3XckQP0PTapk_XLBM8wM0QPPttgsZFOg-hpksVba1dVI3RgJgoeO4UFILHL7WEkBWR9Bd2RBjDG2i33vJ6tY2jxMkoK7wZlRT_ALkRMMH-YHkLLVybk/s1600/4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ItNTWyw3i5rcAMgnOFLulUNolb36egHwbuT6c5f2Eb-o3MrO73-srB47eiLPAl29kmfcjRQSZVylDGC0313uVr2Q4ExhJvLn7QnOd6l9DXLjh4vTfgafamw9ixa9vEdGeV6RiuFGaFA/s1600/5.png)
그럼 이제, 위쪽 Hello world를 얇게 만들어야겠네요.
이때 사용하는 게, size_hint입니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGPumX6p1k9qBWt2G9axVnfqIepliRpl9k2roFWZ-g5PotjNFaDqxAa-c72ZwqtoNopO9VqKt6VdHGGSQO-pz77PulPMhiNlb-jf8PPEVMUhzZ9XFd98VLR7CEvjf0am01xrxqmc_i_FQ/s1600/6.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKVVvF1Mo78ZmbuwwWDTIHQco2Rcs_YjPL5RXTaGMn5o1Mmpg_j8K6XwtuNBADIxb_GhDnmCeEzKG4xjX0Y6NlIdj5t9rLb-sBjbj4px5qyNaTpwV9lwX95vvwBco59A_0d2HRaVYAk8/s1600/7.png)
이제 버튼을 만들 차례입니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxdBoASL8V1XKPAuqrJyBVJvO6jQw8vu75MMNAFOa8LpwtNIovdzmdsX5rxIT080XToEVPnX89SIqes9vqNJSgIcBDY1fNWuPInqkJwK7RkG93F55gw2GKCPNAgbwOApZdvmF4UN0dsU/s1600/8.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FwsMUtXStGnsuF67Zd7LWLBsVrvPtEtufdl1kj_9NIUBnOoNJnsDmicz21wG-YHWs3tlkFcQxyudj4gHj4sD7jqIOAPA6wGrQASGcdtgjbeKi79oaHzjAG6RzjHOftXQudYzuyxdVdw/s1600/9.png)
Help와 about의 크기를 조절해줍니다.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzR1xSVIIaz9BUMJ82yzsQc74bv0csiG-pTHyFQjYp4LsOkvmWu9-2i8gkdv_gr_i5DEnUqlUV5OPvKoIZyEMgEd9fFR8VN5vQkILxEjic7qu2fl1GsdmTbcd8tpqvtIAku0Ljw9sniiA/s1600/10.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFwz1dKOWDSRGxacEUOOWYSX5-txQ0L9YS0IebN5po7q5q-bP4Gp9MOisB0o8PIgtL5jCjjOfGQMIGalpweHwNHW0XEFUSHjEiR7AN-caanWMCbt1IAutb1VS2d4hckaitxBgSvA8TeI/s1600/11.png)
이제 팝업 창을 만들 차례입니다.
그건, 다음 시간에 진행하겠습니다.
코드:
https://github.com/shwoghk14/Kivy_for_Starter
앱:
https://play.google.com/store/apps/details?id=starlight.jaehwa.one
끝.
카테고리: BlackSmith, Kivy
댓글
댓글 쓰기
궁금한 점은 댓글 달아주세요.
Comment if you have any questions.