profile
꾸준히!

[css]img삽입 시 하단 여백 제거

img태그를 통해 이미지를 삽입하다보면 하단에 애매하게 2~4px정도 여백이 생긴다.우선 해결방법은1) display 변경2) vertical-align 변경둘 중에 하나를 img태그에 적용해주면 해결된다.발생원인은img태그는 기본적으로 inline요소인데, inlin

2022년 6월 15일
·
0개의 댓글
·

[JS]e.target, e.currentTarget의 비교

요약부터 하자면,e.target : 이벤트 발생대상의 자식요소e.currentTarget : 이벤트 발생대상 즉, 클릭요소의 이벤트가 걸린 부모가 선택됨예제 코드로 보자면 아래와 같다.위와 같은 상황에서 < p > 를 클릭한다면,사진과 같은 결과를 확인할 수 있다

2022년 6월 8일
·
0개의 댓글
·

[JS]자바스크립트 스크롤이벤트 - 페이드인

화면을 스크롤하면 요소들이 스르륵 나타나는 기능을 만들어 보자.현재 화면의 높이대상 요소의 절대좌표이벤트 대상의 절대좌표(px)가 현재 화면(px)에 진입하면 이벤트를 작동하는 방식이다.우선 현재 화면의 윈도우사이즈와 요소의 절대좌표를 구해보자그리고 이벤트css를 적용

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

[JS]자바스크립트 스크롤이벤트-좌표가져오기, 휠 업다운 확인

자바스크립트에서 스크롤 이벤트를 적용하기 위한 방법을 적어본다.window객체를 이용하여 현재 스크롤 위치를 가져올 수 있다.스크롤을 할 때마다 현재 Y값을 px로 출력한다.좌우는 scrollX로 사용하면 된다.스크롤 할 때마다 작동되는 함수라 성능이슈가 발생할 수도

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

[JS]자바스크립트 선택자

DOM 제어를 위한 선택자에 대해 알아보자.기본적으로 document.querySelector(All)을 통해 요소를 선택한다.하지만 선택한 요소의 주변 요소를 선택하고 싶다면..?자주 쓸만한 몇가지를 나열해본다.element.parentNodeelement.paren

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

[CSS]부드럽게 나타나는 텍스트

텍스트 하나하나 부드럽게 나타나는 효과에 대해 알아보자.물론 TypeIt같은 멋진 라이브러리도 있지만순수 하드코딩으로 효과를 내보고 싶었다.기본 투명도를 0으로 주고,투명도를 1로 변경되는 애니메이션을 만들어준다.텍스트 요소 전체를 변수에 지정하고기본 타이머를 지정한

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

[CSS] 반응형 정사각형 만들기

공부하며 모르거나 헷갈렸던 내용을 정리중입니다.페이지 제작중 반응형 정사각형 만드는곳에서 막혔다.width, height 크기를를 px이나 %로 아무리해도 답이 없었다.구글링을 통해 방법을 찾았고 아래와 같다.컨텐츠를 감쌀 box div를 만들고 안에 컨텐츠를 넣는다.

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

[React] 렌더링 성능저하 해결하기

만약 아래와 같은 상황이라고 하자input에 데이터를 입력하면 10000개의 div가 생기는 코드다.이런 대량의 데이터를 처리하면 당연히 버벅일수밖에 없는데,이런 버벅이는 현상을 개선할 수 있는 새로운 hook이 react 18ver.에 나왔다. react 공식문서us

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

[React] Redux toolkit사용하기

state를 어디서든 사용할 수 있게 해주는 고마운 라이브러리다. 프로젝트 규모가 커질수록 state관리가 지저분해지는데(props -> props -> props...)redux를 사용하면 state를 비교적 깔끔하게 사용 가능하며, 일반 props방식과 다르게 자식

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

[CSS] width(min-content, max-content, fit-content)

width를 적용하는방법은 여러가지가 있습니다.절대값을 적용하는 px상대값을 적용하는 %이 외의 속성으로는 다음과 같습니다.글보다는 그림으로 보시면 이해가 빠를것입니다.엘리먼트의 너비를 최소로 줄이고 싶을 때 사용합니다.최소 너비는 엘리먼트의 컨텐츠 크기로 결정됩니다.

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

[JS] 새로고침 시 스크롤 위치 기억

브라우저 새로고침 시 스크롤이 최상단으로 이동되는 현상이 있다.상황에 따라 다르겠지만 여간 번거로운게 아니다..window history객체의 scrollRestoration속성을 사용하여 스크롤위치를 컨트롤 할 수 있다.끝.

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