[GitBlog] 블꾸 (2) - 표 디자인 변경
2023, Sep 20
글에 들어가는 표가 테두리가 없음
오잉?
1. 개발자도구로 html에서 확인
html 내용 확인
- 개발자도구(f12) 열고, Ctrl+Shift+C 혹은 왼쪽상단 버튼 누르기
- 표 클릭
-> 표 id같은게 있는지 확인~ (난 없음)
2. 프로젝트에서 div id 검색해서, css 파일에 set 해주기
div id인 c-wrap-content 에다가 table 설정 내용을 넣어주면 됨~
.c-wrap-content {
padding: 20px;
background-color: $white-color;
table {
display: block;
margin-bottom: 1em;
width: 100%;
font-family: $base-font-family;
font-size: $base-font-size;
border-collapse: collapse;
overflow-x: auto;
& + table {
margin-top: 1em;
}
}
thead {
background-color: $sub-background;
border-bottom: 2px solid mix(#000, $border-color-post, 25%);
}
th {
padding: 0.5em;
font-weight: bold;
text-align: center;
}
td {
padding: 0.5em;
border-bottom: 1px solid mix(#000, $border-color-post, 25%);
}
tr,
td,
th {
vertical-align: middle;
}
}
테이블 템플릿은 구글링해서 css 코드 가져오면 편함
나는 너무나도 감사한 깃블로그의 테이블 css 코드 오려옴
https://ansohxxn.github.io/blog/public/
3. 적용 후
참고 사이트
표 스타일 CSS - border-collapse / border-spacing - https://mine002.tistory.com/160
앞으로 하고싶은거
색 커스텀폰트크기 조정포스트 목록 커스텀표 커스텀- 글자간격 조정
- 통계 페이지 추가
- 아카이브 페이지 추가
- 카테고리
- 목차
아자아자!