전체 글44 css 속성 + 연산자는 선택자의 인접한 바로 뒤에 있는 요소만 선택한다. :hover 의사코드 마우스가 올라갈 때 바꿀 수 있는 css @media 반응형 웹을 하기위한 기준을 택하는 것. 2020. 1. 14. 간단한 TodoList만들기 - (2) 1편 에 이어서 시작! 1편에서 만들어 놨던 각각의 컴포넌트들을 App.js에 추가 해준 컴포넌트들에서 각각의 리스트 아이템을 보여주기 위해서 훅을 사용한다. import React, { useState } from 'react'; import './App.css' import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; const App = () => { const [todos, setTodos] = useState([ { id:1, contents: '리액트 연습', check: true },.. 2020. 1. 13. closure(클로저) 클로져는 내부 함수의 렉시컬 환경 컴포넌트에서 외부 렉시컬 환경 컴포넌트를 참조하고 있게 되면서 사용할 수 있을 것을 말하게 된다. function a(){ const name = 'a component'; function b(){ console.log(name); } return b; } const c = a(); console.log(c());//a component 위에서 보게 되면 내부 함수 b()가 외부 함수 a()의 변수 name을 참조해 사용된다. 이미 a()의 라이프 사이클은 c에게 b()를 반환하고 사라졌다. 하지만 c는 마치 함수 a()의 변수 name를 사용이라도 하듯 접근할수있다. 이것은 렉시컬 환경 스코프로인해서 함수가 정의된 곳에따라 상위 스코프의 참조가 가능해지기 때문이다. 클.. 2020. 1. 13. 간단한 TodoList만들기 - (1) 지금 까지 배웠던 것을 적용해서 간단한 todolist를 만드려고 한다. vscode를 열고 깃도 사용하려고 하기 때문에 터미널을 bash로 진행한다 $ yarn create react-app todolist 명령어를 입력해서 새로운 리액트 프로젝트를 생성한다. 함께 Git 도 연동한다 연동되고 나면 이제 시작해보자. 먼저 리액트 App.js와 index.css 내용을 지운 후 배경색을 바꿔주자. body{ background: gray; } 이제 본격적으로 TodoList를 만들자. src에 compnents 폴더를 만들고 그 안에 만들어지는 컴포넌트를 넣을 것이다. 관습이라고 한다. 먼저 TodoList가 보일에 해당되는 것들이 보일 template를 만들고 css파일도 만든다. template im.. 2020. 1. 10. 재귀함수 자기 자신을 호출하는 함수를 재귀 함수라고 한다. 가장 유명한 팩토리얼 재귀함수 function factorial(n){ if(n 2020. 1. 10. 배열 concat 기존 배열에 합쳐서 새로운 배열을 반환 map 기존 배열 내의 각각에 대하여 주어진 함수를 호출한 결과 filter 기존 배열 내의 각각에 대하여 true 값들을 갖는 새로운 배열 반환 2020. 1. 9. 객체 객체에서 key값을 [] 감싸면 그 안에 있는 값이 실제 key값이 된다 const key = 'keyName'; const foo = { [key]: 1}; // {keyName: 1} 2020. 1. 8. css 개념정리 (2) 전편 저 css 개념 정리 (1)에 이어서 알아보자 position 위치 값의 변화를 준다. 기본값으로 static을 갖는다. 값을 relative로 바꾸면 상대적으로 자신의 위치에서 변화가 일어난다. absolute 자신의 기준점인 static을 갖고 있지 않은 상위 부모를 기준으로 갖는다. b a fixed는 상단의 배너의 상단 고정처럼 absolute와 비슷한 거 같지만 스크롤을 내려도 계속해서 보이는 그 위치에 존재한다. 이밖에도 floatm flex 등 layout 을 담당할 수 있는 기능들, 또 css의 속성들은 아래의 링크를 참고하면 좋을 것 같다 CSS 참고서 CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요.. 2020. 1. 7. css 개념정리 (1) css의 기본 개념을 정리해본다. 선택자 { 속성 : 값 } 이렇게 구성되어있다. css를 적용시키는 방법 html에 직접 적용 - html 태그에 직접 적용 inline 스타일 태그안에 만들어서 적용 internal css 파일을 만들어서 적용 external //external.css external{ background-color: bisque; } 보통 마지막 방법을 선호한다. 상속 간단하게 div 태그 안에 있는 태그들 까지도 다 css가 들어간다. 상속이라 하면 뭔가 거창할 거 같지만 당연하다고 생각되는 것이다. d span (단 border 나 padding 같은 속성들은 상속되지 않는다.) css가 적용되는 순서 html 상에서는 inline, internal, external의순서로 적용.. 2020. 1. 7. 이전 1 2 3 4 5 다음
