profile
[...Way to FrontEnd Web Developer]
태그 목록
전체보기 (99)CSS(14)JavaScript(11)자바스크립트(6)React(5)Props(5)git(3)Fetch(3)html(3)http(3)State(3)불변성(2)styled components(2)동기(2)리액트(2)로그인(2)알고리즘(2)비동기(2)Date객체(2)TIL(2)path parameter(2)객체(2)lexical(1)비어있는 props(1)배열(1)asynchronous(1)페이지 이동(1)component(1)렉시컬(1)콜백(1)refactoring(1)npm run build(1)even digits(1)promise(1)커스텀 훅(1)캐러셀(1)ScrollIntoView(1)ReactComponent(1)terminal(1)text align(1)React 개발환경(1)svg 파일(1)dropdown(1)스코프 체인(1)객체 속성명(1)Restful(1)스코프(1)rebase(1)동적 라우팅(1)literal(1)linux(1)배포(1)deployment(1)transform(1)REST(1)가상요소(1)세션(1)git remote(1)모듈(1)통신(1)컴포넌트(1)윈도우(1)물음표 연산자(1)consecutive(1)url(1)유튜브(1)repository url(1)type="button"(1)button type(1)permission denied(1)callback(1)전역서체(1)Module(1)프론트엔드(1)input(1)scalex(1)toDateString(1)사용법(1)Recoil(1)await(1)css 변경(1)useState(1)계산된 속성명(1)자동 슬라이드(1)async(1)commit 돌아가기(1)form태그(1)return(1)사용자지정(1)class(1)remote url(1)Flex(1)pagination(1)array 요소 추가(1)github pages(1)이미지 공백(1)Uncaught TypeError(1)ESLint(1)Prettier(1)optional chaining(1)무한 슬라이드(1)layout(1)함수 바인딩(1)생성자함수(1)access token(1)무한렌더링(1)keyframes(1)set 객체(1)deploy(1)쿼리스트링(1)제거(1)REST API(1)font family(1)사용자계정(1)회원가입(1)이전 커밋(1)Computed property Name(1)특정요소(1)z-index(1)자동 스크롤(1)window.open(1)before(1)build(1)script tag(1)input 태그(1)Globalstyle(1)new(1)useMemo(1)useRef(1)synchronous(1)inline block(1)리팩토링(1)함수(1)grid 기초(1)비어있는 객체(1)checkbox(1)클릭 이벤트(1)transform-origin(1)semantic(1)form 태그(1)useCallback(1)날짜(1)map method(1)props 객체(1)window.location.(1)추가(1)Date object(1)개발자(1)binding(1)inline(1)transition(1)컴포넌트데이터전송(1)custom hook(1)클래스(1)after(1)페이지네이션(1)git workflow(1)animation-fill-mode(1)pages(1)array(1)form(1)youtube(1)실행 컨텍스트(1)user(1)Query String(1)조건부렌더링(1)aws(1)바인딩(1)css 변화(1)삭제(1)new Set(1)동영상 삽입(1)svg(1)react component return(1)Database(1)Map(1)iframe(1)Token(1)유효성(1)svg 이미지(1)연속 수(1)pseudo element(1)특정 요소 자동 스크롤(1)수정(1)grid(1)algorithm(1)생성자(1)Stateless(1)netlify(1)특정 요소(1)property name(1)img 중앙정렬(1)date 객체(1)이전 commit(1)query parameter(1)웹폰트(1)animation(1)Event(1)
post-thumbnail

Dropdown Menu 구현 연습

width: max-contentfloat: rightfloat 속성은 요소가 주변 인라인 요소들과의 배열에서 열외되어 독자적인 위치를 갖게 되는데, 주변 텍스트 및 인라인 요소들은 해당 요소를 둘러싸는 형태로 배치된다기본은 none, right 부모 요소의 맨 우측,

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

z-index 속성

