I'm a Fig, Not a Pig

내가 원하는 건 아래의 UI 인데 자꾸 이렇게 한 쪽으로 쏠리는 현상이 발생..🫠 겨울이라 추워서 붙어있고 싶나본데... 떨어지라구우우ㅇ~~ 이유를 찾다가 w-full 이 문제인 것을 알게 되었는데, w-auto 과의 차이가 매번 헷갈려서 정리해보려고 한다.Header 부분만 똑 떼어서 코드를 가져와봤다.export default function Header({ onMemberSelect, onSearch, keyword }: HeaderProps): JSX.Element { return ( 멤버 관리 + 멤버 추가 );} 이 컴포넌트에서 ..

Tailwind CSS에서 기본 스타일(텍스트 색상, 글꼴 등)을 추가하기 위해서는 두 가지 방법이 있다. 첫번째는 index.html 파일에 클래스를 추가하거나   두번째는 @layer 지시문을 이용해서 추가하는 것이다.@tailwind base;@tailwind components;@tailwind utilities;@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */}   나는 두번째 방법으로 전역 폰트를 적용하기 위해 아래와 같이 코드를 작성했다. 폰트는 Pretendard를 적용했고 CDN을 이용해 Pretendard를 사용할 수 있기 때문에 https://github.com/orioncactus/pr..

매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자! 가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.  아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다..no-scroll { -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */}.no-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */}   참고http..

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

목차 1. flex-basis 2. flex-grow 3. flex-shrink 1. flex-basis flex-basis는 flex 아이템의 크기를 설정하기 위해 존재하는 속성이다. 아이템의 크기를 직접 설정한다는 점에서 width와 유사하지만 1. flex-basis는 width나 height와 달리 flex-direction의 영향을 받는다는 점 2. flex-basis와 width가 동시에 적용될 경우 flex-basis가 더 높은 우선순위를 갖는다는 점의 차이가 있다. flex-basis의 기본 값은 auto로, - width를 따로 설정하지 않으면 컨텐츠가 차지하는 width와 같은 값이되고 - width를 설정하면 설정값과 동일한 값이 된다. .container { display: flex..

이메일 폼을 만들던 중.. 이메일이 유효하지 않은 상태에서 다음 버튼을 누르면 주황색으로 변하는 문제가 있었다. (이메일이 유효한 상태에서만 주황색으로 변하게 하고 싶음) 내가 원하는 건 변하지 않게 하는 것..! 그래서 active를 사용해서 이메일이 유효하지 않은 경우 버튼 클릭 시 그레이 색으로 유지되도록 코드를 짰는데 계속 주황색으로 바뀌었다. 구글링 도중 스택오버플로에서 나와 비슷한 상황이신 분을 발견했고 active가 아닌 focus로 하는게 적절하다는 답변을 보았다. 이후에 active 대신 focus를 적용했더니 문제해결! 그래서 오늘은 active와 focus에 대해 알아보았다. active와 focus acitve나 focus 둘 다 user의 action에 따라 스타일링의 변화를 주고..

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때 유용하다. visible overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값이다. overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나온다. 또한 overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다. See the Pen Untitled by lin (@nnlynn) on CodePen. hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨길 ..

transform 이 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다. 1. translate (이동) 요소를 각각 x축과 y축으로 지정 한 값 만큼 이동시킨다. .box:hover { transform: translate(100px, 50px); } px대신 %도 가능하며 위 코드는 평소에는 원래 위치해있고, 마우스 오버시 X 100px, Y 50px씩 이동한다. 2. scale (늘리거나 줄이거나) 요소의 크기를 변경하는 태그이며 (좌우, 상하)로 늘어난다. translate과 마찬가지로 scale(X, Y)로 입력해 사용하며 단위는 '기존 사이즈의 몇 배' 이므로 width, height의 속성과는 다르다. .box:hover { transform: scale(2, 1.5)..

목차 1. box-sizing 속성값 2. 예시 3. 정리 4. 퀴즈 1. box-sizing 속성값 box-sizing는 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. width와 height는 엘리먼트의 컨텐츠 크기를 지정한다. 그러나 테두리가 있는 경우 테두리 두께로 인해 원하는 크기를 찾기 어렵다. 따라서 box-sizing 속성 중 border-box를 지정하면 이를 해결할 수 있다. 2. 예시 content-box border-box 결과: width가 500px로 동일하지만 box-sizing 속성에 따라 크기가 다른 것을 볼 수 있다. content-box는 테두리를 제외한 부분이 500px이지만 border-box는 테두리를 포함한 부분이 500px이기 때문에 border-bo..