FLEXBOX 레이아웃 연습 FLEXBOX FROGGY [FLEXBOX FROGGY 답]

React & React Native 2018. 12. 23. 16:12


http://flexboxfroggy.com/ 접속하면 1단게부터 24단게 까지 게임을 통해서 flexBox 레이아웃을 연습할 수 있다.  

FlexBox Froggy 게임해답 (마우스로 아래 영역을 긁으세요)

1. justify-content:flex-end;

2. justify-content:center;

3.justify-content:space-around;

4. justify-content:space-between;

5. align-items:flex-end;

6. justify-content:center;

    align-items:center;

7. justify-content:space-around;

   align-items:flex-end;

8.flex-direction:row-reverse;

9. flex-direction:column;

10. flex-direction:row-reverse;

      justify-content:flex-end;

11. flex-direction:column;

     justify-content:flex-end;

12. flex-direction:column-reverse;

     justify-content:space-between;

13. justify-content:center;

     flex-direction:row-reverse;

     align-items:flex-end;

14. order:1;

15. order:-3;

16. align-self:flex-end;

17. order:2;

     align-self:flex-end;

18. flex-wrap:wrap;

19. flex-wrap:wrap;

     flex-direction:column;

20. flex-flow:column wrap;

21. align-content:flex-start;

22. align-content:flex-end;

23. flex-direction:column-reverse;

      align-content:center;

24. flex-direction:column-reverse;

      flex-wrap:wrap-reverse;

      align-content:space-between;

      justify-content:center;



저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

리액트네이티브 react-native-navigation V2 LifeCycle #4  (0) 2018.12.25
리액트네이티브 react-native-navigation v2 Root Screen #2  (2) 2018.12.24
FLEXBOX 레이아웃 속성 정리  (0) 2018.12.22
리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1  (0) 2018.12.21
리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)  (0) 2018.11.28
블로그 이미지

클라인STR

,

FLEXBOX 레이아웃 속성 정리

React & React Native 2018. 12. 22. 19:39

Flexbox 모델을 사용하기위해서는 flex-container를 정의 한다음 

display:flex 또는 display:inline-flex 설정하면된다. 


1
2
3
4
5
<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>
cs


1. Flexbox 컨테이너와 Flexbox 아이템 


ul에 display:flex 속성을 준경우 Flex Container 라고하며 , ul 내부에 있는 li 앨리먼트들을 Flex Container 내부에 있는 Flexbox Item 이라고 한다. 이때 주의할점은 Flexbox item이되는것들은 <li>요소들이며 li요소내부는 적용이 되지 않는다는 점이다.  FlexBox Item 항목에 height값을 주지 않으면 기본값이 stretch 라 컨테이너를 꽉 채우게된다. 



2. flexbox 주축과 교차축 


flexbox에는 주축(Main Axis)과 교차축 (Cros Axis) 이라는 두 개의 축이 존재한다. 




 flex-direction 디폴트값은 row(행)이므로  주축은 (Main Axis)는 행값을 기준으로 한다. cross axis라고 하면 주축에 정확히 교차하는 교차축을 얘기한다. 


여기서 flex-direction 값을 column(열)로 바꾸면 주축과 교차축에 값이 아래와 같이 반대로 바뀐다. 





3.justify-content 

 justify-content 주축에(Main Axis) 대한 정렬이다. 

space-between a, b 사이의 공간 b, c 사이를 동일한 간격으로 위치시킨다. 반면에  space-around는 a, b, c 사이의 공간을 동일하게 둘러싸는 것을 얘기한다. 즉 space-between 은 박스와 박스 사이에서만 공간이 생기지만 space-around인경우는 블록과 박스 박스와 박스 사이에 균등하게 공간이 생긴다. (공간을 둘러싼다는게 어떤느낌인지 와닿지가 않아서 처음에 이해하기 힘들었음)


justify-content 속성중 space-evenly 사용하면, 블록과 a,b,c 공간이 모두 균등하게 위치할 수 있다.


4.flex-wrap (nowrap, wrap, wrap-reverse)  

