tailwind

space-y-8 : 소스의 간격

bg-red-100 : 빨간색. 숫자가 높아질수록 진해진다.

shadow : 그림자

rounded : radius

 

w-96 : 96% :0.25rem*96

w-1/4 : 화면의 1/4 차지

text-xs : 텍스트 사이즈 나타냄.사이즈가 xs라는 뜻

shadow-md

shadow-lg

shadow-xl 

:그림자 크기 나타냄

 

p-3: padding을 3을 줌

pt-3 : padding top. 위로 여백 3줌

pb-3 : 아래로 여백 3줌

pr-3 : 오른쪽으로 여백 3줌

pl-3 : 왼쪽로 여백 3줌

 

마진 병합 (마진 붕괴) : 

출처 : https://webclub.tistory.com/485

어떤 요소의 아래쪽 바깥여백이 다른 요소의 위쪽 여백과 만나는 경우 마진 병합(합쳐지는) 현상이 일어납니다.

출처:https://blog.hubspot.com/website/css-margin-vs-padding

padding

출처:https://blog.hubspot.com/website/css-margin-vs-padding

margin

<div class="p-5">
    <ul class="list-disc">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</div>

이런식의 결과가 출력

<div class="p-5">
    <ul class="list-decimal">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</div>

list-decimal을 쓰면 이런식의 결과 출력

<div class="w-32 h-32 bg-red-400"></div><br>
<div class="w-32 h-32 bg-red-400 rounded"></div><br>
<div class="w-32 h-32 bg-red-400 rounded-2xl"></div><br>
<div class="w-32 h-32 bg-red-400 rounded-full"></div>

이런식으로 주면. rounded 뒤에 주는 거에 따라 모형이 달라진다.

<div class="text-[17px]">hello</div>
<div class="mt-[17px]">hello</div>
<div class="bg-[#426782] text-white">hello</div>