본문 바로가기
  • 어서오세요.
  • 안녕하세요~

css4

카드처럼 뒤집히는 Grid만들기 tailwind Tailwind CSS는 기본적으로 3D 변환용 유틸리티(예: rotateY)를 제공하지 않습니다. 그러나, Tailwind CSS를 확장하여 rotateY 유틸리티를 만들 수 있습니다. module.exports = { theme: { extend: { animation: { 'spin-y': 'spinY 1s linear infinite', }, keyframes: { spinY: { '0%': { transform: 'rotateY(0deg)' }, '100%': { transform: 'rotateY(360deg)' }, }, }, }, }, variants: {}, plug.. 2024. 7. 1.
grid-col 사용할때는 width 조절을 같은 className에서 해야함 {planList.map((planItem) => { return () })} 상위 부모에서 아무리 와이드를 건드려도 꿈쩍도 하지 않는다. 지금 max-w-[1200px] 가 상위 어디에 넣어도 적용이 되지 않는다. 여기 라인에 같이 넣으니 적용이 되었다..휴..이거가지고 3시간 헤맷다.. 2024. 6. 27.
height:100%에 대하여 YouTube 빔캠프 VEAMCAMP채널_ CSS 갈증해소 프로젝트 OACSS 시리즈의 강좌를 보며 정리한 글입니다.생각처럼 동작하지 않는 height: 100%화면을 가득 채우고 싶은 요소에 height:100%를 주면 화면에 가득 채워질까?문제를 살펴보기 앞서, 먼저 height와 width값의 기본값을 알아야 한다.height와 width속성의 default값height와 width속성에 특정 단위로 값을 따로 설정하지 않는다면 두 속성의 값은 default값인 auto로 지정된다..pig { width: auto; height: auto;}auto값은 브라우저가 그 크기를 계산해준다.display가 block일 때block요소일 경우 width: auto;는 width: 100%;와 같이 해석.. 2024. 6. 26.
[CSS] CSS Position (relative, absolute) 목차 1. Position 속성 1-1. Relative 1-2. Absolute    1-2-1. 부모 relative & 자식 absolute    1-2-2. 조상 relative & 자식 absolute    1-2-3. 조상 position 없음 & 자식 absolute 1-3. FixedCSS PositionCSS Position 요약position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.사용법은 간단하다.기준을 잡는다. (예- position: relative;)이동시킨다. (예- top: 50px;)🎈알아두기blockinlineblock : 한 줄 모두 차지 (대표 element - , .. 2024. 6. 26.

티스토리툴바