min.css파일 및 min.js파일 만들기

자주 사용하는 것은 아니지만 가끔 혼자 연습할 겸 프로젝트라고 하기에도 너무 작은 프로젝트를 할 때

reset.css와 같은 파일들을 만들 일이 있다.

그래서 용량을 어떻게든 줄이기 위해 min파일을 만든다.

위 링크를 들어가서 파일의 용량을 축소화 하면 좋다.

min파일은 일년에 한번 수정 할까 말까 혹은 수정하지 않는 코드들을 매번 똑같이 쓰기 위해 만드는 것이다.

a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: top;
  font-weight: 400;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: '';
  content: none;
}
:focus,
button,
input {
  outline: 0;
}
a,
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a:active,
a:focus,
a:hover,
a:link,
a:visited {
  text-decoration: none;
  outline: 0;
}
.skip {
  text-decoration-line: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.clearfix::after,
.clearfix::before {
  content: '';
  clear: both;
  display: table;
}
#skipNavi {
  width: 100%;
  position: relative;
}
#skipNavi a {
  position: absolute;
  top: -100px;
}
#skipNavi a:active,
#skipNavi a:focus,
#skipNavi a:hover {
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

위 코드는 내가 쓰는 reset.css 파일이다.

물론 저 따위로 코드인덴트 사용하지 않지만 프리티어를 쓰다보니 저리 정리가 되었다…

위 파일을 min파일로 만들면

a,abbr,acronym,address,applet,b,big,blockquote,body,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;font-weight:400}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}:focus,button,input{outline:0}a,ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a:active,a:focus,a:hover,a:link,a:visited{text-decoration:none;outline:0}.skip{text-decoration-line:-9999px;width:1px;height:1px;overflow:hidden;line-height:0;font-size:0}.clearfix::after,.clearfix::before{content:'';clear:both;display:table}#skipNavi{width:100%;position:relative}#skipNavi a{position:absolute;top:-100px}#skipNavi a:active,#skipNavi a:focus,#skipNavi a:hover{position:absolute;top:0;width:100%;display:block;background-color:#222;color:#fff;text-align:center;padding:10px 0}

이런식으로 한줄로 바꿔준다.

많은 곳에서 저런으로 코드를 줄이고 있으니 min파일을 잘 만들어서 사용해보자.