바둑판

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

phpschool에 있는 Talk Box(톡박)이라는 게시판에 누군가가 바둑판을 그렸기에 가져와서 약간 수정했다.

줄간격을 없애서(100%) 가로세로 크기가 같도록...

여기서는 line-heihgt:100%를 사용했는데 톡박에서는 안되어서 방법이 없을까 했더니 line-height:1em을 가르쳐 줬다.

그 방법으로 잘 해결이 되었는데 em 단위가 도대체 뭔지 잘 모르겠어서(대략 감으로 1em=100%인 것 같긴 하지만) 검색을 해 보니 참고할만한 블로그가 검색이 되었다.

요즘은 무작정 퍼 오기가 좀 꺼려져서 링크를 건다.

CSS의 em 단위

저 바둑판으로 게시판에서 바둑을 두는 엽기를 저지르고 있다.

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼●┼●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼○┼○┼●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

여기까지 진행 중

다시 시작 되었다

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼  0●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  3○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  4●┼  2●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼  5○┼  1○┼  6●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  7○  8●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

숫자까지...

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼  1●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼◎┼┼┼┼┼◎┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼  1●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼◎┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼◎┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼◎┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼ 16○┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼◎┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼ 17●┼┼┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼ 16○┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼ 19●┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼ 17● 18○┼┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼ 16○┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼  4○ 21●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼ 19●┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼ 17● 18○ 20○┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼ 16○┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 22○┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 23●  4○ 21●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼ 19●┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼ 17● 18○ 20○┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘

┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 14○┼┤
├┼┼  1●┼┼┼┼┼ 16○┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 10○┤
├┼┼ 15●┼┼┼┼┼◎┼┼┼┼┼◎┼┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 22○┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 23●  4○ 21●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 25● 24○┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼  5●┼  3●┼┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
├┼┼ 13●┼┼┼┼┼ 19●┼┼┼  6○┼  2○┼  7●┤
├┼┼┼┼┼┼┼┼ 17● 18○ 20○┼┼┼┼  8○  9●┤
├┼┼┼┼┼┼┼┼┼┼┼┼┼┼ 12○ 11●┼┤
└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