습관제작소

참고 사이트 W3Schools position static : 기본값. 움직임 불가능 relative : 부모 태그로부터 자신의 위치 결정됨. 원래 자기가 있던 위치에서 이동 absolute : 부모의 위치가 기준. relative 와는 기준이 다름. 부모가 static이면 부모를 무시함. 부모가 static이고 조부모가 static이 아닌 경우 조부모가 기준. display는 더 이상 block 아님 fixed : 시조 태그의 위치로부터 이동. 심지어 스크롤도 무시함. display는 더이상 block아님 App.tsx import "./styles.css"; export default function App() { return ( granDad dad me ); } styles.css .test { ..

CSS 기초! font font_size(rem) color test-alihn import "./styles.css"; export default function App() { return ( test1 ) } .test { font-size: 6rem; color: tomato; /* 선색은 컬러를 따라가기 때문에 지정해주는게 좋다 */ text-align: justify; border: 1px solid black; } border border 가지고 놀기 import "./styles.css"; export default function App() { return ( test1 test2 ); } .test { border: 10px solid black; padding: 50px; backgro..

hook useState() userEffect() use___() useState() state : 함수가 끝나도 사라지지 않는 변수 컴포넌트의 데이터 저장소 한국어로 '상태' 라고 함 "state는 변한다" import {useState} from "react"; // 리엑트 라이브러리에서 제공 임포트해야함 import "/src/styles.css"; // 절대 경로 export default function App() { const [count, setCount] = useState(0); return ( App {count} setCount(count +1)}>plus ); } setState State 데이터는 오직 부모..App에서만 관리해야한다. App.tsx import {..

map() 함수 사용하여 prop 프론트엔듣에선 백엔드로부터 받을 데이터를 정확히 알고 있어야 한다. 컴포넌트를 반복할 때 map() 을 사용하고, key 를 달아준다. json 데이터 준비 { "data": { "students": [ { "id": 0, "name": "백성연", "age": 29, "isGirl": true }, { "id": 1, "name": "백", "age": 29, "isGirl": true }, { "id": 2, "name": "성연", "age": 29, "isGirl": true } ] } } tsconfig.json : "resolveJsonModule": true