FrontEnd34 [Vue] Vue.js 시작하기 → 먼저 있어야 할 것 : node.js / vscode vue 프로젝트 시작하기 또는 파워쉘에서 vue 프로젝트 기본 구성 2024. 8. 21. Bootstrap 부트스트랩 https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 스크롤 조금 내리면 이런거 있음 ▼ ▼ 기본와꾸 2024. 7. 26. [java] 로또 랜덤 숫자 뽑기 미리보기▷ 숫자만들기 버튼을 클릭하면 1부터 45 사이의 랜덤한 숫자가 나오게 하기 ▽ 레이아웃.xml ▽ MainActivity.javapackage com.example.test4;import android.os.Bundle;import android.util.Log;import android.widget.Button;import android.widget.TextView;import androidx.activity.EdgeToEdge;import androidx.appcompat.app.AppCompatActivity;import androidx.core.graphics.Insets;import androidx.core.view.ViewCompat;import androidx.co.. 2024. 7. 10. [React] JSX와 state, onClick, Component (코딩애플 유튜브 무료강의) 유튜브 코딩애플 수업 듣는 중 JSX 문법 class 넣을 땐, className 변수 꽂을 땐(== 데이터 바인딩), {변수명} style 넣을 땐, style={{ 이름: '값' }} import './App.css'; function App() { let post = '강남 우동 맛집'; return ( 블로그 {post} ); } export default App; .App { text-align: center; } .black-nav { display: flex; background: black; width: 100%; color: white; padding-left: 20px; } ※ 리턴 소괄호 안에는 무적권 하나의 태그만 있어야함 state 리액트에서 자료를 잠깐 저장할 때 사용함 impo.. 2024. 3. 28. [React] 리액트 다시 처음부터 시작해보기 (코딩애플 유튜브 무료강의) 유튜브 코딩애플 수업 듣는 중 장점 SPA Single Page Application 페이지 전환을 부드럽게 해줌 Component로 html 재사용 편리 데이터가 html에 자동 반영 프로젝트 시작하기 ▼ 새폴더 만들고 Shift 우클릭 → 여기에 PowerShell 창 열기 ▼ 파워셸에 npx create-react-app 프로젝트명 써주기 create-react-app == 라이브러리 npm == 라이브러리 다 모아놓은 플랫폼 (node.js 설치하면 자동으로 딸려옴) ▼ 완료되면 만들었던 새파일에 blog라는 폴더가 생기고 안에 이것저것 생겨버림 ▼ VS코드에 Open Folder → blog 열어서 폴더 선택해주기 ▼ 열면 옆에 이런 것들 있는데 App.js 안에 코드를 짜는 것임 더보기 pub.. 2024. 3. 28. [java] 06. 버튼 온클릭 이벤트: 숏클릭, 롱클릭 2023. 12. 11. [java] 05. 버튼 온클릭 이벤트: Toast 2023. 12. 11. [java] 04. RelativeLayout 2023. 12. 11. [java] 03. 입력폼 · 버튼 · 이미지 package com.example.test1;import android.os.Bundle;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity { // 화면이 보이고있는 동안에는 계속 이 변수상자가 유지됨 TextView output1; EditText input1; ImageView imageView; // onCreate(){화면이 .. 2023. 12. 11. [java] 02. LinearLayout: 정렬 2023. 12. 11. [java] 01. 안드로이드 프로젝트 시작하기 2024.07.09 추가 2023. 12. 11. 안드로이드 스튜디오 설치하기 https://developer.android.com/studio Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 이렇게 하면 됨! 2023. 10. 25. class=" d-flex " 속성들 d-flexdisplay flex 첫번째 두번째 세번째 첫번째 두번째 첫번째 두번째 두번째 두번째 두번째 두번째 두번째 두번째 세번째 첫번째 두번째 두번째 두번째 두번째 두번째 두번째 두번째 세번째 첫번째 두번째 세번째 첫번째 두번째 세번째 2023. 10. 18. [React] 간단실습.03 (롤 챔피언 정보 페이지 만들기) https://developer.riotgames.com/docs/lol >> 챔피언 목록 만들기 >> 챔피언 이름 클릭하면 상세 페이지 나오게 하기 ▼ 코드 ▼ 더보기 App.js import Champ from './Champ'; import ChampDetail from './ChampDetail' import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; function App() { return ( ); } export default App; Champ.js import {Link} from 'react-router-dom'; import React, { useState, useEffect } from "react"; imp.. 2023. 9. 15. [React] React : Styling 1. inLine Styling 컴포넌트 내부에 style 속성을 직접 적용하여 인라인 스타일을 적용함 자바스크립트 형태로 작성되며, 컴포넌트의 JSX 요소에 직접 지정 > 가장 유명함! 자바스크립트 코드 안에서 스타일을 작성하고 관리할 수 있는 방식 styled-component를 사용하여 템플릿 리터럴 문법으로 컴포넌트와 관련된 스타일을 정의할 수 있음 import style from 'styled-component'; const MyButton = styled.button` background-color: tomato; color: white; `; funcion MyComponent() { return Hello } >> 설치 해야 쓸 수 있음 4. 외부 CSS 프레임워크 및 라이브러리 외부 프레.. 2023. 9. 15. 이전 1 2 3 다음