mirabo01 님의 블로그

기본 컴포넌트(View, Text, Image)를 써서화면에 뭔가 띄우는 데까지는 금방 온다.그다음부터 막히는 지점은 거의 항상 같다.왜 가운데 정렬이 안 되지?웹처럼 margin: auto가 안 먹히네?가로 정렬은 했는데 세로가 이상하다이건 React Native가웹이 아니라 Flexbox 기반 레이아웃이기 때문이다.이 글에서는React Native 스타일링의 핵심인StyleSheet와 Flexbox 개념을 입문자 기준으로 정리한다.이 글이 필요한 사람React Native에서 레이아웃이 자꾸 어긋나는 경우Flexbox 개념이 아직 헷갈리는 경우웹 CSS 감각으로 접근했다가 막힌 경우React Native 스타일링 기본 개념React Native에서는CSS 파일을 따로 쓰지 않는다.대신 JavaScri..

예전엔 박스를 가로 정렬하려면 float, inline-block, position 등을 조합해야 했다.하지만 이제는 단 한 줄로 가능하다 👇display: flex; 이번 글에서는 Flexbox(플렉스박스) 의 핵심 개념부터정렬, 배치, 간격, 비율 조절까지 실무 중심 예제로 완벽 정리한다.💡 1. Flexbox란?“Flexbox는 요소를 가로·세로로 유연하게 정렬하기 위한 CSS 레이아웃 시스템이다.”기존 레이아웃 문제들:가운데 정렬이 복잡함요소 크기가 제각각일 때 간격이 어긋남반응형 레이아웃 구성 어려움💬 Flexbox는 이런 문제를 한 번에 해결한다.🧱 2. 기본 구조Flexbox는 부모(container) 와 자식(item) 구조로 동작한다. 1 2 3 .container {..