Frontend40 [HTML/CSS] flex 사용 시 가운데 정렬 기본 상태 //html 안녕하세요! hello! //css #outer_wrapper{ display: flex; } #inner_wrapper{ border: solid 1px black; } 1. flex-direction: column일 경우 align-items: center 사용 //css #outer_wrapper{ display: flex; flex-direction: column; align-items: center; } #inner_wrapper{ border: solid 1px black; } 2. flex-direction: row일 경우 justify-content:center 사용 //css #outer_wrapper{ display: flex; flex-direction: row.. 2022. 12. 7. [HTML/CSS] 네이버 메뉴바 문제1 창 줄어들 시 부족한 칸을 못 견디고 글자가 줄 바꿈됨 ☞ white-space: nowrap 사용 문제2 창 크기에 맞게 margin 할당하지 못함 ☞ white-space: 0 auto 사용(좌우 정렬) cf) 상하 정렬 시 white-space: auto 0 사용 2022. 11. 10. [Nomad coders] React_Effects https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org Effects의 필요성 component가 매번 rerendering 되지 않고(useState 사용) 처음에만 코드가 실행되게 만들고 싶을 때 첫 번째 render에만 코드가 실행되고, 이후 state 변화에는 실행되지 않도록 하기 위함 ex) API를 통해 데이터를 가져올 때 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); con.. 2022. 11. 10. [JavaScript] 함수와 일급 객체 일급 객체일급 객체의 조건익명 리터럴을 런타임에 생성 가능변수나 자료구조에 저장 가능//변수const foo = function() { console.log("foo");}const bar = function() { console.log("bar");}foo(); //foobar(); //bar//객체const obj = { foo, bar };console.log(obj); //{ foo: [Function: foo], bar: [Function: bar] }//배열const arr = [foo, bar];console.log(arr[0]); //[Function: foo]3. 함수의 매개변수에 전달 가능function sayHello() { return "Hello, ";}function gree.. 2022. 11. 8. [Nomad coders] React_Props Props 컴포넌트의 요소 값 부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기 //props 사용 전 function SaveBtn(){ return Save Changes; } function ConfirmBtn(){ return Confirm } function App() { return ( ); } SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트는 text만 다름 => 따라서 둘의 부모 컴포넌트인 Btn 컴포넌트 생성 //props 사용 후 function Btn(props){ return {props.text}; } function App() { return ( ); } 여기서 props는 Btn({text: "Save Changes"}) 형태로 Btn 함수 인자로 전달됨 props - {.. 2022. 11. 8. [Nomad coders] React_응용 단위 converter ※ label Minutes label에 있는 text를 클릭하면 label의 for의 값과 일치하는 id값으로 이동한다. 분 -> 시간 html 요소 구성하기 Super Converter Minutes Hours onchange 요소 사용 2. js로 입력값 받은 값으로 minutes을 변경 event.target.value 사용 Minutes의 값과 Hours의 값은 동일 Hours의 값은 수정할 수 없음 => onChange event가 없기 때문 3. Minutes 값 Hours 로 변경하기 4. reset 버튼 생성 후 기능 구현 Reset 시간 -> 분 flip 함수 이용 flip 버튼을 클릭하면 hours와 minutes 입력 여부 toggle Flip 2. 1번 과정.. 2022. 11. 8. 이전 1 ··· 3 4 5 6 7 다음
