'분류 전체보기' 카테고리의 글 목록 (31 Page)

분류 전체보기

ReactJS 단계별 학습 2 - step.1 컴포넌트 (사용자 정의 태그) 2021.07.29
ReactJS 단계별 프로젝트 - step.5 템플릿 디자인 적용 2021.07.27 1
ReactJS 단계별 프로젝트 - step.4 컴포넌트 추가 2021.07.27
[widget] RadioButton, CheckBox 기본 사용법 2021.07.22
[widget] EditText 기본 사용법 2021.07.22
[widget] TextView 기본 사용법 2021.07.22
[Layout] TableLayout 예제 2021.07.21
[Layout] FrameLayout에서 뷰 전환 2021.07.21

ReactJS 단계별 학습 2 - step.1 컴포넌트 (사용자 정의 태그)

2021. 7. 29. 14:05

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- Class 기반으로 Component를 정의하고 사용하는 방법을 학습한다.

3. 적용

① App 클래스에서 HelloWorld, WorldList, Inform 클래스 (사용자 정의 태그)를 호출한다.

- 컴포넌트를 마치 HTML 태그인 것처럼 호출할 수 있다.

② HelloWorld, WorldList, Inform 클래스를 각각 정의 한다.

4. 결과

- 컴포넌트(사용자 정의 태그)를 정의하고 사용하는 법을 익히고 결과를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'FrontEnd Framework' 카테고리의 다른 글

ReactJS 단계별 학습 2 - step.3 컴포넌트 파일로 분리 (0)	2021.07.29
ReactJS 단계별 학습 2 - step.2 컴포넌트 매개변수(props) 전달 (0)	2021.07.29
ReactJS 단계별 프로젝트 - step.5 템플릿 디자인 적용 (1)	2021.07.27
ReactJS 단계별 프로젝트 - step.4 컴포넌트 추가 (0)	2021.07.27
ReactJS 단계별 프로젝트 - step.3 메인 페이지 수정 (0)	2021.06.11

ReactJS 단계별 프로젝트 - step.5 템플릿 디자인 적용

2021. 7. 27. 16:00

1. 시험환경

- 윈도우 10

- npm v6.14.13

2. 목적

- 무료 React.JS 템플릿을 다운받는다.

- 다운 받은 무료 React.JS 템플릿을 프로젝트에 적용한다.

3. 적용

① 신규 프로젝트를 생성한다. 여기선, "hello-template"이라는 프로젝트명을 사용하였다.

- create-react-app [프로젝트명]

② 신규 프로젝트가 생성된 것을 확인할 수 있다.

③ 무료로 제공하는 디자인 템플릿을 찾아서 다운 받자.

- 템플릿을 제공하는 수많은 사이트들이 있지만, 아래 사이트에서 로그인 후 다운 받았다.

- https://www.wrappixel.com/

60+ Bootstrap, Angular, Vue, & React Templates & Themes 2021

Download Premium quality free Bootstrap 5 & 4 Templates and Themes to build well designed custom web applications and websites with ease.

www.wrappixel.com

④ 프로젝트 폴더에 다운 받은 파일을 압축해제하고 템플릿 전체를 덮어쓰기 한다.

⑤ 프로젝트를 시작한다.

- npm start

※ 에러 해결 1 : 'sass' 모듈 설치

- 다운받아서 적용하고자 하는 템플릿 마다 오류 내용이 다를 수 있음

※ 에러 해결 2 : 템플릿 경로 설정

- 다운받아서 적용하고자 하는 템플릿 마다 오류 내용이 다를 수 있음

4. 결과

- 다운 받은 템플릿이 localhost에서 동작하는 것을 확인할 수 있다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'FrontEnd Framework' 카테고리의 다른 글

ReactJS 단계별 학습 2 - step.2 컴포넌트 매개변수(props) 전달 (0)	2021.07.29
ReactJS 단계별 학습 2 - step.1 컴포넌트 (사용자 정의 태그) (0)	2021.07.29
ReactJS 단계별 프로젝트 - step.4 컴포넌트 추가 (0)	2021.07.27
ReactJS 단계별 프로젝트 - step.3 메인 페이지 수정 (0)	2021.06.11
ReactJS 단계별 프로젝트 - step.2 메인 페이지 확인 (0)	2021.06.11

ReactJS 단계별 프로젝트 - step.4 컴포넌트 추가

2021. 7. 27. 11:00

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 신규 프로젝트에 하위 컴포넌트들을 추가해 나가면서 프로젝트를 완성하는 방법을 확인한다.

