css 정렬 코드

DIST까지는 아니고, 코딩을 하기 위해서 편하게 여러줄로 펼쳐 놓았던 것들을 

각 엘리먼트당 한줄씩으로 표현하는 코드이다.

참 간단한 코드이지만 일할때 마다 짜기는 귀찮아서 편의상 저장해 놓는다.

참고로 python3이다.

# exit를 치면 종료한다.
def multi_input():
    print("정리하려는 CSS코드를 입력해 주세요.")
    lines = []
    while True:
        line = input()
        if line:
            if line == "exit":
                break
            lines.append(line)
    return lines
 
def cut_lines(lines):
    for i in lines:
        print(i, end="")
        if i[-1] == "}": print()
 
cut_lines(multi_input())

적용전

* {
    margin:0px;
    padding:0px;
}

body {
    position:relative;
}

h1 { 
    margin: 20px auto 50px;
    display: table;
}

.task {
    margin: 20px auto;
    width: 80%;
    border-radius:20px;
}

.task > ul {
    padding: 15px;
    list-style: none;
    color:white;
    vertical-align: middle;
    
}

#task1{
    background-color:#3A3531;
    
}

#task2{
    background-color: #F3ECDC;
}

#task2 ul {
      color:brown;
}

#task3{
    background-color: #BFB4A8;
}

#task4{
    background-color: #201917; 
}

#task5{
    background-color: #706058; 
}

.context-menus{
    position : absolute;
    display:none;
    border : 1px solid black;
    width : 70px;
    text-align: center;
    padding:10px;
   
    
}

.context-menus.active {
    display:block;
  
}

.context-menus.active>ul>li{
    list-style: none;
}
/* list-style은 li태그의 경우 div나 ul이 아닌 li에 바로 붙여야 한다. */

적용후

* { margin:0px; padding:0px;}
body { position:relative;}
h1 { margin: 20px auto 50px; display: table;}
.task { margin: 20px auto; width: 80%; border-radius:20px;}
.task > ul {    padding: 15px;    list-style: none;    color:white;    vertical-align: middle;    }
#task1{    background-color:#3A3531;    }
#task2{    background-color: #F3ECDC;}
#task2 ul {      color:brown;}
#task3{    background-color: #BFB4A8;}
#task4{    background-color: #201917; }
#task5{    background-color: #706058; }
.context-menus{    position : absolute;    display:none;    border : 1px solid black;    width : 70px;    text-align: center;    padding:10px;       }
.context-menus.active {    display:block;  }
.context-menus.active>ul>li{    list-style: none;}
/* list-style은 li태그의 경우 div나 ul이 아닌 li에 바로 붙여야 한다. */

str로 라인들을 읽어내고 있는데 왜 저 빈칸 4개가 안 사라지는지 모르겠다. -_-;;

replace 를 이용해서 \t, \n, "    " 로도 다 해봤는데 안된다.