스타일시트(CSS)에서 테이블을 가운데로 보내는 팁

스타일시트(CSS)에서 테이블을 가운데로 보내는 팁

제 홈피 한곳을 유심히 쳐다보다가 그 정보가 2018년에 갱신됐음을 알고는 인제 와서 다시금 짚어보기로 했답니다.

겨우 4년밖에 안 됐는데 벌써 많이 변했네요.

개중엔 굳이 달아 놓지 않아도 무방한 소스도 있어 이번에 정리했더니 대충 절반 정도가 남습니다.

이 문서의 주 내용이 일관성이 있기에 테이블에 넣었기에 그 배열 방식을 모두를 가운데로 놓이게끔 했었습니다.

이전엔 스타일시트(CSS)를 쓰면서 구성 요소(BODY, P, TABLE 등) 모두에 일일이 그 스타일을 입혔는데 오늘은 그간에 조금이라도 제 실력이 좋아졌겠거니 싶어서 어지간하면 몽땅 그리려고 했지요.

테이블마다 가운데 놓는 스타일이 안 먹혀서 위아래로 <center>, </center> 붙였던 방식을 바꾸고자 했습니다.

그래서 문서 전체를 가운데로 두는 스타일을 이번엔 써보기로 했던 겁니다.

그리하여 그 스타일을 먹이려고 이렇게 했었거든요.

--------------------------------------------------------------------------------

HTML *{text-align:center;~

--------------------------------------------------------------------------------

그랬는데 그것 하나 마나 테이블이 화면 왼쪽으로 붙었네요.

~ 테이블을 가운데로 - 01 ^^ ~

속상했어요. 그래서 'W3Schools(https://www.w3schools.com/)'와 같은 태그 전문 사이트를 찾아가서 'CSS *'로 검색했건만, 마땅한 답을 못 찾았답니다.

그리하여 구글링(CSS 테이블 가운데 두기)으로 찾았는데 그 방식이 너무나도 간단합니다.

CODING FACTORY(https://www.codingfactory.net/10495)

테이블 ‘margin’을 ‘auto’로 두면 끝이었던 겁니다.

거기선 'margin-left:auto;margin-right:auto;'를 썼지만 전 그냥 하나만 쓰기로 했답니다.

--------------------------------------------------------------------------------

TABLE{margin:auto;~

--------------------------------------------------------------------------------

그랬는데도 테이블이 정확히 가운데로 자리합니다.

'앗싸! 야호^^^'

~ 테이블을 가운데로 - 02 ^^ ~