html/css로 스도쿠 구현하기

Notice

Recent Posts

Recent Comments

Link

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

Programming Storytelling

html/css로 스도쿠 구현하기 본문

HTML & CSS & JS

html/css로 스도쿠 구현하기

HJdone 2019. 4. 15. 19:56

들어가기 전 알아야 할 html/css 배경지식

##태그##

1.<table>:테이블을 만드는 태그

2.<th>:테이블의 헤더를 만드는 태그(테이블의 데이터를 만들어준다.부연설명을 덧붙이자면 테이블의 제목을 의미한다.)

3.<tr>:테이블의 행을 만들어준다.(세로)

4.<td>:테이블의 열을 만들어준다.(가로)

스도쿠란,가로나 세로 그리고 3*3정사각형 부근안에 1~9가 각각 들어가면 되는것이다.(숫자 중복 허용 x)

##속성##

border	테이블의 테두리
bordercolor	테이블의 테두리 색상
width	테이블 가로 크기
height	테이블 세로 크기
align	정렬
bgcolor	배경색
colspan	가로 합병(열 합병)
rowspan	세로 합병(행 합병)

셀 병합
행 분할
열 분할
너비 맞춤
삭제

@index.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id = "T"><center>Sudoku</center></h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<p></p>

<center><button>Check your answers</button></center>

</body>

</html>

@index.css

#T {

color: #008B8B;

}

html, body {

background-color: #FAFAFA

}

table {

border: 2px solid #000000;

margin: auto;

}

td {

border: 1px solid #000000;

text-align: center;

vertical-align: middle;

}

input {

color: #000000;

padding: 0;

border: 0;

text-align: center;

width: 48px;

height: 48px;

font-size: 24px;

background-color: #FFFFFF;

outline: none;

}

input:disabled {

background-color: #EEEEEE;

}

#cell-0, #cell-1, #cell-2 { border-top: 2px solid #000000; }

#cell-2, #cell-11, #cell-20 { border-right: 2px solid #000000; }

#cell-18, #cell-19, #cell-20 { border-bottom: 2px solid #000000; }

#cell-0, #cell-9, #cell-18 { border-left: 2px solid #000000; }

#cell-3, #cell-4, #cell-5 { border-top: 2px solid #000000; }

#cell-5, #cell-14, #cell-23 { border-right: 2px solid #000000; }

#cell-21, #cell-22, #cell-23 { border-bottom: 2px solid #000000; }

#cell-3, #cell-12, #cell-21 { border-left: 2px solid #000000; }

#cell-6, #cell-7, #cell-8 { border-top: 2px solid #000000; }

#cell-8, #cell-17, #cell-26 { border-right: 2px solid #000000; }

#cell-24, #cell-25, #cell-26 { border-bottom: 2px solid #000000; }

#cell-6, #cell-15, #cell-24 { border-left: 2px solid #000000; }

#cell-27, #cell-28, #cell-29 { border-top: 2px solid #000000; }

#cell-29, #cell-38, #cell-47 { border-right: 2px solid #000000; }

#cell-45, #cell-46, #cell-47 { border-bottom: 2px solid #000000; }

#cell-27, #cell-36, #cell-45 { border-left: 2px solid #000000; }

#cell-30, #cell-31, #cell-32 { border-top: 2px solid #000000; }

#cell-32, #cell-41, #cell-50 { border-right: 2px solid #000000; }

#cell-48, #cell-49, #cell-50 { border-bottom: 2px solid #000000; }

#cell-30, #cell-39, #cell-48 { border-left: 2px solid #000000; }

#cell-33, #cell-34, #cell-35 { border-top: 2px solid #000000; }

#cell-35, #cell-44, #cell-53 { border-right: 2px solid #000000; }

#cell-51, #cell-52, #cell-53 { border-bottom: 2px solid #000000; }

#cell-33, #cell-42, #cell-51 { border-left: 2px solid #000000; }

#cell-54, #cell-55, #cell-56 { border-top: 2px solid #000000; }

#cell-56, #cell-65, #cell-74 { border-right: 2px solid #000000; }

#cell-72, #cell-73, #cell-74 { border-bottom: 2px solid #000000; }

#cell-54, #cell-63, #cell-72 { border-left: 2px solid #000000; }

#cell-57, #cell-58, #cell-59 { border-top: 2px solid #000000; }

#cell-59, #cell-68, #cell-77 { border-right: 2px solid #000000; }

#cell-75, #cell-76, #cell-77 { border-bottom: 2px solid #000000; }

#cell-57, #cell-66, #cell-75 { border-left: 2px solid #000000; }

#cell-60, #cell-61, #cell-62 { border-top: 2px solid #000000; }

#cell-62, #cell-71, #cell-80 { border-right: 2px solid #000000; }

#cell-78, #cell-79, #cell-80 { border-bottom: 2px solid #000000; }

#cell-60, #cell-69, #cell-78 { border-left: 2px solid #000000; }

#차후에는 멋진 스도쿠사이트를 만들어보고 싶다.

'HTML & CSS & JS' 카테고리의 다른 글

html 공부하기 (0)	2019.06.03
변수 선언 방법 var,let,const 차이점과 특징 (0)	2019.04.20
함수표현식과 함수선언문의 차이점 (0)	2019.04.18
html table태그와 form태그에 대하여 (0)	2019.04.15
html/css/js로 설문조사지를 구현하기위한 배경지식 (0)	2019.04.15

'HTML & CSS & JS' Related Articles

Programming Storytelling

html/css로 스도쿠 구현하기 본문

html/css로 스도쿠 구현하기

'HTML & CSS & JS' 카테고리의 다른 글

티스토리툴바