위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.auto박스가 새로운 쌓임 맥락을 생서하지 않음. 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다integer현재 쌓

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

가상요소(Pseudo-Element)

가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다.가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부

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

[CSS] | 이미지 - 컨테이너 공백 없애기

컨테이너에서 inline 요소 수직정렬: baseline 기준💘baseline이란?기준선(baseline)- 꼬리 부분(p, q, j, y등에서 아래 삐침)을 뺀 밑 선디센더(descender) -기준선보다 밑으로 처진 부분(p, q, j, y 등에서 아래 삐침)어센

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[CSS] | grid 기초

👉 grid의 column 개수를 미리 정하고, 각 column의 너비를 지정column의 개수가 미정인 경우 (row는 개수가 정해져 있을 때), grid-auto-columns 특성을 이용한다CSS 미적용grid-template-columns: repeat(3,

2021년 12월 27일
·
0개의 댓글
post-thumbnail

사용자 지정 CSS 속성

거대한 웹 페이지의 경우 수 많은 CSS 속성들이 적용된다수 많은 html 요소들 중 동일한 CSS 속성 값들이 중복적으로 사용되는 경우는 매우 많다.특히 text의 경우 웹 페이지 관련 내용들은 서로 동일하게 스타일링 하는 것이 매우 중요한데 이러한 경우 text의

2021년 12월 10일
·
0개의 댓글

Image 중앙 정렬

2가지 방법img element를 display: block;을 사용하여 block element로 만들기margin: auto;를 넣어 양쪽에 동일한 margin 값 분배Parent element에 text-align: center; 적용

2021년 12월 7일
·
0개의 댓글

flex 기초

👉3가지만 기억하자justify-content: center, flex-end, space-around/between/evenlyalign-item: center/flex-endflex-direction: row(default), column👉child elemen

2021년 12월 5일
·
0개의 댓글

Layout 결정 방법

웹 페이지 레이아웃을 결정하는 방법position propertyflexfloatinline-blockParent element를 기준으로 element의 위치를 결정top, right 등의 부가적인 property 설정 없을 시, static과 동일하게 취급Child

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

HTML & CSS 복습

기억해야 할 Tip 📔text-align 텍스트를 정렬하는 CSS property 부모 element를 기준으로 inline element를 정렬할 때 사용하기도 한다 >css { box-sizing: border-box; margin: 0; padding: 0; }

2021년 12월 5일
·
0개의 댓글

HTML-font family

이게 정확하게 무엇인가?HTML의 기본적인 attribute들은 알겠는데, font-family의 경우 항상 그 사용법이 헷갈린다.정리 좀 하자.family-name: 우리가 흔히 생각하는 '글꼴'을 말한다. ex)굴림체, 궁서체generic-font: 비슷한 형태의

2021년 12월 5일
·
0개의 댓글

CSS Layout

HTML element들의 위치를 지정하는 특성4종류 value로 위치 특성을 지정staticrelativeabsolutefixedposition 특성을 별도로 지정해주지 않았을 때, 기본적으로 element가 갖는 특성위치가 특정하게 지정되지 않은 기본 상태를 의미"

2021년 12월 1일
·
0개의 댓글
post-thumbnail

Codecademy-CSS 2차

폰트를 지정하는 특성family-name에는 내가 정하고 싶은 폰트를 입력generic-family: 비슷한 형태의 글꼴 집합만약 브라우저가 family-name의 폰트를 지원하지 않는다면 generic-family의 집합에서 폰트가 선택된다밑의 initial, inh

2021년 11월 10일
·
0개의 댓글
post-thumbnail

Codecademy-CSS 수업

<기억해 두어야 할 키워드만 요약>attribute에 특정 값을 타겟으로 지정하여 html element 선택HTML class, id 특성 추가 없이 특정 html element 선택 가능자주 쓰이진 않음문법은 위와 같다CSS에서 element를 선택할 때 사용

2021년 11월 10일
·
0개의 댓글