FRAME WORK (35) 썸네일형 리스트형 React ) 수정하기 기초 리액트의 첫 화면의 시작은 src 폴더안의 index.js 이다. 변수 root에 App을 렌더링하고 있다.렌더링하고있는 './ App.js'로( .js가 생략되어있는것) 이동하여 수정하자return값으로 태그를 내보내고있는데, " "감싸져있지않다. 이말은? 문자열이 아니라는것. 결국 태그가 아니다.jsx 객체이다. 수정후 npm start수정된 화면이 나오는데 id="root" div 안에 수정한 App.js가 보인다.root는 어디있는가하면 public안에 index.html 안에 있다. App.js에 사용자정의 태그를 사용하여 좀 더 풍성하게 만들어보자 규칙이 있는데, return값은 태그 하나로 묶을것, 함수명은 대문자를 사용할것. import React from 'react';import .. React ) 리액트 설치 1. node.js 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 폴더 만들기3. 리액트 설치하기npx create-react-app .** npx - 일회성 설치 명령어** . 은 현재 폴더(디렉토리)에 설치하겠다는 것 혹시 설치 오류가 난다면?# create-react-app 제거 후 재설치 $ npm uninstall -g create-react-app $ npm install -g create-react-app # create-react-app 재실행 $ npx c.. [Xamarin] Xamarin.Forms으로 UI 만들기 - 레이아웃 HTML, CSS로 화면을 만드는 경우 등의 태그로 뼈대를 만들고 CSS로 모양이든 배치든 하는 스타일을 넣지만 자마린의 경우, 태그 자체에 스타일이 들어있다(?) 라고 표현하면 되려나. 예를 들어 아래의 화면을 만든다면 원래라면, 부모 안에 자식 들이 들어있는 형태로 html을 만들고 css로 가로 스크롤되는 형태나 카드들을 가로로 배치되게끔 만들것이다. 자마린의 경우라면 안에 안에 들을 넣어 xaml을 만들고 자마린 스타일 속성값들로 색이나 모양을 만들것이다. 자마린에서는 스크롤을 원하는 영역은 로 감싸야한다. 그리고 가로스크롤을 원하면 HorizontalScrollBarVisibility 속성을 추가해주면되고 기본값은 VerticalScrollBarVisibility(세로스크롤)이다. 카드들을 가로.. [Xamarin] 자마린 페이지 빌드하기 위의 컨텐츠 페이지를 만들었다. 빌드해보자 App.xaml.cs 페이지에 빌드할 페이지 클래스 명을 쓰고 ( MainPage = new 페이지클래스명(); ) 아래의 버튼을 눌러주면 끝. using System; using System.Reflection; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace App6 { public partial class App : Application { public App() { InitializeComponent(); MainPage = new SB_CARD_001_0001(); } protected override void OnStart() { } protected override void OnSleep() { .. [Xamarin] 자마린에서 css대신 사용하는 ResourceDictionary HTML에서는 CSS를 사용한다. class를 지정하면 해당 class의 스타일값을 어디서든 공통으로 사용할 수 있으니 여러번 코드를 작성하지않아도된다. 그럼 자마린에서는 뭐를 쓰냐? 바로 ResourceDictionary. class 대신 Key값을 지정하여 여기저기서 사용할수있다. 일단 셋팅부터 하는 방법이다. 1. 컨텐츠 페이지를 만든다. 2. 컨텐츠 페이지의 코드를 변경한다. 아래처럼 ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xct="http://xamarin.com/schemas/2020/toolkit" xmlns.. [Xamarin] 툴킷 사용하기 - toolkit 자마린에서 사용할수있는 스타일 속성들은 css와 비교하면 훨씬 적다. 예를 들면 모서리를 둥글게 만드는 CornerRadius(border-radius)의 경우 TargetType(태그)에 따라 사용가능한게 있고 사용 불가능한게 있다. CheckBox나 Label같은 경우도 CornerRadius를 사용할 수 없다. 하지만 필요함. 이때, 사용할 수 있는게 툴킷인데 xmlns:xct="http://xamarin.com/schemas/2020/toolkit" xmlns:tool="http://xamarin.com/schemas/2020/toolkit" 위의 코드를 컨텐츠 페이지 상단에 삽입하면 사용할수 있는 스타일 속성이 늘어난다. 나같은 경우는 CornerRadius, Shadow를 가장 많이 사용했다... [Xamarin] ios 기종에 맞춰 알아서 상하여백 생기게 하는법 - Safe Area 안드로이드만 테스트하면서 ui를 만들었는데 ios로 보니 문제가 생겼다. 안드로이드는 연두색 부분이 알아서 인식되서 회색영역에만 컨텐츠가 들어가는데 ios는 자동 인식이 안되서 컨텐츠가 다 겹쳐버렸다. 이는 아주 쉽게 해결할수있다. 아래의 코드를 페이지 최상단에 넣어주면된다. xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" ios:Page.UseSafeArea="true" 리소스 딕셔너리(ResourceDictionary) 의 경우 App.xaml에 넣어주면 프로젝트 내의 모든 컨텐츠 페이지에 공통으로 먹히니까 위의 코드도 App.xaml에 넣어주면 공통으로 먹힐줄알았는데.. [WebSquare] 웹스퀘어 girdView 자주쓰는 속성 1. 속성 focusMode 셀 선택시 선택 영역 표현 방법 autofit 그리드뷰 반응형 autoFitMinWidth autoFit="allColumn" 설정을 적용하기 위해 필요한 GridView의 최소 너비 keepDefaultColumnWidth autoFit="true"인 경우,rowNum 컬럼과 rowStatus 컬럼의 폭을 고정 fixedColumn 틀고정을 적용할 컬럼의 위치 fixedRow 틀고정을 시킬 행의 위치 overflowX 가로 스크롤 표시 여부 overflowY 세로 스크롤 표시 여부 rowMouseOverColor 마우스 오버된 행의 배경색 selectedCellColor 선택된 셀의 배경색 selectedRowColor 선택된 행의 배경색 oddEvenColorDisplay.. 이전 1 2 3 4 5 다음
