[2015.10.29] javascript, css3 를 활용한 오델로 게임

 

오델로 게임을 맛보기만 구현해놨네요.

 

이걸 참고로 해서 좀더 제대로 완성시켜보는것도 좋을듯.ㅎㅎ

 

근데 IE11 버전인데도 O,X 글자 크기가 엄청 크게 표시되면서 레이아웃이 틀어지는데

 

브라우저 폭을 450px 이하로 줄이거나 크롬등의 다른 브라우저로 보시면 잘 보입니다.

 

IE에서는 css media 쿼리 적용시 기존 폰트크기와 추가되는 폰트크기가 상대적으로 연산이 되는것 같은데..

 

이부분은 좀 더 자세히 알아봐야할듯.ㅎ

 

// nought icons
.nought:before, .cross:before {
  font-family: 'FontAwesome';
  font-size: 3em;
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 0px;
  right: 0px;
  cursor: default;
  @media(min-width: 450px) {
    font-size: 5em;
    top: 15px;
  }
}

 

위의 폰트크기가 브라우저폭 450px 이하이면 3em , 이상이면 5em 으로 되어 있는데

 

1em 에 대한 폰트크기가 잡히는 기준이 다른가봅니다..

 

 

 

 

간단한 사용 예제 및 Demo

 

See the Pen Tic-Tac-Toe by Geoff Storbeck (@GeoffStorbeck) on CodePen.