flexBox에서는 기본적으로 박스의 크기가 넘칠경우 박스 공간을 뚫고 나가는 식으로 레이아웃이 배치가된다. (flex-wrap:nowrap 디폴트값이므로)

부모 컨테이너 속성에 flewx-wrap : wrap  속성을 사용할경우 박스공간 아래로 항목들이 자동으로 떨어진다. 



flexBox인경우 width값에 상관없이 부모컨테이너에 항목을 넘어가더라도 flex Item이 자동으로 정렬되게 되는데 이는 flex-shrink 값이 1이 기본으로 설정되어 있기 때문이다. 


5. flex-basis

flexBox에서 width 값대신에 flex-basis 속성을 사용하여 값을 적용한다. 


 6.flex-grow & flex-shrink 


flexItem 항목을 늘려주거나 줄여줄때 사용하는 속성이 flex-grow, flex-shrink 이다. 


flex : flex-grow , flex-shrink, flex-basis  형태로 축약해서 쓸 수 있다.


7. align-content 

align-content 는 교차축에 대한정렬이다.  속성으로는 flex-start, flex-end, center, space-between, space-around, stretch.

flex-item 덩어리 전체가 교차축을 기준으로 정렬이 된다. 



8.align-items

align-content 와는 다르게 개별 아이템항목을 정렬할때 사용하는 속성이 align-items 이다. align-items 역시 교차축 기준으로 상 하 가운데 설정할 수 있다. 

가운데 정렬을 하기위해서는 justify-content속성과 align-items 속성을 사용할 수 있다.


9. order

order 속성을 사용하면 flexItem 항목을 순서를 변경할 수 있다.


10. align-self 

flexItem 개별 속성을 정렬할때 사용하는 속성이 align-self 이다. 요소 값은 align-items가 사용하는 값들을 인자로 받는다. 


11. flex-flow


참고 원문

FlexBox기본개념

FlexBox 이해

저작자표시 비영리 동일조건

'React & React Native ' 카테고리의 다른 글

리액트네이티브 react-native-navigation v2 Root Screen #2  (2) 2018.12.24
FLEXBOX 레이아웃 연습 FLEXBOX FROGGY [FLEXBOX FROGGY 답]  (0) 2018.12.23
리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1  (0) 2018.12.21
리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)  (0) 2018.11.28
npm 라이브러리 특정 버전설치하기  (0) 2018.11.23
블로그 이미지

클라인STR

,

리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1

React & React Native 2018. 12. 21. 20:47

React-native 에서 화면 간의 이동을 하기위해서는 사용하는 대표적인? 방법으로는 react-navigation 과 react-native-navigation  있다. 이중에서 react-native-navigation 사용하기 위해서 개발 환경을 설정해보기로 한다. 


1. RN프로젝트를 생성하고 해당폴더에서 아래명령어로 library를 설치한다.


npm install --save react-native-navigation



2.  Xcode를 실행한후 RN프로젝트를 Open 하고 프로젝트 네비게이션을 선택한후 
Libraries > Add files to "프로젝트명" 을 선택한다. 
node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj 를 선택한다.



3. Project Navigator (왼쪽 패널)에서 프로젝트 (위)를 클릭 한 다음 대상 행 (오른쪽 창의 왼쪽 열에있는 "프로젝트 및 대상 목록")을 클릭하고 Build Phases 탭 라이브러리가있는 링크 바이너리 섹션에 libReactNativeNavigation.a를 추가한다.






4. IOS 설정에 경우  AppDelegate.m 파일을 편집해야한다. AppDelegate.m 파일을 선택하고 파일 내용을 아래와 같이 수정한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#import "AppDelegate.h"
 
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
 #import <ReactNativeNavigation/ReactNativeNavigation.h>
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
  
  return YES;
}
 
@end
 
cs


파일 선택시  RCTBundleURLProvider.h file not fonud  에러메시지가 나타날경우 아래와 같이조치를 해준다. 프로젝트 폴더에 해당명렁어를 실행하고 


npm install -g react-native-git-upgrade


Xcode 에서 Product -> Scheme -> Manage Schemes 선택하고 + 기호를 선택하여 React를 추가한다음 Shread 열에 체크를 선택한다. 


