프로젝트 & TIL/일별 공부 기록 (백엔드 스쿨)
15일차 - HTML/CSS와 테일윈드
yurison
2023. 3. 13. 16:56
CSS Flexbox 연습 사이트
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
https://cdpn.io/pen/debug/adLPwv
CodePen - Flexbox playground
cdpn.io
CSS 선택자 연습 사이트
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
display
- block : 너비 최대, 수직 배열, flex
- inline-block : 너비 최소, 수평 배열, inline
position
- static : 기본값
- relative : 원래 위치를 기준으로 이동, 하위 요소의 울타리 역할
- absolute/fixed : 가장 가까운 상위 요소를 기준으로 이동, 하위 요소의 울타리 역할
테일윈드
사용하기
<script src="https://cdn.tailwindcss.com"></script>Cheat sheet
https://nerdcave.com/tailwind-cheat-sheet
Tailwind CSS Cheat Sheet
nerdcave.com