압축된 CSS를 원래대로 돌려주는 툴 소개!

압축된 CSS를 원래대로 되돌리고 싶다
웹 사이트의 제작 스킬을 익히기 위해 다양한 사이트의 CSS를 보고 계신 분들도 계실 거라고 생각합니다.
브라우저에서 웹 사이트를 볼 수 있을 때는 사이트에서 제공하는 HTML/CSS/JavaScript 정보를 볼 수 있습니다.그러나 WEB 사이트에 따라서는 파일 용량의 압축 등의 목적을 위해 CSS를 압축하고 있는 경우가 있습니다.

예를 들면 스페이스·개행 코드를 깎거나 자바스크립트의 경우라면 짧은 변수명으로 바꾸거나 암호화 하는 등 오리지널 CSS/JavaScript와는 다른 형태로 볼 기회도 많습니다.

그래서 이번에는 압축된 CSS를 원래대로 되돌리는 툴을 소개해 드리겠습니다.압축된 CSS를 원래대로 되돌리는 것을 해서 꼭 CSS 공부에 도움이 되도록 합시다.
압축된 CSS를 원래대로 돌려주는 툴
WEB의 툴을 사용하면 압축된 CSS를 즉시 원래대로 되돌릴 수 있습니다.이번에는 ′Pretty Diff′를 이용하겠습니다.
prettydiff
prettydiff를 열면 Function 부분을 Beautify로 하고 왼쪽 입력란에 압축된 CSS를 페이스트 합니다.또 파일로 준비하시는 분은 파일을 선택하신 후 CSS 파일을 업로드 하시기 바랍니다.
그러면 우측에 압축된 CSS가 전개, 성형되어 표시됩니다.

단행 코드 등도 적절히 들어 있기 때문에 매우 보기 쉬운 형태로 되어 있습니다.
복사한 시점에서 오른쪽에 전개, 성형된 CSS가 나오는데 안 되신 분들은 아래에 있는 Execute 버튼을 누르면 될 것 같습니다.
정리
어떠셨나요?JS라면 난독화되어 있거나 하는 해독은 어렵지만 CSS라면 압축된 것이라도 Pretty Diff 등의 WEB 툴을 사용하여 바로 전개해 볼 수 있습니다.
꼭 사이트의 압축된 CSS를 전개해 보고, 자신의 공부나 사이트 제작에 도움이 됩니다.

또 어떤 요소에 어떤 CSS가 사용되고 있는가 하는 것은 크롬의 개발 도구 등을 사용하면 보다 세밀하게 검증할 수 있기 때문에 추천합니다.아울러 공부합시다.