웹 애플리케이션의 기본 UI 작성하기 [2/3]

공통 요소와 CSS 표현

가장 먼저 layout.jade 파일을 수정하여, 화면을 구성하는 HTML 태그들의 스타일 속성을 CSS를 이용해 변경하고 빙고 게임 판과 게임 인터페이스를 구성한다. 

6~7번 줄은 Socket.IO와 jQuery를 사용하기 위해 추가한 코드다. socket.io.js 파일은 socket.io 모듈을 포함한 서버가 실행되면 자동으로 생성되므로 신경쓰지 않아도 된다.

jQuery 라이브러리 파일은 이전에 이미 다운받아 두었다고 가정하고 진행한다.

views/layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/socket.io/socket.io.js')
    script(src='/javascripts/jquery-3.5.1.slim.min.js')
    script(src='/javascripts/main.js')
  body
    block content

public/stylesheets/style.css

float: 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성. 

• inherit: 부모 요소에서 상속
• left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하고 위에서 아래로 흐름.
• right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
• none: 요소를 부유시키지 않음

 

CSS float 속성 - ofcourse

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

#game {
  width: 320px;
  height: 300PX;
}

#bingo {
  float: left;
}

#user {
  float: right;
}
#list {
  border: 1px solid gray;
  width: 140px;
  height: 50px;
  overflow: auto;
  margin-bottom: 10px;
}

#logs {
  border: 1px solid gray;
  width: 140px;
  height: 50px;
  overflow: auto;
  margin-bottom: 10px;
}

.bingo-board {
  border-left: 1px solid gray;
  border-top: 1px solid gray;
  border-spacing: 0px;
  margin-bottom: 10px;
}

.bingo-board td {
  width: 25px;
  height: 25px;
  border-right: 1px solid gray;
  bordeer-bottom: 1px solid gray;
}

#input_box {
  width: 140px;
  height: 50px;
  margin-bottom: 10px;
}

#user_input {
  border: 1px solid gray;
  width: 140px;
}

 

게임 화면 구성하기

게임 화면을 구성하는 main.jade 파일 작성하자. 이 파일은 render() 메서드를 이용해 HTML로 렌더링하게 된다. 빙고 게임 화면은 <table> 태그를 사용하였다.

views/main.jade

extends layout

block content
  h1 = title
  p Welcome! #{username}


  #game
    #bingo
      table.bingo-board
        tr
          td
          td
          td
          td
          td
        tr
          td
          td
          td
          td
          td
        tr
          td
          td
          td
          td
          td
        tr
          td
          td
          td
          td
          td
        tr
          td
          td
          td
          td
          td
    #user
      #list
      #logs
      input#start_button(type='button', value="Game Start!")
      input#username(type='hidden', value='#{username}')

 

자바스크립트 활용하기

public/javascripts/main.js

var bingo = {
    is_my_turn: Boolean,
    socket: null,

    init: function() {
    },

    select_num: function (obj) {
    },

    where_is_it: function (num) {
    },

    check_num: function (obj) {
    },

    update_userlist: function (data) {
    },

    leave: function () {
    },

    print_msg: function (msg) {
    },
};

// html 문서 로딩이 끝나면 bingo 객체를 초기화하면서 빙고게임이 설정되도록 함
$(document).ready(function () {
    bingo.init();
});