HTML/CSS 예제 체스판 만들기

예제 1번

예제 조건들에 맞춰서 한번 만들어 보세요

• 지금부터 체스 판을 만들것이다. 체스판의 가로 세로 500px이며, 이번 예제에서는 4개의 공간으로 분할해보자
• 모든 태그는 div로만 이루어져야 하며, 트위터 부트스트렙을 이용하지 않는다.
• 추가 조건) 이 체스판을 화면 한 가운데에 항상 있도록 만들어 보자(창 크기에 상관없이)
• 추가 조건2) 이 체스판 한 가운데에 1,2,3,4 숫자를 정 중앙에 나타나도록 만들어 보자(색은 배경과 반대)

1

2

3

4

정답

<code class="html"> <style> .outer_box{width:500px;height:500px;border:solid black 1px;margin:0 auto;} .inner_box{width:250px;height:250px;float:left;text-align: center;display:table;} .inner_box > div {vertical-align: middle;display: table-cell} .black{background-color:black;color:white; } .white{background-color:white;color:black;} </style> <div class="outer_box"> <div class="inner_box black "><div>1</div></div> <div class="inner_box white "><div>2</div></div> <div class="inner_box white "><div>3</div></div> <div class="inner_box black "><div>4</div></div> </div> </code>

칸마다 숫자를 좌우 중앙에 놓게 해주는 코드는