whatisthis?

React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 **.. mywebproject.tistory.com 입문편의 예제를 이어서 진행함. (지난 포스팅 참조) 컴포넌트에 state를 추가 let count = 0; const Container = () => ( Total clicks: {count} Click me ); 우선, count변수에 저장된 값이 출력되도록 {count}와 같이 적는다. 그리고, button을 클릭했을 때 카운트..

React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를. mywebproject.tistory.com - 이전 포스팅에서 요소를 만들때는 -const 변수명 = React.createElement(태그명, {props Obj}, content} 와 같이 작성했었다. 이 방법은 기본적이지만 어려운 방식이고, 이번 시간에 더 효율적이고 쉽게 element를 생성하는 법을 알아보겠다. JSX 소개 – React A JavaScript library ..

React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해 mywebproject.tistory.com const root = document.getElementById("root"); const span = React.createElement("span", null, "Hello!"); const btn = React.createElement("button", null, "Click me"); 여기서 span과 btn을 동시에 root위치에 보내려면 방법1 / 배열로 묶듯이 함 ReactDOM.r..

React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해보자. - vanila JS만 사용해서 버튼을 클릭하고, 클릭할때마다 1,2,3,4, .. 회가 뜨도록 하는 간단한 앱을 만들자. vanila.html Total clicks: 0 Click me 그러면, 이제 리액트를 사용했을 때를 보기 위해 리액트를 설치하는 코드를 두개 추가해야한다. 새로운 파일인 index.html에 body 아래에 script태그 두줄을 추가하고, 콘솔창을 켜서 React라고 쳐보면 아래와 같이 떠야한다. 위 코드는 react.js와 react-dom 두가지를 ..

이 기술을 배워야하는지? 1 / 누가 이 기술을 사용하는지, 규모가 어느정도 되는지. 2 / 사용하는 이들에게 얼마나 중요한 기술인지. 3 / 계속해서 사용 가능한지. (전망) - 리액트는 FaceBook에서 처음 만들었고, 모든 FaceBook 웹사이트를 다시 만들었다. 4/ 큰 커뮤니티를 가지고 있다. - 자바스크립트와 아주 가깝기 때문에 대부분의 작업은 js 작업이다. >> 더 나은 js 개발자가 되기 위해 배우는 라이브러리. 5/ 리액트를 기반으로 제작하는 프레임워크 등이 존재. -> 예- 리액트 native. (리액트 JS로 안드로이드 or iOS 어플 제작 가능) React 시작하기 - Web 개발 학습하기 | MDN 이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경..

보호되어 있는 글입니다.

이번 예제는 모달창을 제작하는 position 연습 예제이다. index.html Manage Subscriptions You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in the form here below and you are all set. Subscribe style.css * { box-sizing: border-box; margin: 0; } body { width: 100%; height: 100vh; font-family: "Nunito Sans", sans-serif; color: #273444; background-color: #e5e5e5..

CSS - Position prac.02 CSS의 포지션 속성으로 아래와 같은 product card를 만드는 예제이다. index.html 그랜드캐년+앤텔롭+홀슈밴드 자유일정 김버그트래블 1인 180,000원 - 처음에는 svg파일을 img태그>a태그로 하려고 했는데 그냥 어떤 기능을 할지 몰라 button으로 마크업한 후에 css로 백그라운드이미지를 입히기로 하였다. style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; background-color: #7d858f; } h1 { font-size: 22px; font-weight: 5..

보호되어 있는 글입니다.

z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org /* 키워드 값 */ z-index: auto; /* 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */ /* 전역 값 */ z-index: inherit; z-index: initial; z-index: unset; 수직방향으로 붕 뜨게되면, z-index라는 레벨이 생김. 만약 포지션이 겹친다면 나중에 오는 요소..