[css] 테이블 테두리 한 줄로 만들어 보자

안녕하세요. 개자이너 씸플레이입니다. 테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다. 위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다. 1. 테이블에 테두리 넣기 See the Pen LYZwROL by ssimplay (@ssimplay) on CodePen. table{ border:1px solid black; } th, td{ border:1px solid black; } 일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 2. border-collapse : collapse See the Pen wvWVzOb by ssimplay (@ssimplay) on CodePen. 테이블에..

coding/html + css · 2020. 11. 24. 07:30

[html] <colgroup>을 이용해 테이블 비율 고정 하기

안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아니지만 나중에 내용이 길어질 때마다 비율이 틀어지는 것을 방지할 수 있습니다. 2. colgroup 을 이용해 칸의 비율을 정해줍니다. 은 태그 안쪽에 태그 시작 전에 넣어줍니다. 다른 태그처럼 태그를 넣어준 뒤 안쪽에 을 이용해 칸의 비율을 정해줍니다. 을 칸 개수만큼 만들어 준 뒤 입력값을 width:10%처럼 가로 비율을 정해주면 됩니다. 다 합쳐서 100이 되는 게 계산하기 좋기는 하지만, 상황에 따라 조금씩 조절해주셔도 됩니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 3. 07:30

[css] tr태그 여백 주기

안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..

coding/html + css · 2019. 12. 2. 07:30