CSS : Etc..

✅ Bootstrap - GridSystem 구조
반드시 아래와 같이 해야됨

<div class="container">
	<div class="row"> // 한 row 당 총 12까지 올수 있음 
(col-12 가 row안에 있다면 다음칸으로 내려감, 왜냐하면 col-1 이 이미 있고 col-12 를 했으므로 13 이니까)
    	<div class="col-1"> // 클래스명이 반드시 col-1 ~ 12 만 와야함 
        	... <== 만들고 싶은 요소
        </div>
    </div>
</div>
width를 지정하여 col- 변경하고 싶다면 아래 참고
https://getbootstrap.com/docs/5.2/layout/grid/
예)
<div class="col-1 col-sm-3" >
	..
</div>

✅ box-shadow (x, y, 흐린정도(blur), 그림자사이즈, 색상)
: 흐린정도(blur), 그림자사이즈 둘은 생략 가능
https://neumorphism.io/#e0e0e0
https://cssgenerator.org/box-shadow-css-generator.html

✅ overflow (visible(기본값) | auto | scroll | hidden)

✅ transform - 변형시키다
https://cssreference.io/property/transform/

• 많이 사용하는 것 => translate(), scale(), rotate()

.box {
	width: 300px;
    height: 300px;
    transform: translate(100%, 100%) // 100% 는 자기자신 즉 300px, 300px 만큼 이동
}
.box {
	width: 300px;
    height: 300px;
    transform: rotate(45deg);
}

✅ visibility (visible | hidden) 존재하지만 숨기기 위해 사용 <=> display : none

📌 CSS 선택자
( ~ , + )

<ol>
    <li>...</li>
	<li class="hello">...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>
.hello ~ li { // hello ~ 다음에 오는 모든 형제 li 선택
	color: red;
}
.hello + li { // hello 바로 다음에 오는 형재 li 선택
	color: red;
}

(first-child, last-child)

<ol>
    <li>1</li> // first-child => color : red
	<li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li> // last-child => color : red
</ol>
li:first-child {
	color: red;
}
li:last-child {
	color: red;
}

(hover, active(ex. button이면 눌렀을 때), focus)
(⭐️⭐️ 선택자 우선순위)

• 금 : id선택자
• 은 : class선택자, 가상클래스(:hover, :last-child 등)
• 동 : 요소선택자(tag)

0. 초강력 우선순위 inline style => 태그에 직접 style="" 지정할 때, !important(우선순위제일높음)
1. 은, 동 여러개 보다 금 1개가 우선순위 높음
2. 메달 합산으로 계산