CSS 파일 보는 프로그램
본문
아래와 같이 다닥다닥 붙어있는 CSS 파일이나 JS 파일을 일목요연하게 정렬되어서 볼 수 있는 프로그램이 있는지요?
---------------- 아래 -------------
.site-content .game-list .game-item.row { float: none; display: inline-block; margin: 15px auto; padding-bottom: 6px; } .game-image img { width: 100%; z-index: 10; position: relative; } .site-content .game-list .game-item .game-jackpot-value { position: absolute; background: rgba(235,41,57,0.7); width: 100%; display: block; bottom: 0; z-index: 11; color: white; text-align: center; font-size: 14px; line-height: 21px; } .game-list.gamelayout-list .game-item,.game-list.gamelayout-details .game-item { width: 33.33333333333333%; } .game-list.gamelayout-list .game-item .game-image { height: 30px; clear: right; float: left; width: 50px; } .game-list.gamelayout-list .game-item .game-image img { display: none; } .game-list.gamelayout-list .game-item .game-text .game-teaser { display: none; } .game-list.gamelayout-list .game-item .game-status { width: 64%; } .site-content .game-list.gamelayout-list .game-item .game-jackpot-value { display: none; } .site-content .game-list.gamelayout-list .game-item .game-image:hover:after { display: none; } .game-list.gamelayout-details .col:nth-child(3n+1) { clear: left; } .game-list.gamelayout-details .game-item .game-info { width: 50%; color: #333; float: left; } .game-list.gamelayout-details .game-item .game-info .game-teaser { font-size: 13px; } .game-list.gamelayout-grid .game-item { width: 16.66666667%; } .game-list.gamelayout-grid .game-item .game-image { display: block; } .game-list.gamelayout-grid .game-item .game-text { display: none; } .game-list.gamelayout-grid .game-item .game-teaser { display: none; } .game-item .row { margin-left: 0; margin-right: 0; } .game-list.gamelayout-grid .game-item .game-status { margin-top: 5px; } .game-item .icn-game-new,.game-item .icn-game-hot,.game-item .icn-game-jackpot,.game-item .icn-game-tournament { position: absolute; top: -10px; left: 0; z-index: 20; } .game-item .game-rating { display: inline-block; padding: 2px 5px; font-size: 0; } .toggle-more-or-less.btn,.template_thumbnailsmall .grid-item-info .btn { font-size: 11px; text-transform: uppercase; padding: 0 1.8em; height: 22px; } #more-games { clear: both; padding-top: 16px; text-align: center; position:relative; } /**/ .game-bonus-item { clear: both; } .game-bonus-item .bonus-description { float: left; width: 340px; padding-top: 38px; padding-left: 20px; } .game-bonus-item .game { float: right; padding: 5px 20px; } .game-bonus-item .game-text { display: none; } .game-bonus-item .game-status { position: absolute; } div#user-messages h2 { margin-bottom: -18px; } div#user-messages em { font-weight: bold; font-style: normal; } div#user-messages.ui-dialog-content { width: 535px; } /**/ .livecasino-list ul { text-align: center; margin: 0 -4px 0 -5px; padding: 0; } .livecasino-list li { display: inline-block; margin: 20px 10px; position: relative; width: 311px; height: 255px; } .livecasino-item:hover { cursor: pointer; } .livecasino-item span { display: none; } .full-screen-mode-wrapper { text-align: right; } .full-screen-mode.btn { padding: 2px 4px 0; } .toggle-more-or-less { } .toggle-more-or-less:before,.toggle-more-or-less:after { border-top: 1px solid #999; display: block; height: 1px; content: " "; width: 43%; position: absolute; left: 0; top: 28px; } .toggle-more-or-less:after { right: 0; left: auto; }
답변 1
그럼요.. 찾아보면 많습니다.
http://www.cleancss.com/css-beautify/
위 코드를 적용하면 아래와 같네요..
.site-content .game-list .game-item.row {
float: none;
display: inline-block;
margin: 15px auto;
padding-bottom: 6px;
}
.game-image img {
width: 100%;
z-index: 10;
position: relative;
}
.site-content .game-list .game-item .game-jackpot-value {
position: absolute;
background: rgba(235, 41, 57, 0.7);
width: 100%;
display: block;
bottom: 0;
z-index: 11;
color: white;
text-align: center;
font-size: 14px;
line-height: 21px;
}
.game-list.gamelayout-list .game-item,
.game-list.gamelayout-details .game-item {
width: 33.33333333333333%;
}
.game-list.gamelayout-list .game-item .game-image {
height: 30px;
clear: right;
float: left;
width: 50px;
}
.game-list.gamelayout-list .game-item .game-image img {
display: none;
}
.game-list.gamelayout-list .game-item .game-text .game-teaser {
display: none;
}
.game-list.gamelayout-list .game-item .game-status {
width: 64%;
}
.site-content .game-list.gamelayout-list .game-item .game-jackpot-value {
display: none;
}
.site-content .game-list.gamelayout-list .game-item .game-image:hover:after {
display: none;
}
.game-list.gamelayout-details .col:nth-child(3n+1) {
clear: left;
}
.game-list.gamelayout-details .game-item .game-info {
width: 50%;
color: #333;
float: left;
}
.game-list.gamelayout-details .game-item .game-info .game-teaser {
font-size: 13px;
}
.game-list.gamelayout-grid .game-item {
width: 16.66666667%;
}
.game-list.gamelayout-grid .game-item .game-image {
display: block;
}
.game-list.gamelayout-grid .game-item .game-text {
display: none;
}
.game-list.gamelayout-grid .game-item .game-teaser {
display: none;
}
.game-item .row {
margin-left: 0;
margin-right: 0;
}
.game-list.gamelayout-grid .game-item .game-status {
margin-top: 5px;
}
.game-item .icn-game-new,
.game-item .icn-game-hot,
.game-item .icn-game-jackpot,
.game-item .icn-game-tournament {
position: absolute;
top: -10px;
left: 0;
z-index: 20;
}
.game-item .game-rating {
display: inline-block;
padding: 2px 5px;
font-size: 0;
}
.toggle-more-or-less.btn,
.template_thumbnailsmall .grid-item-info .btn {
font-size: 11px;
text-transform: uppercase;
padding: 0 1.8em;
height: 22px;
}
#more-games {
clear: both;
padding-top: 16px;
text-align: center;
position: relative;
}
/**/
.game-bonus-item {
clear: both;
}
.game-bonus-item .bonus-description {
float: left;
width: 340px;
padding-top: 38px;
padding-left: 20px;
}
.game-bonus-item .game {
float: right;
padding: 5px 20px;
}
.game-bonus-item .game-text {
display: none;
}
.game-bonus-item .game-status {
position: absolute;
}
div#user-messages h2 {
margin-bottom: -18px;
}
div#user-messages em {
font-weight: bold;
font-style: normal;
}
div#user-messages.ui-dialog-content {
width: 535px;
}
/**/
.livecasino-list ul {
text-align: center;
margin: 0 -4px 0 -5px;
padding: 0;
}
.livecasino-list li {
display: inline-block;
margin: 20px 10px;
position: relative;
width: 311px;
height: 255px;
}
.livecasino-item:hover {
cursor: pointer;
}
.livecasino-item span {
display: none;
}
.full-screen-mode-wrapper {
text-align: right;
}
.full-screen-mode.btn {
padding: 2px 4px 0;
}
.toggle-more-or-less {} .toggle-more-or-less:before,
.toggle-more-or-less:after {
border-top: 1px solid #999;
display: block;
height: 1px;
content: " ";
width: 43%;
position: absolute;
left: 0;
top: 28px;
}
.toggle-more-or-less:after {
right: 0;
left: auto;
}