[HTML / CSS ] 정리

몰랐던 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에선 #샵!! { }