yebeen blog

문제backgroun-color를 설정할 때 padding까지 배경색이 먹는 문제 발생  해결책다음과 같은 속성 사용하기 background-clip: padding-box;  추가정보background-clip의 값은 padding-box, border-box, content-box가 있다.- padding-box : 배경색이 padding+content에 영향을 미친다.- border-box : 배경색이 border+padding+content에 영향을 미친다.- content-box : 배경색이 content에 영향을 미친다.    [ 참고 ] https://www.w3schools.com/cssref/css3_pr_background-clip.php W3Schools.comW3Schools off..

Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand  2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다.    ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus..

게시판 같은 곳에 텍스트의 길이가 너무 길어져 텍스트가 담긴 공간을 넘어가글씨가 댕강 잘리거나  문제가 발생한다.그러면 당연히 예쁘지않다!!!!! 그래서 말 줄임표를 주로 사용하는데 사용하려할때마다 까먹어서 기록해둔다...white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

input[type="date"]의 기본 모양은 아래와 같은 문구와 캘린더 이모지로 이루어져 있다. 하지만 계정 생성 폼을 만들면서 년/월/일이 아닌 생년월일이라는 문구가 넣고 싶었고 캘린더 이모지도 다른 디자인으로 바꾸고 싶었다. 그러나 css는 역시 쉽지 않은 세계... 일반적으로 적용하는 css코드( placeholder 디자인 변경 )로는 적용이 안되었고 여러 가지 검색해 보고 강의 보면서 커스텀에 성공은 했다. 자주 쓰진 않아서 왠지 까먹을까 봐 정리해 둔다. 🥲 input( type="date",data-placeholder="생년월일" ) [ 아이콘 변경하기 ] input[type='date']{ // 캘린더 아이콘을 클릭해야만 달력이 보이는데 캘린더의 영역을 조절하기위함 position: ..

우리가 grid-template-rows에 설정한 행의 수 보다 많은 element들이 화면에 보이게 된다면 우리가 설정한 크기와 같지않는 cell들이 발생한다. 아래의 코드를 보면 4X4의 그리드를 만들었지만 element가 31개이기에 16번째까지는 우리가 설정한 grid에 들어가고 17번째 element부터는 우리가 설정한 100px X 100px 의 크기를 가지지 못한다. 이를 해결하기 위해서는 grid-auto-rows를 사용하면 된다. grid-auto-rows의 크기를 설정해놓으면 만들어놓은 row 보다 많은 element가 있으면 자동으로 설정한 크기에 맞는 row를 만들어준다. grid-auto-rows의 경우 다음 row에 요소들이 배치가 되는데 그 이유는 grid-auto-flow가 ..

Scss / Sass css preprossesor로 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다. Scss와 Sass는 서로 다른 syntax를 가지고 있으나 Scss가 Sass를 위한 공식적인 syntax를 릴리즈하고 있다. Scss는 업계 표준이 되어가며 css를 programming language처럼 만들고 있다. [ Scss와 Sass의 차이점 ] Scss = 선택자의 유효범위를 {}로 구분 Sass = 선택자의 유효범위를 들여쓰기로 구분 1. variables 반복적으로 사용되거나 관리가 필요한 css 값들을 변수로 지정 1 ) _variables.scss 파일 만들어 [$변수명:값; ] 형식으로 작성 ( _가 파일명에 포함되면 css로 변하지 않음) 2) styles.scss 파..

아래의 글을 보면 grid 설정법에 대해 작성해 놓았다. 하지만 화면크기, 요소의 수에 따라 자동으로 요소의 크기가 변하게 만들게 만드는 법은 정리를 안 해서 따로 또 글을 쓴다.... [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com 이번엔 grid-template 설정 시 사용할 수 있는 auto-fill, auto-fit에 대해 정리해 볼 것이다. [ auto-fill , auto-fit ] aut..

[ min-content, max-content ] css 코드를 작성하다보면 요소 안의 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때가 있다. 이때 사용할 수 있는게 min-content와 max-content이다. min-content :콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다. : 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다. max-content : 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다. : 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로 수평 방향의 컨텐츠인 텍스트인 경우 줄 바꿈 되지 않고 쭉 뻗은 길이이다. 위에 그림에서..

[ fr ] 그리드 트랙 사이즈로 사용되는 단위로 그리드 컨테이너에서 사용 가능한 공간을 비율로 나눠 설정한다. 아래 예시를 통해 살펴보자 grid-template-columns:1fr 1fr 2fr 1fr로 설정할 경우로 사용할 수 있는 공간을 1:1:2:1 비율로 공간을 가지게 된다. 그렇다면 400px의 사용공간을 가지는 그리드에 grid-template-columns : 40px 1fr 2fr 1fr로 설정하면 어떻게 그리드가 설정될까? 위에서 언급한 것처럼 사용 가능한 공간에 대한 비율이기에 400px공간에서 40px를 뺀 나머지 공간인 360px를 가지고 1:2:1 비율로 공간을 가지게 된다. [ minmax() ] 앞서 이야기 한 것처럼 fr는 가지고 있는 공간 ( 사용 가능한 공간 )을 ..

아래 글에서 소개했던 방법 중 grid 사용하기 위한 설정 1,2를 하고 HTML 요소들 원하는 grid 위치에 삽입하기 - 1 의 방법을 채택하면 써야할 코드가 생각보다 많아진다. 2번과 4번 방법 또한 라인을 생각하면서 코드를 짜야하기에 실수를 하는 일이 많아지는데 이를 해결하기위한 방법을 소개해볼까한다. [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com grid-template을 사용해 grid 사..