'Flex' 태그의 글 목록
my code archive
article thumbnail
[리액트 네이티브 스타일링] flex 정렬, 스타일드 컴포넌트(styled-components), ThemeProvider

리액트 네이티브 스타일링은 웹 프로그램의 CSS 문법과 약간의 차이가 있다. 먼저 프로젝트를 생성해준다. expo init react-native-style 리액트 네이티브는 자바스크립트를 이용해 스타일링이 가능함. style 컴포넌트 속성이 있고, 인라인 스타일링 적용 or 스타일시트 사용 2가지 방법이 있다. 🤍스타일링 1. 인라인 스타일링 인라인 스타일링은 HTML 방식처럼 컴포넌트에 직접 스타일을 입력하는 방식이다. 웹프로그래밍 방식과 유사하지만, 위의 Text 컴포넌트처럼 비슷한 역할을 하는 컴포넌트에 중복 코드가 발생한다는 단점이 있다. 2. 클래스 스타일링 클래스 스타일링은 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이다, 위의 인라인 스타일링 방식보다 코드가 간결해진다...

article thumbnail
[국비학원 기록/HTML5] CSS Flex 개념, Flex Container, Flex Items

CSS3 Flexible Box (정렬) - 1차원 레이아웃 -1차원이라는 개념은 수직은 y축, 수평은 x축 -수직 정렬, 수평 정렬에서 x축과 y축처럼 하나의 축을 1차원이라고 한다. CSS Flex Flex Container : 부모 요소 item : 자식 요소 => 컨테이너가 Flex 영향 받는 전체 공간, 설정된 속성에 따라 각각의 아이템들이 특정 형태로 배치되는 개념. 1. Flex Container -display : Flex Container의 화면 출력(보여짐 특성) -아이템들이 가로 방향으로 배치되고 width만큼만 차지하게 된다. height는 알아서 컨테이너 높이만큼 늘어난다. -display: flex; => Flex Container를 정의 -flex-direction => fle..

반응형
반응형