[밴픽사이트] 게임페이지 레이아웃

레이아웃을 정하다.

며칠 CSS를 만지작거리다가 느낀 것은, Wrapper의 역할을 하는 div태그를 두는 것이 디자인하기에 수월하다는 것이다. 

가로세로, 배치 순서와 같은 큼직한 틀을 잡아주는 div태그를 최상단에 두고, 그 밑에 기능이나 색과 같은 디테일한 것들을 정하는 태그들을 배치하는 것이 수월하다고 느꼈다. 

 

아래 사진은 대강 배치가 완료되었다 느꼈을 즈음 게임페이지의 모습이다.

아직 갈길이 멀다...

가장 큰 골치였던 화면을 벗어나는 자식 태그들을, 벗어나지 않도록 적절히 꿰맨 느낌이다. 하지만 아직 갈길이 멀다. 좌우 양쪽에 각 팀이 선택한 챔피언을 보여주는 빈 박스들의 크기를 적절히 조정해줘야 한다. 

 

어느 정도 정리한 후에는 아래와 같이 그럴듯한 레이아웃이 완성되었다.

다음 할 일

이제 1인이 적당히 밴픽을 할 수 있는 형태는 갖췄으니, 이제 실시간으로 1대1로 밴픽을 할 수 있는 페이지를 만들어보자.

 

기왕이면 따로 서버를 두지 않고 바로 DB와 통신하여 실시간 정보 주고받기가 되는지 알아보려고 한다. redis에 publish, subscribe 기능이 있다는 것을 찾게 되었는데, 이처럼 DB에 있는 pub/sub 기능을 활용할 수 있는지 확인해야겠다.