몰랐던 html/css 용어 정리
-
display: gridl;/display: flex;: 부모에 먼저 설정해놓음 -
object-fit: cover;부모에게 비율무시하고 맞추면서, 부모와 맞지않으면 잘라내서 보여줌 -
grid-template-columns: repeat(3,1fr): fr이란 fractional unit임 / 보여지는 화면의 비율을 1fr이면, 1 비율로 3번 반복하겠다 - 1:1:1처럼!
✅ Grid
- gird는 유동성있게 레이아웃을 배치할 수 있음
- ①
display: gird;로.container { }에 배치해줘야함 - ②
rem은루트엠인데 , 레이아웃을 수정했을 때 그 크기에 비례해서 맞춰줌 -> 유연성 Good !
->px(픽셀)보다 잘 이용하면 좋음
✅ div
- 📂
css
<div> { }안에 각각 div: 하나의 블록 박스라고 생각, 그 안에 높이 너비를 지정해줘도되고, margin을 줘서 div블록끼리의 사이를 줄 수도 있음
✅ class와 id의 차이
: 아이디id= #샵 / 클래스class = .점
class
- class = "" =
css에선.점!! { }- 여러개의 클래스를 지정해서 css에서 꾸며줄 수 있음
id
- 하나의 아이디만 설정 가능 (요소를 식별하기 위한 코드 -> ex)회원가입시 아이디 중복으로 사용못할 때)
- id = "" =
css에선#샵!! { }