3. 적용

① src/App.js 파일에서 기존 main 페이지 내용을 주석처기하고 WorldList 컴포넌트를 추가한다.

② WorldList 컴포넌트의 내용을 작성한다.

- WorldTitle 하위 컴포넌트를 포함하고 임포트한 것을 확인한다.

③ WorldTitle 컴포넌트의 내용을 작성한다.

- WorldTitle 컴포넌트에서 css 속성을 적용하는 방법을 확인한다.

④ WorldTitle 컴포넌트에 적용한 css 속성을 확인한다.

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

- 하위 컴포넌트들을 차례대로 추가해 나가면서 프로젝트를 완성한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'FrontEnd Framework' 카테고리의 다른 글

ReactJS 단계별 학습 2 - step.1 컴포넌트 (사용자 정의 태그) (0)	2021.07.29
ReactJS 단계별 프로젝트 - step.5 템플릿 디자인 적용 (1)	2021.07.27
ReactJS 단계별 프로젝트 - step.3 메인 페이지 수정 (0)	2021.06.11
ReactJS 단계별 프로젝트 - step.2 메인 페이지 확인 (0)	2021.06.11
ReactJS 단계별 프로젝트 - step.1 create-react-app 프로젝트 만들기 (0)	2021.06.11

[widget] RadioButton, CheckBox 기본 사용법

2021. 7. 22. 17:10

1. 시험환경

- Android Studio v4.2

- JAVA

2. 목적

- RadioButton, CheckBox 위젯의 기본 사용법을 학습한다.

3. 적용

① RadioGroup안에 RadioButton 3개를 설정하고, 주요 속성을 확인한다.

- RadioGroup 안에 포함된 RadioButton 중 하나만 선택된다.

- RadioGroup을 사용하지 않으면 클릭한 RadioButon이 모두 선택된다.

② CheckBox를 설정하고, 주요 속성을 확인한다.

4. 결과

- 설정한 RadioButton과 CheckBox를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'안드로이드' 카테고리의 다른 글

AVD(Android Virtual Device) 사용 (0)	2022.12.09
Android Studio 설치 (0)	2022.12.09
[widget] EditText 기본 사용법 (0)	2021.07.22
[widget] TextView 기본 사용법 (0)	2021.07.22
[Layout] TableLayout 예제 (0)	2021.07.21

[widget] EditText 기본 사용법

2021. 7. 22. 15:06

1. 시험환경

- Android Studio v4.2

- JAVA

2. 목적

- EditText 위젯의 기본 사용법을 학습한다.

3. 적용

① inputType이 다른 EditText 위젯 3개를 생성하였다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">
  <EditText
      android:id="@+id/editTxtId"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="input your id"
      android:inputType="text"
      android:textSize="24sp" />
  <EditText
      android:id="@+id/editTxtPw"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="input your password"
      android:inputType="numberPassword"
      android:textSize="24sp" />
  <EditText
      android:id="@+id/editTxtEmail"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="input your email"
      android:inputType="textEmailAddress"
      android:textSize="24sp" />
</LinearLayout>

4. 결과

- EditText에 설정된 inputType에 따라 나타나는 키패드를 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'안드로이드' 카테고리의 다른 글

Android Studio 설치 (0)	2022.12.09
[widget] RadioButton, CheckBox 기본 사용법 (0)	2021.07.22
[widget] TextView 기본 사용법 (0)	2021.07.22
[Layout] TableLayout 예제 (0)	2021.07.21
[Layout] FrameLayout에서 뷰 전환 (0)	2021.07.21

[widget] TextView 기본 사용법

2021. 7. 22. 12:16

1. 시험환경

- Android Studio v4.2

- JAVA

2. 목적

- TextView 위젯의 기본 사용법을 학습한다.

3. 적용

① App에서 사용할 문자열을 관리하는 파일에서 문자열을 추가한다.

- 파일위치 : app → res → values → strings.xml

② TextView 위젯을 추가하고 속성값을 설정한다.

- text : "직접 문자열 입력" or "strings.xml에서 설정한 string 참조"

- textSize : 단말 해상도에 따라 일정한 크기로 표시되는 sp 단위 입력

- textStyle : 여러 style 동시 적용시 "|" 사용

- typeface : 글자 형식 지정

- ellipsize : "marquee"로 설정하면 회전하는 자막 효과 적용

- marqueeRepeatLimit : 최대 회전수

