공부기록용

https://cssgridgarden.com/#koGrid GardenA game for learning CSS grid layoutcssgridgarden.com 🥕 grid-template-columns와 grid-template-rows % 비율 정하기다음의 비율은grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%;로 각 속성에는 5개의 열을 만드는 5개 값이 있으며, 각 열은 정원의 20% 너비 설정된 상태이다. 값의 갯수가 각 grid의 갯수가 되고 %는 각 grid의 차지 비율!grid-template-columns: 50% 50%; grid-template-rows: 20% 20% 20% 20..

https://cssgridgarden.com/#ko Grid GardenA game for learning CSS grid layoutcssgridgarden.com 🥕 start가 end보다 커도 된다!grid-column-start: 5; grid-column-end:2 ;🥕 그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고싶다면, grid-column-start 와 grid-column-end를 음수로 설정하면 된다.grid-column-start: 1; grid-column-end: -2;grid-column-start: -3;grid-column-start: -1;🥕 span 활용하기 ➕깨달음➕ 'span'은 CSS 그리드 레이아웃에서 사용되는 단어로, 그리드 아이템이 그리드 컨테이너 내에서 ..

Block 태그 전체적인 틀을 짠다던지 구조를 만들 때 주로 사용되는 태그이다. box를 치는 태그라고 생각하기 항상 새로운 줄에 태그를 생성한다. 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다. 한 줄에 한 개만 배치된다. 좌우 너비가 100%라서 한 줄을 독차지한다. 너비 값과 높이 값을 가질 수 있다. 상하좌우 margin을 가질 수 있다. h1 / h2 / h3 / h4 / h5 / h6 div ol / ul / li dl / dt / dd ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분한다. (계약서, 약관, 법조문 등) ul : 순서가 필요없는 리스트에서 사용하며 li 태그로 리스트를 구분한다. (메뉴판, 사이트 메뉴등) li dl : 단어 또는 사물등을 설명하는 ..