이때 Target을 React로 선택한다.







참고 https://wix.github.io/react-native-navigation/#/docs/Installing


유트브에서 React Native Navigation 설치 영상을 참고해도 좋다.



저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

FLEXBOX 레이아웃 연습 FLEXBOX FROGGY [FLEXBOX FROGGY 답]  (0) 2018.12.23
FLEXBOX 레이아웃 속성 정리  (0) 2018.12.22
리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)  (0) 2018.11.28
npm 라이브러리 특정 버전설치하기  (0) 2018.11.23
React Native Svg Chart (react-native-svg-charts), React Native Chart  (0) 2018.11.21
블로그 이미지

클라인STR

,

PSN 서비스 이전

사는이야기 2018. 12. 20. 14:09


아래와 같은 메일이 날라왔다. 



안녕하세요.


우선 PlayStation™Network (이하 “PSN”) 서비스를 이용해주시는 고객님께 진심으로 감사 드립니다.
 

저희 ㈜소니인터랙티브엔터테인먼트코리아는 저희 PSN 서비스를 이용하시는 고객 분들에게 양질의 서비스 제공 및 서비스 편의를 위하여 해당 PSN 서비스 권한을 ㈜소니인터랙티브엔터테인먼트코리아의 모회사인 Sony Interactive Entertainment Inc. 에게 이전하고, 2019년 4월 1일부터는 Sony Interactive Entertainment Inc. 가 PSN 관련 서비스를 직접 제공하게 될 것입니다.


이에 Sony Interactive Entertainment Inc. 는 본 PSN 서비스를 이전 받아 기존 고객님께 계속해서 이전과 동일한 서비스를 제공할 것을 약속 드립니다. 다만, Sony Interactive Entertainment Inc. 가 고객님께 PSN 서비스를 계속해서 제공해 드리기 위해서는 이에 대한 고객님의 동의가 필요합니다. 따라서 PSN 서비스를 계속해서 이용하시려는 고객님께서는 번거로우시겠지만 아래 링크에서 고객님의 서비스 이용계약, 개인정보, PSN 에서 사용하시는 계정에 관한 제반 권리 및 의무 등을 Sony Interactive Entertainment Inc. 로 이전 (이하 “본건 이전”) 하는 것에 대하여 동의를 하여 주시기 바랍니다.


해당 링크를 통해 동의를 완료하신 고객께서는 보유하고 계신 PlayStation™Store card 등 유료 및 무료 아이템을 포함하여 사용하고 계시던 모든 PSN 콘텐츠를 기존과 동일하게 이용하실 수 있습니다. 
 

[PSN 서비스 이전 및 개인정보 제공, 국외이전, 처리위탁에 대한 동의]


해당 동의여부는 현재시점부터 내년 3월 중순까지 본 링크를 통해 표명하실 수 있습니다. 한편, 고객님께서는 본건 이전에 대한 동의를 하지 않으실 수 있습니다. 만일 본 이전에 대한 동의를 하시지 않으실 경우 동의하지 않음을 선택하신 날로부터 PSN 서비스의 이용이 제한되실 수 있음을 알려 드립니다. 이렇게 동의를 하지 않으신 고객님들의 경우에는 저희 ㈜소니인터랙티브엔터테인먼트코리아에서는 PSN 지갑 내 잔액에 대한 환불 절차를 진행해 드릴 예정이오니 참조하시기 바랍니다. 또한 무응답 중인 고객 분들의 경우에도 저희 ㈜소니인터랙티브엔터테인먼트코리아에서는 내년 3월 중순 경부터 사용하시던 PSN 내 사용 계정을 일괄 중지 할 예정이오니 이점 역시 참조 부탁 드립니다. 다만 무응답 고객 분들 중 3월 이후 본 PSN 서비스를 사용하시고자 하시는 분은 향후 2024년 4월 1일까지 저의 고객센터로 직접 연락 하셔서 해당 동의여부에 동의하여 주시면 다시 PSN 서비스 이용이 가능 합니다. 해당 기간이 지난 이후 응답하신 고객 분들은 기존에 사용하시던 PSN 서비스 사용 계정 및 해당 계정 지갑 내 충전된 금액을 사용할 수 없게 되오니 이점 유의 부탁 드리며 해당 보유금액에 대한 환불을 받고 싶으시면 2024년 4월 1일 전 까지 지갑 내 충전된 보유 금액에 대한 환불을 요청 하여 주시면 해당 금액을 환불 하여 드리도록 하겠습니다.

