CSS 파일 보는 프로그램

CSS 파일 보는 프로그램

QA

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;

}

 

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT