- 전체보기(99)
- html(5)
- grid(4)
- link(3)
- font(3)
- filter(3)
- github(3)
- Table(3)
- git(3)
- form(3)
- transform(2)
- absolute(2)
- 선택자(2)
- placeholder(2)
- grid template columns(2)
- delete(2)
- padding(2)
- library(2)
- API(2)
- fixed(2)
- <method="post">(2)
- margin(2)
- time(2)
- tr(2)
- head(2)
- static(2)
- <a href>(2)
- fr(2)
- ol(2)
- value(2)
- font-size(2)
- Java Script(2)
- relative(2)
- inline(2)
- Holy Grail Layout(2)
- 객체(2)
- div(2)
- title(2)
- td(2)
- semantic tag(1)
- minify(1)
- font-famliy(1)
- sass-lang.com(1)
- 3차원 변형함수(1)
- enctype(1)
- stylus-lang.com(1)
- import(1)
- every(1)
- figure!(1)
- blend(1)
- stickey(1)
- 쓰레드(1)
- Center(1)
- text align(1)
- indexOf(1)
- animation-iteration-count(1)
- header(1)
- 가상클래스(1)
- GET(1)
- POST(1)
- animation-name(1)
- transition-delay(1)
- <meta charset="utf-8">(1)
- Thead(1)
- background-position(1)
- serif(1)
- grid-row-gap(1)
- stack(1)
- queue(1)
- 배포(1)
- Week(1)
- <strong></strong>(1)
- 가상요소(1)
- heap(1)
- nowrap(1)
- flex wrap(1)
- right(1)
- atom(1)
- minmax(1)
- findIndex(1)
- fontello(1)
- Index(1)
- url(1)
- th(1)
- color(1)
- <taxt>(1)
- <tel>(1)
- React(1)
- display block(1)
- <taxtarea cols="" rows="">(1)
- cascading(1)
- input(1)
- float(1)
- hosting(1)
- stylish(1)
- border_bottom(1)
- item(1)
- <form action>(1)
- useEffect(1)
- useState(1)
- event loop(1)
- animation-duration(1)
- multipart/form-data(1)
- left(1)
- http-equiv(1)
- img(1)
- px(1)
- @autofocus(1)
- git init(1)
- number(1)
- <details>(1)
- class(1)
- html editor(1)
- < input type="text">(1)
- web font(1)
- Flex(1)
- JavaScript(1)
- width(1)
- < input type="password">(1)
- npm start(1)
- tfoot(1)
- <month>(1)
- github pages(1)
- npm install gh-pages --save-dev(1)
- justify(1)
- uu][(1)
- method(1)
- main(1)
- login(1)
- br(1)
- p(1)
- span(1)
- selector(1)
- action(1)
- SOME(1)
- mark(1)
- buttons(1)
- <lingk>(1)
- <td rowspan>(1)
- inheritance(1)
- git remote add origin(1)
- wrap(1)
- background-blend-mode(1)
- @media(1)
- find(1)
- concat(1)
- inline level element(1)
- box-sizing(1)
- transition-property(1)
- 회원가입(1)
- 1세대(1)
- repeat(1)
- 2세대(1)
- Font Weight(1)
- background-attachment(1)
- mix-blend-mode(1)
- foreach(1)
- put(1)
- animation-direction(1)
- grid row end(1)
- <!DOCTYPE html>(1)
- key(1)
- select(1)
- option(1)
- li(1)
- 속성(1)
- 배열 함수(1)
- display inline(1)
- visited(1)
- media query(1)
- content="width=device=width, initial-scale=1.0"(1)
- 2차원 변형 함수(1)
- Sort(1)
- inline block(1)
- this(1)
- @Target(1)
- Preprocessor(1)
- transition-timing-function(1)
- mysql(1)
- git push origin master(1)
- CSS(1)
- input type = "submit"(1)
- grow(1)
- reset(1)
- hidden(1)
- sans-serif(1)
- lesscss.org(1)
- @property(1)
- git commit -m " "(1)
- 순서정렬(1)
- gh-pages branch(1)
- border(1)
- Margin collapsing(1)
- ul(1)
- line height(1)
- background image(1)
- upload(1)
- block(1)
- Multiple(1)
- inline-grid(1)
- email(1)
- name(1)
- transition(1)
- rotate(1)
- meta(1)
- background color(1)
- grid-column-gap(1)
- required(1)
- submit(1)
- shrink(1)
- sart(1)
- display(1)
- rem(1)
- db(1)
- <Dropdown List>(1)
- onClick(1)
- 연결선택자(1)
- git add .(1)
- perspecticve()(1)
- active(1)
- slice(1)
- height(1)
- semantic web(1)
- 변수(1)
- transition-duration(1)
- svg(1)
- Map(1)
- grid column start(1)
- border-box(1)
- wrap-reverse(1)
- <botton>(1)
- @midia(1)
- autocomplete(1)
- 국내폰트(1)
- Date(1)
- em(1)
- underline(1)
- Coding(1)
- utf 8(1)
- Routes(1)
- set(1)
- <td colspan>(1)
- <table border=" ">(1)
- tbody(1)
- range(1)
- multi column(1)
- 3세대(1)
- vscode(1)
- hover(1)
- <method="get">(1)
- block element(1)
- animation(1)
- tag(1)
- 구조 가상 클래스(1)
- background-repeat(1)
- keyframe(1)
- JSON Server(1)
- npm run deploy(1)
- web(1)
- 고정폭(1)
- article(1)
- footer(1)
- nav(1)
- aside(1)
- section(1)
- background-size(1)
Context
Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.Prop drilling을 피하기 위한 목적이라면 Component Composition (컴포넌트 합성)을 먼저 고려해보자.Use the useContext HookContext 적용 전Context
React useEffect Hooks
useEffect accepts two arguments. The second argument is optional.No dependency passed:An empty array:Props or state values:
JSON Server
{ "posts": { "id": 1, "title": "json-server", "author": "typicode" } , "comments": { "id": 1, "body": "some comment", "postId": 1 } , "p
RESTful Routes
Get : 데이터를 가져올 때 쓰임 (fetch하면 기본 명령어 속성이 Get임)Post : 데이터를 생성할 때 쓰임.Put : 데이터를 수정할 때 쓰임(Patch 라고도 불림)Delete: 데이터를 삭제할때 쓰임/items + get 명령어 = 아이템읽어오기/item
JavaScript 필수 배열 함수 정리
배열의 순서를 정렬한다. 해당 배열 자체를 바꾼다.인자로 비교 인자를 받는다.이해가 잘 간다.그러나 아래의 코드를 보자.원래같으면10, 24, 34, 115, 264가 리턴돼야 할 텐데이렇게 정렬이 된 이유는아스키코드 순서이기 때문에 무언가 뒤죽박죽이다.해결하는 방법은
새대별 웹 서비스의 특징 정리
1세대 웹은 브라우저를 통해 웹 서버로부터 HTML 파일을 받아오는 형식이었다.초창기 웹 사이트는 단순히 정보 제공 위주였기 때문에 user interaction이 많이 요구되지 않았다.HTML, CSS를 주로 사용했다.2세대 웹은 웹서버로부터 html 파일을 받는것에
position 속성
기준점을 잡았으면 다음 네 가지 속성을 이용해서 요소의 위치를 옮길 수 있다.요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.top : 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정bottom : 요소의 pos
Semantic Web & Semantic Tag
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."과거의 웹 문서는 많은 정보
CSS grid layout
그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 px을 이용하면 항상 크리가 고정되므로 반응형 웹 디자인에는 적합하지 않다. 그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위를 사용한다 . 예를 들어 너비가 같은 칼럼을 3개 배치한다면 fr
플렉스 박스 레이아웃
flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다. 속성 값으로는 wrap 이나 wrap-reverse로 지정한 후 웹 브라우저 화면의 너비를 늘리거나 줄여 보면 플렉스 컨테이너 너비에 따라 여러 줄로 표시되는
반응형 웹과 미디어 쿼리
< meta name="viewport" content="속성1=값1", "속성2=값2",...">뷰포트의 속성뷰포트 단위vw(viewport width): 1vw는 뷰포트 너비의 1%와 같다.vh(viewport height): 1vh는 뷰포트 높이의 1%와 같
애니메이션
@keyframes <이름> { <선택자> {<스타일>} } animation-name: <키프레임 이름> | noneanimation-duration: <시간>animation-direction: nomal | reverse | altern
트랜지션과 애니메이션
웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들면 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다..photo { transform: translate(50px,100px);
github page 배포하기
npm install gh-pages --save-dev "homepage" 주소를 추가합니다."homepage": "http://{gitID}.github.io/{react-project-name}"형식은 http://{사용자 이름}.github.i
