4전 4전

리액트에서 tailwindCSS를 사용하면서 컴포넌트의 스타일을 일부만 변경하려 할 때종종 class가 중복돼서 예상하지 않은 스타일로 적용될 때가 있습니다. 이럴 때 중복을 피하기 위해 유용하게 사용할 수 있는 tailwind-merge라는 유용한 라이브러리가 있습니다.| twMergetwMerge를 사용하여 중복되는 class를 제거하고 새로운 스타일을 적용해 줄 수 있습니다. 먼저 예시로 props로 변경하고자 하는 스타일을 받아 적용하는 컴포넌트 하나를 만들어 보겠습니다.interface Props { className: string;}const Input = ({ className }: Props) => { const inputStyle = `border rounded px-2 py-1 $..

웹 접근성의 중요성을 이론적으로는 알고 있었지만, 실제로는 이를 잘 고려하지 못하고 코드를 작성하는 경우가 많았습니다. 제가 개발자가 되려 하는 이유 중 하나가 사람들에게 편의를 제공하는 것임에도 이를 고려하지 못하는 건 맞지 않다 생각하여 이번 기회에 이를 공부해 보고, 웹 접근성을 높이기 위해 어떤 것들을 할 수 있는지 알아보고자 합니다. | 웹 접근성이란 웹 접근성은 장애인뿐만 아니라 모든 사용자가 웹에서 제공하는 콘텐츠에 동등하게 접근할 수 있도록 웹사이트를 디자인하고 개발하는 것을 의미합니다. 이는 디자인과 개발 과정의 모든 단계에서 고려되어야 하는 아주 중요한 요소입니다. | 키보드 접근성 마우스를 사용하지 못하는 경우를 대비하여 키보드만으로 웹사이트 내의 요소에 접근할 수 있도록 하는 것이 ..

css에서 backdrop-filter를 사용하면 요소 뒤에 있는 영역에 시각적 필터를 적용할 수 있습니다. | 사용 1. 사용법 backdrop-filter에 blur() 함수를 사용하면 요소 뒤의 배경에 반투명한 배경을 적용해 줍니다. .blur { backdrop-filter:blur(10px); } 이런 식으로 사용하면 되고 값에 % 나 px 등을 사용하여 투명 강도를 설정해 줄 수 있습니다. 2. 스타일 적용 blur .back-ground { background-image: url("https://picsum.photos/300/300"); width: 300px; height: 300px; display:flex; justify-content: center; align-items: cente..

css에서 사용자 변수를 사용하면 반복적으로 사용되는 값을 변수에 저장하고 이를 여러 곳에서 참조할 수 있습니다. | 사용 1. 변수 선언 CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서 변수 이름을 정의하면 됩니다. :root { --main-color: red; } 보통 변수를 선언할 때 :root 선택자를 사용합니다. → :root 선택자는 HTML문서에서 최상위 요소를 나타냄 위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고 변수의 초기값을 빨간색인 red로 지정해 주었습니다. 2. 변수 사용 선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다. div { background-color: v..

Pseudo-class를 사용하면 상태에 따라서 스타일을 줄 수 있습니다. | 사용 .box { width:200px; height:200px; background-color:#6799FF; } .box:hover { background-color:#A566FF; /* 마우스를 요소에 올리면 동작함 */ } .box:active { background-color : #BCE55C; /* 마우스로 요소를 클릭하면 동작함 */ } HTML 삽입 미리보기할 수 없는 소스 이런 식으로 동작합니다. | 종류 1. :hover - 마우스 커서가 해당 요소위에 올라가 있으면 동작 2. :active - 마우스로 요소를 클릭하고 있으면 동작 3. :visited - 해당 링크에 연결된 페이지를 방문한 상태면 동작 4...

rem, em 은 요소의 크기를 결정해 주는 단위들입니다. | rem rem 은 최상위 요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. html { font-size: 16px; } div { font-size: 1rem; /* 16px */ } div { font-size: 2rem; /* 32px */ } | em em은 부모요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다. div { font-size: 30px; } div span { font-size: 1em; /* 30px */ } div span { font-size: 2em; /* 60px */ }

overflow는 요소의 내용물이 해당요소를 감싸고 있는 컨테이너의 크기를 넘어가면 어떤 식으로 처리를 할지 정해줄 수 있습니다. | 속성값 1. visible 이 속성은 기본값으로 컨테이너를 넘어가는 내용물을 컨테이너 외부에 그대로 표시돼서 다른 콘텐츠를 가릴 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 2. hidden 이 속성은 컨테이너를 넘아가는 내용물을 자르고 안 보이게 숨겨줍니다. HTML 삽입 미리보기할 수 없는 소스 3. scroll 이 속성은 스크롤 막대가 컨테이너에 추가돼서 내용물을 스크롤하면서 볼 수 있습니다. 하지만 내용물이 컨테이너를 넘지 않아도 항상 스크롤이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. auto 이 속성..

CSS에서 position 속성은 HTML요소가 위치하는 방식을 정해줍니다. 또한 속성값에 따라서 top, left, bottom, right로 요소의 위치를 지정해 줄 수 있습니다. | 속성 값 1. static static값은 기본값입니다. HTML 요소가 문서의 일반 흐름에 따라서 배치가 되고, top, left, bottom, right 같은 속성값을 사용할 수 없습니다. HTML 삽입 미리보기할 수 없는 소스 2. relative relative값은 HTML요소를 원래 위치에 상대적으로 위치시킬 수 있습니다. top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 3. absolute absolute값은 HTML요소를 가장 가..