블로그를 쓰다 보면, html 테이블을 만드는 경우가 있다. 나는 구글 blogger를 이미 사용하고 있다. html을 나모 웹 에디터 사이트에서 테이블을 만든 다음 그것을 복사 하면 태그가 매우 복잡해진다. 페이지 로딩 속도가 느려져 나중에 seo에 영향을 받는다.
https://comp.namoeditor.co.kr/ce4/demo/namo/experience_write.jsp?code=01&tmp=
그럼 페이지 로딩 속도를 줄이려면, 태그의 양을 줄이는 것이다. 아래는 css코드가 심플 하고 flexible 한 html table을 만든 것이다.
| 연산 | 의미 |
| max(x) | x의 최대값 |
| min(x) | x의 최소값 |
| sum(x) | 모든 x값의 합 |
| mean(x) | x의 산술평균 |
| median(x) | x의 중위수 |
| range(x) | x의 최소값과 최대값의 차이 |
| var(x) | x의 표본분산 |
| cor(x,y) | 벡터 x와 y 와 상관관계 |
| sort(x) | x 값의 정렬 |
| rank(x) | x값을 순위 벡터 |
| order(x) | 오름차순으로 x를 정렬하는 순열을 포함한 정수 벡터 |
| quantile(x) | x 값의 사분위수를 나타내는 벡터 |
| cumsum(x) | 설정된 지점까지 모든 요소의 합을 포함하는 벡터 |
| cumprod(x) | 설정된 지점까지 모든 요소의 합을 포함하는 벡터 |
아래의 코드를 보고 설명 하겠다.
<style>
#td{
padding-top: 1px;
padding-right: 10px;
padding-left: 10px;
font-family: "맑은 고딕", monospace;
border-width: 0px 1px 1px 0px;
border-style: none solid solid none;
flex-basis:auto;
}
</style>
보기 좋다.
위에 있는 스타일(style)을 블로거 테마 에디터에 <head></head> 사이에 넣으면, 좋으나
모든 페이지에서 스타일을 불러오기 때문에 속도의 영향을 준다.
아래는 table을 만든 html 이다.
<table
border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: collapse;"
align = "center"
>
<tbody>
<tr>
<td id= "td" style="background-color:#FFCCFF">
연산
</td>
<td id= "td" style="background-color:#FFCCFF;
border-width: 0px 0px 1px;" >
의미
</td>
</tr>
<tr>
<td id = "td" >
max(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 최대값
</td>
</tr>
<tr>
<td id = "td" >
min(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 최소값
</td>
</tr>
<tr>
<td id = "td" >
sum(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
모든 x값의 합
</td>
</tr>
<tr>
<td id = "td" >
mean(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 산술평균
</td>
</tr>
<tr>
<td id = "td" >
median(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 중위수
</td>
</tr>
<tr>
<td id = "td" >
range(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 최소값과 최대값의 차이
</td>
</tr>
<tr>
<td id = "td" >
var(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x의 표본분산
</td>
</tr>
<tr>
<td id = "td" >
cor(x,y)
</td>
<td id ="td" style=" border-style: none none solid none;" >
벡터 x와 y 와 상관관계
</td>
</tr>
<tr>
<td id = "td" >
sort(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x 값의 정렬
</td>
</tr>
<tr>
<td id = "td" >
rank(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x값을 순위 벡터
</td>
</tr>
<tr>
<td id = "td" >
order(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
오름차순으로 x를 정렬하는 순열을 포함한 정수 벡터
</td>
</tr>
<tr>
<td id = "td" >
quantile(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
x 값의 사분위수를 나타내는 벡터
</td>
</tr>
<tr>
<td id = "td" >
cumsum(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
설정된 지점까지 모든 요소의 합을 포함하는 벡터
</td>
</tr>
<tr>
<td id = "td" >
cumprod(x)
</td>
<td id ="td" style=" border-style: none none solid none;" >
설정된 지점까지 모든 요소의 합을 포함하는 벡터
</td>
</tr>
</tbody>
</table>
속도는 아래와 같이 나왔다. 광고가 많이 나온것 치고 나쁘지 않은 속도 이다.
페이지 속도를 보려면 아래 사이트로 들어가서 url을 치고 테스트 해보면 알 수 있다.
 |
| 사이트 속도 |
댓글 없음:
댓글 쓰기