TIL/CSS (1) 썸네일형 리스트형 틱택토 칸 나누기(grid, flex, table)와 가상요소(::before, ::after) [CSS] 틱택토 만드는 중. 작업 초반부에 배운 내용들(주로 CSS) 기록. 1. 칸 나누기 일단 틱택토를 할 3x3 칸이 필요함. 여러 방법 가능 1) Grid .board { border: 1px solid; display: grid; grid-gap: 5px; grid-template-columns: repeat(3, 1fr); } .cell { border: 1px solid; display: flex; } 가장 깔끔하게 칸을 나누는 방법인 듯. 2) Flex .board { display: flex; flex-wrap: wrap; justify-content: space-around; } .cell { flex: 0 0 32%; height: 32%; margin-top: 3px; margin-botto.. 이전 1 다음