앞으로 저희 ㈜소니인터랙티브엔터테인먼트코리아 및 Sony Interactive Entertainment Inc. 는 고객님께 양질의 PSN 서비스를 제공하기 위하여 더욱더 노력할 것을 약속 드립니다.

이와 관련하여 궁금하신 점이나 소중한 의견이 있으시면 언제든지 고객센터로 연락 주시기 바랍니다. 


[운영시간: 09:00~18:00, 토, 일, 공휴일 휴무 | TEL: 02-6677-7771 / 080-723-7235 | 온라인 문의하기]


㈜소니인터랙티브엔터테인먼트코리아 및 Sony Interactive Entertainment Inc. 드림



요약하자면  PSN 서비스를 관리권한을  ㈜소니인터랙티브엔터테인먼트코리아 -> Sony Interactive Entertainment Inc 옮기겠다는 내용이다. 


참고로 Sony Interactive Entertainment Inc 일본 법인이다.  PSN 서비스를 계속 사용하기 위해서는 [PSN 서비스 이전 및 개인정보 제공, 국외이전, 처리위탁에 대한 동의] 링크를 클릭하여 서비스 이전에 대한 동의를 하여야 하며, 이를 동의 하지 않을경우 환불도 가능하다. 결과적으로 PSN 서비스를 계속 사용하기위해서는 서비스 이관에 대한 동의가 필요한다. 






저작자표시 비영리 변경금지

'사는이야기' 카테고리의 다른 글

2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진  (0) 2019.01.01
런닝머신 10분으로 1시간 효과내기  (0) 2018.12.30
덤벨 팔운동 기초 [헬린이]  (0) 2018.12.19
2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.19
SIM 카드가 바르지 않습니다.  (0) 2018.12.18
블로그 이미지

클라인STR

,

덤벨 팔운동 기초 [헬린이]

사는이야기 2018. 12. 19. 21:42


요즘 자주 보는 채널인데 도움이 많이되는거같다. ^^


'사는이야기' 카테고리의 다른 글

런닝머신 10분으로 1시간 효과내기  (0) 2018.12.30
PSN 서비스 이전  (0) 2018.12.20
2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.19
SIM 카드가 바르지 않습니다.  (0) 2018.12.18
아이폰6s 배터리 교체 예약방법 , 앙츠(antz) 예약, 창원 애플공식서비스 센터, 아이폰 배터리 교체 할인  (0) 2018.12.17
블로그 이미지

클라인STR

,

2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]

사는이야기 2018. 12. 19. 18:33

http://direct.kdblife.co.kr/edirect 홈페이지에 접속하여, 나의운세 알아보기 메뉴를 선택한다.

이미지 클릭시 크게 보기가 가능합니다. 




신토정비결 볼경우 자세히보기 버튼을 건강운, 평생운세, 타로 가트를 볼경우 각각 메뉴를 선택한다.



성별, 생년월일 양/음력 입력하고 운세보기 버튼을 선택한다. 








저작자표시 비영리 변경금지

'사는이야기' 카테고리의 다른 글

PSN 서비스 이전  (0) 2018.12.20
덤벨 팔운동 기초 [헬린이]  (0) 2018.12.19
SIM 카드가 바르지 않습니다.  (0) 2018.12.18
아이폰6s 배터리 교체 예약방법 , 앙츠(antz) 예약, 창원 애플공식서비스 센터, 아이폰 배터리 교체 할인  (0) 2018.12.17
2019년 무료운세, 토정비결 , 취업운세보기 인쿠르트  (2) 2018.12.10
블로그 이미지

클라인STR

,

SIM 카드가 바르지 않습니다.

사는이야기 2018. 12. 18. 14:10

