비온뒤 맑음. 하말의 블로그

@layer base @layer base { h4 { @apply text-lg font-semibold; /* Tailwind 클래스 */ } } @layer components @layer components { .btn-primary { @apply px-4 py-2 bg-blue-500; /* Tailwind 클래스 조합 */ } } @layer utilities @layer utilities { .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 직접 CSS 속성 */ } .backdrop-blur-xs { backdrop-filter: blur(2..

https://www.youtube.com/watch?v=7neASrWEFEM 해당 유튜브 영상을 정리한 것 입니다. 기본 1 2 3 4 5 6 7 8 9 10 .container { background: beige; height: 100vh; } .item1 { background: #ef9a9a; } .item2 { background: #f48fb1; } .item3 { background: #ce93d8; } .item4 { background: #b39ddb; } .item5 { background: #90caf9; } .item6 { background: #a5d6a7; } .item7 { background: #e6ee9c; } .item8 { background: #fff59d; } .it..

https://www.youtube.com/watch?v=nxi1EXmPHRs 위 유튜브를 따라해 본 것 입니다. 부모 요소에게만 그리드 적용 .container { display: grid; grid-template-columns: repeat(3, 1fr); } 굉장히 띄엄 띄엄 있음 자식 요소에게 크기를 정해줌 .container { display: grid; grid-template-columns: repeat(3, 1fr); } .image { width: 100%; height: 100%; object-fit: cover; } grid-template-areas body { padding: 5rem; background-color: black; } .container { display: gri..

* { /* flex 1차원적 배치, wrap을 통해 그리드 느낌으로 할 수 있음 */ display : flex ; /* 한줄을 차지하는 div 요소들을 가로로 배치가능 */ flex-direction : column /* 쌓이는 방향을 세로로 바꿔줄수있음 (기본 row) */ } *{ display:grid /* 부모에서 그리드의 전체적인 모양과 사이즈를 정함 */ grid-template-columns : /* 가로 */ grid-template-rows : /* 세로 */ grid-template-areas : /* */ grid-gap : /* 그리드 간격 */ grid-column-start : grid-column-end : grid-row-start : grid-row-end : grid-..

https://www.youtube.com/playlist?list=PLTb3qGCzYjS3cIanQ9DFx7zDiejgnnql1 div class="container-fluid" sm, md, lg, xl, xxl (breakpoint) padding(p), margin(m) p- ( 0~5 ) p-0 ( top-t / bottom-b / left(start)-s / right(end)-e / x axis(left&right)-x / y axis(top&bottom)-y ) gap ( div 내에서 간격 조절 ) class="color" background color : bg- text color : text- text-bg- text- bg- table class="table " table-strip..

레이어 팝업을 띄워야해서 준비했던것 정리 1. 기본적으로 레이어 팝업은 아래 블로그에서 그대로 복붙했다. 다만 그대로 복붙하면 주석처리가 이상해졌고, 일부분을 수정했기에 다시 남겨본다. https://kideagle.tistory.com/85 레이어팝업 공지 (오늘 하루 열지 않기) 오늘 하루 이 창 열지 않음 닫기 kideagle.tistory.com