[Tutorial]3.개요 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. React는 무엇인가?2. tic-tac-toe 초기 코드 분석3. Props로 데이터 전달4. 컴포넌트에 기능 만들기5. 개발도구 1. React는 무엇인가? - React는 유저 인터페이스 개발을 위한 선언적, 효과적, 유연한 자바스크립트 라이브러리다. "컴포넌트"라고 부르는 작고 독립된 코드조각으로 복잡한 UI를 구성할 수 있다. React는 몇가지 종류의 컴포넌트를 갖고 있으며 지금은 React.Component부터 시작하겠다. XML 형태의 태그를 사용할 것이다. 우리는 화면에 보여줄 것을 React에게 전달하기 위해 컴포넌트들을 사용한다. 데이터가 변경.. [Tutorial]2.Tutorial 환경설정 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 진행하는 2가지 방법이 있다. 하나는 browser에 코드를 입력하는 것이고, 또 하나는 PC에 개발 환경을 설치하는 것이다.1. Browser에 코드 입력 - tutorial을 시작하는 가장 빠른 방법이다. 우선 여기로 이동한다. 비어있는 tic-tac-toe 게임보드와 React code가 나타날 것이다. 이 tutorial에서 이 코드를 수정할 것이다. 2. PC에 환경 설정(1번이 쉽게 때문에 2번은 넘어가도 상관없다.) 1) 최신 버전의 Node.js가 인스톨 되어 있어야 한다. (6버전보다 높은 Node, 5.2이상의 npm) 2) r.. [Tutorial]1.Tutorial을 시작하면서... △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 통해 작은 게임을 만들어 볼 것이다. 게임 개발자가 아니기 때문에 넘어가고 싶을 수도 있지만 한번 해보는 것을 권장한다. 이 tutorial을 통해 React 앱을 빌드하는데 필요한 기초적인 기술들을 익히게 될 것이며 마스터한 후에 React에 대해 더 깊이 이해할 수 있을 것이다. Tip 이 tutorial은 개발하면서 배우는 것을 좋아하는 사람을 대상으로 만들어졌다. 개념을 처음부터 배우고 싶다면 step-by-step 가이드를 확인하기 바란다. 이 tutorial과 step-by-step 가이드는 서로 부족한 내용을 보충해 줄 수 있다. 이.. 8.CSS Filter △ ▽ 1. CSS Filter 함수 - drop-shadow - grayscale - sepia - saturate - hue-rotate - invert - opacity - bright - contrast - blur 1. CSS Filter 함수1. CSS3 Filter 속성을 사용하면 블러나 색상 변경같은 효과를 요소에 적용할 수 있다. 필터는 일반적으로 이미지, 배경, 테두리의 효과를 조정하는데 사용된다. 이미지 필터링 같은 경우는 어떤 이미지에 대해 다른 스타일을 줄 수 있다. 웹사이트에 여러개의 이미지를 업로드하는 대신 하나의 이미지로 필터 속성만 바꿔가면서 시각적인 효과를 줄 수 있다. 필터 함수는 blur(), brightness(), contrast(), drop-shadow(), g.. 7.CSS3 Animation △ ▽ 1. Transitions 2. transform : rotate() 3. transform origin, translate(), skew() 4. scale(), 동시 적용. 5. Keyframes & Animations 6. Animation 속성 7. 3D 변환 1. Transitions1. CSS3는 하나의 property 값을 일정시간동안 다른 값으로 변경하는 것이 가능하다. - transition-property : 변환 적용할 property를 지정한다. - transition-duration : 변환 시간을 설정한다. - transition-timing-function : 지속 시간동안 어떻게 변환되는지 설정한다. - transition-delay : 변환 효과의 지연시간을 설정한다.. 6.CSS3 그라데이션&배경 △ ▽ 1. 선형 그라데이션 만들기 2. 방사형 그라데이션 만들기 3. background-size 속성 4. background-clip 속성 5. 투명 경계선 6. 멀티 배경 7. opacity 속성 1. 선형 그라데이션 만들기1. CSS3는 두개 이상의 특정한 색을 부드럽게 변환하는 그라데이션을 가능하게 한다. CSS3에는 Linear 와 Radial 타입 두가지의 그라데이션이 있다. 선형 그라데이션을 만들기 위해 적어도 두가지 색상지점을 선택해야 한다. 색상지점이란 부드럽게 표현하려고 하는 색상이다. 또한 시작점과 방향, 그라데이션 효과를 정할 수 있다. 색상은 색이름, 16진수값, RGB, HSL까지 사용 가능하다. 모질라 계열 브라우저에 사용하기 위해 접두어 -moz가 붙는다. div { wi.. 5.CSS3 기본 △ ▽ 1. CSS3 소개 2. CSS3 접두어 3. border-radius 속성 4. box-shadow 속성 5. 투명 효과 6. text-shadow 속성 7. 유사 클래스 (Pseudo-Classes) 8. 유사 요소 (Pseudo-Elements) 9. word-wrap 10. @font-face 1. CSS3 소개1. CSS3는 하위 버전들과 완벽하게 호환되는 CSS의 최신 표준이다. 새롭게 달라진 주요 기능들 - Border radius : 요소들 코너를 둥글게 하는 것이 가능해졌다. - Border images : 경계선에 이미지를 넣는 것이 가능해졌다. - Multiple backgrounds : 여러가지 배경을 요소에 넣을 수 있다. - Animations and effects : 애.. 4.레이아웃 △ ▽ 1. display 속성 2. visibility 속성 3. position 속성 4. float 속성 5. clear 속성 6. overflow 속성 7. z-index 속성 1. display 속성1. display : block HTML의 모든 요소는 직사각형의 박스다. display 속성은 직사각형 상자의 위치, 크기 등을 결정한다. block 요소는 시작과 끝에 줄바꿈을 취하고 block의 가로 길이는 가능한 최대로 한다. 대표적으로 span 태그는 block의 반대 개념인 inline 요소인데 display 속성으로 block으로 변경할 수 있다. span { display: block;} 2. display : inline inline 요소는 필요한 만큼만 가로 길이를 가져가고 줄바꿈.. 이전 1 2 3 4 다음