몇 일전부터 어머니 휴대폰이 "SIM 카드가 바르지 않습니다. " 메세지가 뜨기 시작했다.



SIM 카드 인식에 문제가 있어서 그런거라는 생각이 들어서 USIM을 뺐다가 다시 창작 하기로 했다. 



휴대폰 옆면에 송곳이나 바늘을 사용하여 해당 SIM을 다시 끼우면된다. 

하지만 몇 일뒤 동일한 현상이 발생한다면, USIM 수명이 다한것이므로 근처 서비스 센터에서 교환하였다. USIM 비용은 7700원이 나왔으며, 담달 통신비에 청구된다고 한다. 



저작자표시 비영리 변경금지

'사는이야기' 카테고리의 다른 글

덤벨 팔운동 기초 [헬린이]  (0) 2018.12.19
2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.19
아이폰6s 배터리 교체 예약방법 , 앙츠(antz) 예약, 창원 애플공식서비스 센터, 아이폰 배터리 교체 할인  (0) 2018.12.17
2019년 무료운세, 토정비결 , 취업운세보기 인쿠르트  (2) 2018.12.10
2019년 무료 운세 보는법 신한생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.06
블로그 이미지

클라인STR

,

아이폰6s 배터리 교체 예약방법 , 앙츠(antz) 예약, 창원 애플공식서비스 센터, 아이폰 배터리 교체 할인

사는이야기 2018. 12. 17. 17:56

올해 연말인 2018년 12월 31일까지 아이폰 배터리 교체 비용을 할인한 다는 소식을 들었다. 현재 내 아이폰에 배터리 성능상태는 82% 몇 달전부터 배터리가 빨리다는걸  체감하고있었는데 이번기회에 교환하기로 마음 먹었다.


아이폰 설정-> 배터리 -> 배터리 성능상태 

배터리 성능 최대치를 확인 할 수 있다. 



사람이 많이 몰린다고 해서 인터넷을 통해서 검색을 해보았다.

창원에 애플공식서비스 센터는 앙츠(ANTZ) 라는곳이다. 

위치는 아래와 같다. 


ANTZ 창원 센터 

http://changwon.iantz.co.kr/



먼저 고객센터에 전화를 해서 문의를 했더니 전화예약은 안되고 홈페이지를 통해서만 예약이 가능하다는 안내를 받았으며, 어플로 예약할것을 추천하였다. 

앱스토어에서 애플지원서비스 로 검새해서 앱을 다운받는다.





앱을 실행하고  아래와 같은 순서로 메뉴를 선택한다. 

본인이 서비스 받고자하는 기종을 선택한다. 



배터리 충전을 선택한다.



배터리 교체를 선택한다.





창원 앙츠인경우 20분마다 예약이 열린다. 지금 서비스 센터 찾기를 눌렀을때 20분 40분 00분 예약이 가능하며 매 회마다 한명만 가능한거 같다.  

스크린 샷 찍는다고 몇번을 예약을 실패해서 아래에 스샷은 다른 지점을 예를 들어 스크린샷을 찍었다. 


예약이 가능할 경우 예약가능시간이 표시되는데 이때 재빨리 터치를 하여 다음메뉴로 들어가야한다. 


예약 가능한 시간대가 뜨며 바로 터치해서 선택하고 다음화면이 뜨면 아래쪽에 예약버튼이 위치해있는데 여기까지 재빠르게 터치하면 예약이 완료된다. 


예약 버튼을 터치하는데, 이때 예약을 실패하는 경우도있다. 먼저 예약한 사람이 있을경우 ㅠㅠ


예약이 완료되면 이와 같은 화면이 뜬다. 관련 작업 완료하기로 가서 데이터를 백업해두는 것이 좋다 .



저작자표시 비영리 변경금지

'사는이야기' 카테고리의 다른 글

2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.19
SIM 카드가 바르지 않습니다.  (0) 2018.12.18
2019년 무료운세, 토정비결 , 취업운세보기 인쿠르트  (2) 2018.12.10
2019년 무료 운세 보는법 신한생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.06
가스계량기 교체후기 [교체비용][교체일정]  (0) 2018.12.05
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

티스토리툴바