- singleLine : 텍스트의 길이가 길어도 한줄에 표시

- focusable : "marquee" 적용을 위해 true로 설정

③ "marquee"로 설정하여 자막효과를 주기 위해 setSelected() 속성을 true로 설정한다.

4. 결과

- 속성값이 적용된 TextView 결과 확인

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'안드로이드' 카테고리의 다른 글

[widget] RadioButton, CheckBox 기본 사용법 (0)	2021.07.22
[widget] EditText 기본 사용법 (0)	2021.07.22
[Layout] TableLayout 예제 (0)	2021.07.21
[Layout] FrameLayout에서 뷰 전환 (0)	2021.07.21
[Layout] LinearLayout과 FrameLayout 비교 (0)	2021.07.21

[Layout] TableLayout 예제

2021. 7. 21. 16:15

1. 시험환경

- Android Studio v4.2

- JAVA

2. 목적

- TableLayout과 TableRow를 이용하여 Widget을 배치하는 방법을 학습한다.

3. 적용

① TableLayout과 TableRow를 이용해서 컴포넌트 배치한다.

② 각 TableRow의 하위 Component를 배치한다.

- android:layout_span 속성 : HTML Table의 colspan과 비슷한 속성

4. 결과

- TableLayout 결과 화면

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'안드로이드' 카테고리의 다른 글

[widget] EditText 기본 사용법 (0)	2021.07.22
[widget] TextView 기본 사용법 (0)	2021.07.22
[Layout] FrameLayout에서 뷰 전환 (0)	2021.07.21
[Layout] LinearLayout과 FrameLayout 비교 (0)	2021.07.21
[Layout] ScrollView, HorizontalScrollView, 수평-수직 혼합 설정 (0)	2021.07.20

[Layout] FrameLayout에서 뷰 전환

2021. 7. 21. 11:23

1. 시험환경

- Android Studio v4.2

- JAVA

2. 목적

- FrameLayout에서 TextView 전환하는 방법을 알아보자.

3. 적용

① Layout 컴포넌트 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <Button
  android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="click"
      android:onClick="onBtnClicked" />

  <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

          <TextView
              android:id="@+id/txt03"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#8866ff"
              android:text="텍스트"
              android:textSize="60sp"
              android:visibility="invisible" />

          <TextView
              android:id="@+id/txt02"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#ff8866"
              android:text="텍스트"
              android:textSize="40sp"
              android:visibility="invisible" />

          <TextView
              android:id="@+id/txt01"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#33af55"
              android:text="텍스트"
              android:textSize="20sp"
              android:visibility="invisible" />
      </FrameLayout>
</LinearLayout>

② 버튼을 클릭하면 TextView가 전환하는 동작 코드 구현 (MainActivity.java)

package com.study.studylayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

int idx = 0;
  TextView txtView1;
  TextView txtView2;
  TextView txtView3;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      txtView1 = findViewById(R.id.txt01);
      txtView2 = findViewById(R.id.txt02);
      txtView3 = findViewById(R.id.txt03);
  }

  public void onBtnClicked(View v) {
      changeView();
  }

  private void changeView() {
      if (idx == 0)
  {
          txtView1.setVisibility(View.VISIBLE);
          txtView2.setVisibility(View.INVISIBLE);
          txtView3.setVisibility(View.INVISIBLE);
          idx = 1;
      }
      else if (idx == 1)
      {
          txtView1.setVisibility(View.INVISIBLE);
          txtView2.setVisibility(View.VISIBLE);
          txtView3.setVisibility(View.INVISIBLE);
          idx = 2;
      }
      else if (idx == 2)
      {
          txtView1.setVisibility(View.INVISIBLE);
          txtView2.setVisibility(View.INVISIBLE);
          txtView3.setVisibility(View.VISIBLE);
          idx = 0;
      }
  }
}

4. 결과

- "CLICK" 버튼 클릭시 FrameLayout에 배치된 TextView가 전환되는 것을 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

저작자표시

'안드로이드' 카테고리의 다른 글

[widget] TextView 기본 사용법 (0)	2021.07.22
[Layout] TableLayout 예제 (0)	2021.07.21
[Layout] LinearLayout과 FrameLayout 비교 (0)	2021.07.21
[Layout] ScrollView, HorizontalScrollView, 수평-수직 혼합 설정 (0)	2021.07.20
AVD(Android Virtual Device) 설정 (0)	2021.07.19

PREV 1 ···28 29 30 31 32 33 34 ···37 NEXT