css center-align 및 box-sizing 및 box-shadow 관련 자료

1, 100, 1000 이렇게 숫자들이 li 형태로 배치가 될 때 

  1

 10

100 이런 식으로 정렬되게 하고 싶었다. 방법이 없나 좌절할 때 쯤

https://webdesign.tutsplus.com/ko/tutorials/the-holy-grail-of-css-centering--cms-22114 에서 부모 element의 display를 table로 주고 자식을 table-cell 로 주어 숫자들이 중앙정렬 되게 해주는 방법을 알려주어 정렬할 수 있었다.

box-sizing 개념

* content-box

* border-box

두 가지가 있고 width:100px height:100px 일 때 border-box는 padding과 border을 포함해서 총 크기가 100*100 이 되게 한다.

하지만 content-box는 content크기 자체는 100으로 두게 되고 나머지 padding과 border은 크기가 있으면 그 크기를 적용시켜 모양을 만듬.

https://webisfree.com/2016-01-10/[css]-box-sizing-%EC%86%8D%EC%84%B1-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EB%A0%88%EC%9D%B4%EC%96%B4-%ED%81%AC%EA%B8%B0-%EA%B2%B0%EC%A0%95-%EB%B0%A9%EC%8B%9D-%EC%84%A0%ED%83%9D

box-shadow 개념

https://www.tabmode.com/homepage/box-shadow.html