상속 부모요소의 프로퍼티를 상속받고싶다면 명시적으로 inherit 값 지정 - 자식까지 상속되는 프로퍼티 . . . - 상속되지않는 프로퍼티 width, height, margin, display, border 선택자 *: "*" 와일드 카드라 불림, 전체선택자를 사용하면 페이지에 해당하는 모든 요소에 영향 타입선택자: HTML요소 이름을 선택자로 사용 id선택자: id속성에 지정한 값을 이용해 스타일 지정, id앞에 '#'을 붙여 작성 페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일요소에만 지정하고 싶을때 사용 class선택자: 요소에 스타일을 지정하는 가장 일반적인 방법, class앞에 '.'을 붙여 작성 여러요소에 값은 class값을 지정해 동일한 스타일 지정할 수 있음 속성(attribu..
HTML구성요소 starttag endtag 요소의 시작과 끝을 의미하는 태그 으로 구성되면 endtag의 경우 Void 요소 , , , 처럼 endtag가 없는 태그들이 존재함 endtag를 작성하지않아도 일반요소처럼 작동 ! self colsing : 형태로 작성해도 된다 Element Content Element: starttag, endtag, content를 모두 합친 하나를 의미 content: starttag와 endtag사이의 내용을 의미 Attributes 속성 태그의 동작을 제어하도록 사용자가 지어하는 값을 의미 HTML 요소분류 inline 인라인요소 태그가 할당된 텍스트나 이미즈이 크기에 맞는 필요한 공간만을 차지 높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작함 인라인 요소..
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals();
자바스크립트 안에 내장되어있는 오브젝트 비동기적인 것을 수행 할 때 콜백 대신 유용하게 사용 state 상태 pending-> fulfilled or rejected producer producer 프로미스는 클래스 새로운 프로미스가 만들어질 때 전달한 excutor 바로 실행됨 const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('bomi'); },2000); }); resolve 기능을 정상적으로 수행해서 마지막으로 최종데이터를 전달 reject 기능을 수행하다 중간에 문제가 생기면 호출 consumer: then, catch, finally finally 성공과 실패를 떠나 무조건 호출 됨 promise.then..
interface User{ name:string; age:number; gender?: string; readonly birthYear: number; } let user : User ={ name:"xx", age:28, birthYear:1990, //처음 생성만 되고 변경은 불가 readonly라서 } optional 뒤에 ? 붙이면 됨 입력해도되고 안해도 되고 ~ interface User{ name:string; age:number; gender?: string; readonly birthYear: number; [grade:number] : string; // 여러가지 입력하고싶을때 optional기능까지 함께 } let user : User ={ name:"xx", age:28, birth..
타입추론 let age:number = 30; let isAdult:boolean = true ; let a:number[] ={1, 2, 3]; let a2:rray =[1, 2, 3]; 튜플 Tuple 인덱스별로 타입이 다를 때 사용 let b:[string, number] b = ["z", 1]; b = [ 1, "z"]; // 불가 void 아무것도 반환하지 않을 때 사용 function sayHello():void { console.log("hello"); } never 항상 에러를 반환하거나 영원히 끝나지않는 함수타입으로 사용 function showError():naver{ throw new Error(); } function infLoop():naver{ while(true) { //do ..
// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(); } join (메소드) Array.join(separator?: string): string 배열의 모든 요소를 지정된 구분 기호 문자열로 구분하여 문자열에 추가 @param separator — 배열의 한 요소를 결과 문자열의 다음 요소와 구분하는 데 사용되는 문자열 생략하면 배열 요소가 쉼표로 구분 // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(","); } split (메소..
transform element변형시 사용 요소의 회전, 크기조절, 기울이기, 이동효과를 부여하는 함수 제공 transform: transform 함수; 함수 설명 함수 인자 값 translate(x,y) 요소위치를 가로로x, 세로로y만큼 이동 css기본단위 translateX(n) 요소위치를 가로로 x만큼 이동 css기본단위 translateY(n) 요소위치를 세로로 y만큼 이동 css기본단위 sclae(x,y) 요소크기를 가로로 x배, 세로로 y배 확대또는 축소 0또는 양수 sclaeX(n) 요소크기를 가로로 x배 확대또는 축소 0또는 양수 sclaeY(n) 요소크기를 세로로 y배 확대또는 축소 0또는 양수 skew(x-angle,y-angle) 요소를 가로로 x각도만큼, 세로로 y각도 만큼 기울임 ..
useState - 컴포넌트의 상태 - 기본적으로 데이터가 저장되는 곳 - 변수 대신 쓰는 데이터 저장공간 - 문자, 숫자, array, object 다 저장가능 - 웹이 App처럼 동작하게 만들고 싶음 - state는 변경되면 HTML이 자동으로 재렌더링됨 - 자주 바뀌는 중요한 데이터 state로 사용 import {useState} from "react"; //리액트 내장함수 사용 const [state, setState] = useState("초기값"); //state: (=초기값) 데이터, setState: 데이터를 변경하는 함수 useEffect Mount: 화면에 첫 렌더링 Update: 다시 렌더링 Unmount: 화면에서 사라질때 useEffect( ( ) => { } ) 인자로 콜백함수..