profile
프론트엔드 개발자 지망생
post-thumbnail

React Hook&Context

Hook은 비교적 최신에 나온 기술로 다음과 같은 내용을 가능하게합니다class에서만 사용 가능하던 state와 life-cycle을 함수 방식으로 사용가능하게 해줌컴포넌트의 state관련 로직을 재사용할 수 있게 해줌이런 Hook으로 인한 변화때문에 함수 컴포넌트의

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

리액트 실전 활용

HOC(High Order Component) HOC는 원래 공식문서에도 설명될 만큼 중요한 개념이지만, 이걸 대체할 Hook이라는 개념이 나오면서 살작 덜 중요해졌습니다 이 HOC란 > advanced technique in React for reusing com

2022년 1월 21일
·
0개의 댓글
·

SEO

https://marketingexit.com/seo%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EB%AC%B4%EC%A1%B0%EA%B1%B4-%ED%8C%94%EB%A6%AC%EB%8A%94-%EA%B6%81%EA%B7%B9

2022년 1월 18일
·
0개의 댓글
·

접근성

https://developer.mozilla.org/en-US/docs/Web/Accessibility

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

CSS 기타 내용들

적용 방법Reset.csscss가 자체적으로 가지는 한계를 극복하기위해서 css의 처리 이전에 하나의 단계를 추가한 것입니다기존의 문법에서 허용하지 않던 표현을 가능하게 함으로서, 효율적으로 코드를 작성하게 해줍니다전처리기를 이용해 코드를 작성하면, 변환기를 통해 자동

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

정렬(Align)

이 링크에 다음과 같은 항목별로 정리되어있습니다위 링크도 원본 페이지를 참고했다고 합니다inline/inline-block 요소block 요소복수의 block 요소Flexbox 활용inline/inline-block 요소1-1. 한줄일 때1-2. 여러줄일 때1-3. f

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

Layout-Flexbox

HTML의 모든 요소가 기본적으로 가지는 block, inline... 같은 default display와는 다르게, flex와 grid는 별도로 지정해서 사용하는 레아아웃 방식입니다flex와 grid 이전에는 table, float과 같은 방법으로 페이지 레이아웃을

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

Layout

레이아웃(배치)란 웹사이트의 구성 요소들을 배치할 고간을 분할하고 정렬하는 것을 말합니다이런 과정을 위해 과거에는 table 요소를 활용하기도 했지만, 코드의 양도 늘어나고 반응형 웹으로의 적용도 어려워서 거의 사용하지 않습니다얼마전까지 float을 사용해 페이지를 구

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

CSS 효과

css를 사용하면 요소나 텍스트에 그림자(Shadow) 효과를 부여할 수 있습니다텍스트에 그림자 효과를 주는 속성입니다작성 방식은 다음과 같습니다요소에 그림자를 부여하는 속성입니다작성 방식은 다음과 같습니다그레이디언트(Gradient)는 2가지 이상의 색을 혼합해 배경

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

벤더 프리픽스

CSS도 여러 과정을 거쳐서 현재의 CSS3이 표준으로 정해졌습니다. 그런 과정동안 여러 기능이 추가, 삭제되었는데, 현재도 계속 새로운 기능이 추가되고 있습니다이런 새로운 기능을 모든 브라우저가 지원하지는 않습니다. 그래서 사용 검사 사이트를 통해 해당 태그나 속성을

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

float

float은 레이아웃을 구성할 때 block 요소를 가로 정렬하기위해 사용되는 속성입니다과거에는 많이 사용되었지만 현재는 간편하게 flex 레이아웃을 통해 정렬을 하기도합니다하지만 flex를 지원하지 않는 IE같은 오래된 브라우저를 대상으로 작업한다면 여전히 float

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

position

position은 요소를 배치할 때 그 기준을 지정해 주는 속성입니다postion으로 배치 기준을 설정하고, offset으로 기준에 따른 배치를 설정합니다offset은 top, bottom, left, right, z-index 속성으로 구성되어있습니다offset은 음

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

font와 text

CSS는 이 폰트(font)에 관한 다양한 기능을 제공합니다. 글꼴의 크기, 색, 정렬, 글꼴 변경, 두께, 행간 등 다양한 내용에 대한 속성을 지정할 수 있습니다폰트는 여기 정리된 내용 이외에도 다양한 옵션이 제공됩니다폰트의 크기 지정 p { font-size: 2.

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

배경

배경은 요소의 배경에 효과를 주는 속성입니다. 배경은 태그의 종류에 따라 지원 여부가 다릅니다background는 단축 속성으로 다양한 세부 속성들을 가집니다. 이를 이용해 배경색변경, 이미지추가, 이미지반복, 고정여부, 크기 등같은 작업들을 할 수 있습니다단축 속성의

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

display

display display 속성은 레이아웃에서 자주 쓰이고 중요한 속성 중 하나입니다 display가 가지는 속성값은 다음과 같습니다 요소가 어떻게 배치될 지 설정하는 속성으로 값에 따라 요소의 배치가 달라집니다 display는 요소가 기본적으로 가지는 값과

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

박스 모델

모든 html의 요소들은 일종의 박스(box)📦 형태의 영역을 가지고 있습니다. 박스는 우리가 아는 것처럼 사각형의 영역입니다이 박스는 다음 그림과 같은 요소들로 구성됩니다브라우저는 박스 모델의 크기와 속성(색, 배경, 모양 등), 위치를 근거로해서 요소를 렌더링합니

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

CSS 속성 값의 단위

css의 속성은 다양한 형태의 값을 활용하는데, 이런 값으로 올 수 있는 대상을 정리해보려고합니다 키워드 크기 단위 색상 표현 단위 등 키워드 각 속성에 따라 값으로 사용할 수 있는 키워드(keyword)가 존재합니다 display 속성의 경우 block, in

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

Git Stash

작업 도중 브랜치를 변경해야할 때, 만약 브랜치를 변경하려고 하면 다음 경고를 볼 수 있습니다경고 문구를 보면 commit과 stash라는 옵션을 줍니다. 아직 작업을 완료하지 않았는데 커밋하기는 좀 그럴 때 stash라는 기능을 사용합니다stash는 마무리하지 않은

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

.gitignore

.gitignore는 git의 버전관리에서 제외할 파일 목록을 지정하는 파일입니다프레임워크를 사용하거나 라이브러리를 사용할경우 모든 파일을 깃헙에서 관리하는 건 비효율적이기 때문에 이런 설정 파일을 사용합니다직접 이 파일을 만들어도 되고, 다른 도구를 사용해서 만들어도

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

Github 협업

asdf

2022년 1월 10일
·
0개의 댓글
·