sohyeon kim

💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo..

스파르타코딩클럽에 무료로 디데이 캘린더 만들기 강의가 올라와서 만들어 보았다! 강의는 1시간 정도였고 다 들은 후 css 수정, 완성까지 총 이틀 정도 소요됐다. 강의에선 12월 1일을 시작으로 6*6 그리드를 만들어서 카드는 총 24칸을 만드는데, 나는 D-day 10일부터 시작하자! 하고 15일부터 시작하는 캘린더로 제작했다. 그래서 4*4 그리드로 카드는 총 10칸! 만들면서 그리드 수 조절이랑 카드 효과 질문을 올렸었는데 답을 굉장히 빨리 달아주셨다. 🥹 그리드 수 질문은 4*4로 그리드를 줄이니 카드가 직사각형이 되어서 정사각형으로 바꾸고싶다는 내용이었다. .grid-1 { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } 그..