마작 점수계산기 만들기 - 1

생활코딩 사이트로 혼자 간단하게 웹을 배웠다.

뭔가 추가로 배우기 전에 내가 배운 것들을 좀 써먹을 수 있는 걸 만들면

어느 정도 익숙해질 것 같아서 전에 생각했던 마작 점수 계산기를 만들기로 했다.

원래는 온라인으로 하는 카드게임 같은걸 만들어 보려고 했는데 내가 공부한 선에서

만들기에는 택도 없었기 때문에 급하게 선회하게 됐다.

---

▲ 처음에 생각한 레이아웃의 모습

---

먼저 HTML과 CSS를 이용해 기초적인 레이아웃을 그렸다.

나의 목적은 컴에서 쓰는 게 아니라 폰에서 쓰는 것이었기 때문에

컴보다는 폰에 좀 더 초점을 맞춰서 만들기로 했다.

난관은 텍스트를 회전해 각 변에 배치하는 작업에서 찾아왔는데

CSS 속성인 transform: rotate을 사용해서 회전시키면

우리 눈에 보았을 때는 회전되었지만 실제로 그 객체가 차지하는 공간은 그대로였기 때문에

내가 원하는 것처럼 사방에 텍스트를 붙이기 위해서는

일일이 수치를 조정해가며 노가다를 뛰는 방법 밖엔 없었다.

물론 더 좋은 방법이 찾아보면 있겠지만

그냥 일일이 체크해가며 대충 그럴싸하게 만드는 데는 성공했다.

---

▲ 그리드를 이용해 모양만 잡은 모습

---

▶▶▶ 구경하러가기 ◀◀◀