profile
안녕하세요~
태그 목록
전체보기 (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)
post-thumbnail

Context

Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.Prop drilling을 피하기 위한 목적이라면 Component Composition (컴포넌트 합성)을 먼저 고려해보자.Use the useContext HookContext 적용 전Context

2022년 5월 29일
·
0개의 댓글
post-thumbnail

React useEffect Hooks

useEffect accepts two arguments. The second argument is optional.No dependency passed:An empty array:Props or state values:

2022년 5월 29일
·
0개의 댓글
post-thumbnail

useState

Import useState Initialize useState Example:

2022년 5월 29일
·
0개의 댓글
post-thumbnail

객체에서 value 값으로 Key 값 찾기

🌭 객체에서 value 값으로 Key 값 찾기

2022년 5월 29일
·
0개의 댓글
post-thumbnail

JSON Server

{ "posts": { "id": 1, "title": "json-server", "author": "typicode" } , "comments": { "id": 1, "body": "some comment", "postId": 1 } , "p

2022년 5월 14일
·
0개의 댓글
post-thumbnail

RESTful Routes

Get : 데이터를 가져올 때 쓰임 (fetch하면 기본 명령어 속성이 Get임)Post : 데이터를 생성할 때 쓰임.Put : 데이터를 수정할 때 쓰임(Patch 라고도 불림)Delete: 데이터를 삭제할때 쓰임/items + get 명령어 = 아이템읽어오기/item

2022년 5월 14일
·
0개의 댓글
post-thumbnail

JavaScript 필수 배열 함수 정리

배열의 순서를 정렬한다. 해당 배열 자체를 바꾼다.인자로 비교 인자를 받는다.이해가 잘 간다.그러나 아래의 코드를 보자.원래같으면10, 24, 34, 115, 264가 리턴돼야 할 텐데이렇게 정렬이 된 이유는아스키코드 순서이기 때문에 무언가 뒤죽박죽이다.해결하는 방법은

2022년 5월 12일
·
0개의 댓글
post-thumbnail

새대별 웹 서비스의 특징 정리

1세대 웹은 브라우저를 통해 웹 서버로부터 HTML 파일을 받아오는 형식이었다.초창기 웹 사이트는 단순히 정보 제공 위주였기 때문에 user interaction이 많이 요구되지 않았다.HTML, CSS를 주로 사용했다.2세대 웹은 웹서버로부터 html 파일을 받는것에

2022년 5월 10일
·
0개의 댓글
post-thumbnail

inline, inline-block, block 에 대해서

![](https://velog.velcdn.

2022년 5월 10일
·
0개의 댓글
post-thumbnail

position 속성

기준점을 잡았으면 다음 네 가지 속성을 이용해서 요소의 위치를 옮길 수 있다.요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.top : 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정bottom : 요소의 pos

2022년 5월 10일
·
0개의 댓글
post-thumbnail

Semantic Web & Semantic Tag

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. &lt;img> 태그를 사용하는 것과 &lt;div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."과거의 웹 문서는 많은 정보

2022년 5월 9일
·
0개의 댓글
post-thumbnail

CSS grid layout

그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 px을 이용하면 항상 크리가 고정되므로 반응형 웹 디자인에는 적합하지 않다. 그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위를 사용한다 . 예를 들어 너비가 같은 칼럼을 3개 배치한다면 fr

2022년 5월 5일
·
0개의 댓글
post-thumbnail

플렉스 박스 레이아웃

flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다. 속성 값으로는 wrap 이나 wrap-reverse로 지정한 후 웹 브라우저 화면의 너비를 늘리거나 줄여 보면 플렉스 컨테이너 너비에 따라 여러 줄로 표시되는

2022년 5월 5일
·
0개의 댓글
post-thumbnail

반응형 웹과 미디어 쿼리

&lt; meta name="viewport" content="속성1=값1", "속성2=값2",...">뷰포트의 속성뷰포트 단위vw(viewport width): 1vw는 뷰포트 너비의 1%와 같다.vh(viewport height): 1vh는 뷰포트 높이의 1%와 같

2022년 5월 4일
·
0개의 댓글
post-thumbnail

애니메이션

@keyframes &lt;이름> { &lt;선택자> {&lt;스타일>} } animation-name: &lt;키프레임 이름> | noneanimation-duration: &lt;시간>animation-direction: nomal | reverse | altern

2022년 5월 4일
·
0개의 댓글
post-thumbnail

트랜지션과 애니메이션

웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들면 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다..photo { transform: translate(50px,100px);

2022년 5월 4일
·
0개의 댓글
post-thumbnail

github page 배포하기

npm install gh-pages --save-dev "homepage" 주소를 추가합니다."homepage": "http&#x3A;//{gitID}.github.io/{react-project-name}"형식은 http&#x3A;//{사용자 이름}.github.i

2022년 5월 2일
·
0개의 댓글
post-thumbnail

vscode HTML 기본 세팅!

!youtube9qP0wjQQ6p4

2022년 5월 2일
·
0개의 댓글