오델로 게임을 맛보기만 구현해놨네요.
이걸 참고로 해서 좀더 제대로 완성시켜보는것도 좋을듯.ㅎㅎ
근데 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
'Dev. 웹 > Front-end 웹개발을 위한 codepen' 카테고리의 다른 글
[2015.11.9] 심플하게 구현한 WYSIWYG Editor, 에디터 기초 (0) | 2015.11.09 |
---|---|
[2015.10.30] 깔끔하고 귀여운 연습장 레이아웃 (0) | 2015.10.30 |
[2015.10.27] CSS 레이아웃 구성을 이용한 Browser 디자인 (0) | 2015.10.27 |
[2015.10.26] 착시현상을 이용한 원형 움직임 (0) | 2015.10.26 |
[2015.10.16] 눈에 확 띄는 a 태그 표현 (0) | 2015.10.16 |