틱택토 칸 나누기(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-bottom: 3px;
}

다만 엄밀한 방법은 아닌 것 같음.

3) Table

앞쪽 방법은 <div>로 나눴다면 이번에는 <table> 활용.

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

 

table {
  border-collapse: collapse;
}

td {
  width: 33.3%
  border: 5px solid;
{

td::after {
  content: "";
  display: block;
  margin-top: 100%;
}

 

2. 가상 요소

::before ::after를 조금 더 찾아봄.

 

Pseudo element라고 한다.

.class::after {
  content: "*";
}

이런 식으로 씀.

 

말 그대로 해당 클래스의 전이나 후에 들어감.

다만 그 클래스의 바깥에 들어가는 게 아니라 안쪽 내용물의 앞이나 뒤에 붙음.

따라서 <input>과 같이 내용물이 없는 데에선 사용할 수 없음.