background background-color : hex, rgb, rgba background-image : url() 주소로 이미지를 넣을 수 있다. Unsplash.com 무료 이미지 다운 전송받는 image의 형태가 정해져있지 않다면 (가로 세로의 비율이 제각각인 경우) img 태그로 이미지를 받을 ...
[CSS] media query, viewport, font-size, letter-spacing, font-family, font-weight, color, webfont
반응형 웹 media query 화면의 길이가 768px 이상일때 적용되는 css @media screen and (min-width: 768px) { ...; } 화면의 길이가 768px 이상, 991px이하일때 적용되는 css @media screen and (min-width: 768px) and (max-width:...
[CSS] position, flexbox
position position을 사용할 때는 어떤 종류의 포지션을 사용하는지, 무엇을 기준으로 위치해 있는지 확인해야함. static : 모든 요소의 기본 position. relative : 원래 위치를 기억하고 있다. 기존 위치를 기준으로 이동가능. 다른 위치로 이동되더라도 다른 요소들의 위치에 영향을 주지 않음. absolut...
[CSS] float, psuedo element
float 블록을 병렬적으로 배치하기 위해 사용한다. display : inline, inline block, block인 box에 float 속성을 추가하면 display: block 으로 변한다. 속성이 block이기 때문에 inline일때 사용하지 못했던 width, height, padding,margin…등의 속성을 적용할 수 ...
[월간회고] 일할 결심
기술블로그에 기술 외적인 것도 써도 되나 싶지만 뭐 내 블로그니까 내 맘대로 가본다. 그동안 썼던 주간회고, 독서 기록들이 다 노션에 있어서 아쉽기도 하다. 주간회고를 올리는건 좀 껄끄럽고 월간회고는 월말마다 작성해보기로 한다. 적어도 올해 말까지는 꾸준히 작성하기 도전!😎 이번 편은 퇴사 후 공부하고 쉬고 취준한 이야기를...
[Recoil] atom, selector
Recoil 공식 문서 Recoil은 React를 위한 state 관리 라이브러리이다. React에서 state는 컴포넌트의 상태고 컴포넌트의 상태가 변경될 때마다 React는 화면을 리랜더링해서 바뀐 정보를 노출시킨다.문제는 React의 기본 state만 사용하면 전역으로 사용하는 상태를 관리가 힘들다는 것이다. 여러...
[MM] TED talk : The power of vulnerability | Brené Brown, JSconf, indentation rules in HTML
미라클 모닝할때 듣는 Ted talk를 흘려보내기보다는 기록하는게 좋을 것 같아서 기록해본다. 기록할만한 게 있으면 앞으로도 종종 써야지 미라클 모닝글은 앞머리 MM로 정하고 쓰기로함 자신의 가치에 대한 믿음이 있는 사람들은 자신의 취약성을 받아들이는 경향이 있었다. 그들은 자신의 가치를 믿고 전력으로 다른 사람들과의 관...
[React] React-hook-form
React Hook Form 공식 문서 메인 화면에 써 있다 시피 (Performant, flexible and extensible forms with easy-to-use validation.) html form 태그를 쉽고 유연하게 사용하도록 도와주는 React hook이다. 그중 가장 기능이 많고 이번 프로...
[CSS] box model, box sizing, display
기본 ! : MDN CSS 공식 문서 참고할것 box model content , padding, border, margin으로 이루어져있다. content : width(가로), height(세로) padding : content 와 border 사이의 공간을 나타낸다. border : 테두리. 굵기, 스타일,...
[HTML] HTML section, article, nav, aside, main
기본 ! : mdn html elements 공식 문서 참고할것 section, article, nav, aside sectioning element 내에는 반드시 heading 태그를 작성해야한다. heading 태그는 section은 내부의 콘텐츠를 설명하는 역할을 한다. headin...