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