석이의 개발일지

:empty empty modifier를 사용하여 콘텐츠가 없는 경우 스타일을 지정한다. 콘텐츠가 없는 경우 => 빈 텍스트, undefined, null등과 같이 값이 없는 경우에 해당한다. empty:hidden은 display: none과 같다. {[1, 2, ""].map((number) => ( {number} ))} https://tailwindcss.com/docs/hover-focus-and-other-states#empty Handling Hover, Focus, and Other States - Tailwind CSS Using utilities to style elements..

Ring Width 상자 그림자가 있는 윤곽선을 만들기 위한 유틸리티이다. ring-(width) 유틸리티를 사용하여 특정 두께의 solid box-shadow를 요소에 적용한다. 링은 기본적으로 반투명한 파란색으로 많은 시스템의 기본 포커스 링 스타일과 유사하다. Ring Color 외곽선 링의 색상을 설정하는 유틸리티이다. ring-(color) 유틸리티를 사용하여 외곽선 링의 색상을 설정한다.

화면 중앙 배치 css display: flex; flex-direction: column; justify-content: center; align-items: center; tailwind 이미지 가운데 꽉 차게 하기 css background-position: center; background-size: cover; tailwind 링크(a) 태그 밑줄 없애기 css text-decoration: none; tailwind tailwind는 css 전체가 기본값이 reset(없음) 되어있다. 예를 들어 a 링크에 기본값이 underline이 있는데 tailwind에서는 기본값이 없다. (박현석 => 박현석) 버튼 꽉차게 만들기 css button { display: block; width: 100%;..

Tailwind Setup 은 참조 : https://luckseok.tistory.com/entry/1-Setup #1 Setup Next.js + TypeScript Setup yarn create next-app --typescript What is your projct named? "파일명" Would you like to use ESLint with this project? Yes Would you like to use 'src/' directory with this project? No Would you like to use experimental 'app/' d luckseok.tistory.com Tailwind CSS 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있는 flex, p..

코드 inner1 inner2 inner1 inner2 Position : static (기본값) position의 기본값은 static이다. static 은 top, left, bottom, right 의 아무런 영향을 전혀 받지 않는다 원래 있어야 할 자리에 있는다. Position : relative 원래 있던 자리를 유지하면서 우리가 지정한 top,left,bottom,right 만큼 이동이 된다. Position : absolute 원래 있던 자리에서 나오게 되면서 재배치가 일어나게 된다. 근접한 부모 중에 기본값인 static 이 아닌 부모에 기준에서 움직이게 된다.(위 사진처럼은 box 도 기본값이고 outter 도 기본값이기 때문에 최상위인 body에 맞춰진 걸 볼 수 있다.) .box p..

Flexbox display: flex; flex-direction: column; // 수직,수평(메인 축)에 따라 달라집니다. justify-content: center; align-items: center; justify-content : 주축(main axis) 방향에 따라 요소를 정렬한다. ▶ row 또는 column aligin-items : 교차축(cross axis) 방향에 따라 요소를 정렬한다. ▶ row 또는 column Grid display: grid; place-items: center; place-items : align-items와 justify-items 속성을 한 번에 적용할 수 있다. ▶ 축약형 place-content : align-content와 justify-cont..

HTML Content box Border box CSS div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ } .border-box { box-sizing: border-box; /* Total width: 160px Total heig..