테이블 칸 컬럼 및 입력창의 선 border 굵기 문제...

어깨가 거의 다 나은 느낌이라

엉뚱하지만 굉장한 개인 만족 프로젝트

로또 웹페이지 만들기 

작업을 다시 시작 할 수 있었다.

간단한 내기 게임 느낌으로

이름 및 숫자를 입력하거나, 혹은 그냥 랜덤 입력으로

몇개 번호를 맞혔나 알아보는 게임 페이지이다.

나름 에스터 에그를 넣어두기도 했다.

(자바스크립트 볼 수 있다면, 바로 알아낼수있지만 ㅠㅠ)

오늘 작업한 내용중

화면, 스타일 시트 CSS 부분이다.

HTML

TABLE로 작업을 했었는데,

선 BORDER를 1 SOLID로 잡아줬음에도 불구하고 약간 굵었다.

위의 그림을 보면 알 수 있다.

칸과 칸(TABLE, TR, TD, TH, 등의 태그)이 만나는 부분이 더 굵다.

원래 그런건가 하며 그동안 그냥 놔뒀었는데,

오늘 다른 사이트들 선을 보니 다 얇았다.

소스를 확인하니 다른 사람들은 DIV로 작업한 것을 알 수 있었다.

아, 그래서 어떻게 해야하나,

다시 다 DIV로 바꿔야하나 고민을 하던중,

border-collapse:collapse;

검색을 통해 알아냈고, 스타일시트에 추가하니 선이 얇아졌다.

TABLE TR TD TH 등의 스타일에 추가해주면 된다.

ex)

TABLE,TD,TH {border-collapse:collapse; border:1px solid #d8d8d8}

이번에는 입력창이다.

PC 인터넷 브라우져로 보면 깔끔하게 나오던 입력창 테두리가

모바일에서 보면 선이 제대로 나오지 않는 부분이 있었다.

위의 사진을 보면 알 수 있다.

그래서 HEIGHT, WIDTH 등 이것저것 바꿔봤는데 

이녀석이 잘나오면 다른녀석이 안나오고를 반복하며 ㅋㅋ

완벽하게 해결이 되지 않았다.

결국엔 그냥 입력창에 BODER 선을 넣어 해결했다.

INPUT{border: 1px solid #E4E4E4;}

알고보면 정말 간단한 것 들이지만,

전문가가 아닌 사람이 혼자 힘으로 할 때는 이런 자잘한 것에도 고생을 하는 경우가 많다.

ㅠㅠ

그래도 더욱 힘내서!!!

프로젝트를 완성해볼까나~

모두 화이팅!