10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor)

1. 코드 경량화(= minify 하기)

: 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리.

경량화 하는 방법도 여러 가지가 있음!

1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기

나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다!

Bracket 작성 화면에서 바로 Minifier를 설치할 수 있다. JS와 CSS를 둘 다 경량화시킬 수 있는 프로그램이다.

=> JS CSS Minifier 를 설치한다.

* 이때, 경량화 할 코드가 들어있는 파일은 CSS 형태의 파일로 저장한다!

b/c html이 확장자인 파일에 minify를 적용하면 아무 일도 일어나지 않는다!

 

해당 파일을 열어 놓은 상태에서, [편집]-[Minify]를 누르면 

=> 기존파일명.min.css 라는 파일이 새로 생성된다. 이 파일을 열어보면 기존의 css파일과 똑같은 코드가 있는데, 다만 여백과 공백이 모두 사라져서 최소화된 형태로 남아 있다.

(단축키 : Ctrl + Alt + M)

 

+ 개별 파일뿐만 아니라 프로젝트 단위로도 경량화를 할 수 있다.

[편집]-[Minify Project] 를 누르면

=> 해당 파일이 들어있는 프로젝트에 속한 모든 css파일이 경량화된다.

(단축키 : Ctrl + Alt + A)

2. 코드 경량화 해 주는 사이트 활용하기

: http://adamburgess.github.io/clean-css-online/

↑여기에서 왼쪽 부분에 기존 코드를 입력하면, 오른쪽 부분에 경량화된 코드가 나온다.

3. 에디터 등 다른 프로그램을 거치지 않고, 명령 프롬프트에서 실행하기

(생각보다 복잡해서 생략!)

---

2. CSS 뛰어넘기(Preprocessor)

0. preprocessor의 개념

CSS는 표준화된 기술이다. 어느 한 집단에서 만들어서 배포(X), 위원회가 있고 다양한 논의를 통해 기술을 확정(O)

CSS에 다른 문법을 추가하자는 논의가 있었는데, 그것이 있으면 편해지기도 하지만 반면 CSS를 더 복잡하게 만들 수 있어서 CSS에 새롭게 넣지는 못했다.

그러나 위원회 등 공식적 기관이 아닌, 일부 개인과 집단들은 이 문법을 통해 다른 것들을 만들어 내기도 했는데,

그것이 바로 preprocessor이다.

즉 '표준화되거나 수용되지는 않았지만, 기존 CSS문법을 벗어나지 않는 선에서 변환되면서도 더 많은 기능을 수행할 수 있는 문법으로 코드를 작성하는 기술?도구?'이다.

 

ex. 문제상황

<!-- 기존의 CSS 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
}
body #logo {
  border-radius: 5px;
}

<!-- Stylus를 사용해서 작성한 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
  #logo {
    border-radius: 5px;
  }
}

코딩의 극단적 상황 : #logo 와 같은 id selector가 수십 개 있다고 생각해 보자.

그냥 body 태그 안에 적으면 될 일 이지만, CSS에서는 그렇게 할 수 없고 꼭 body #logo 순으로 일일이 body를 앞에 명시해줘야 한다. -> 귀찮음

그래서 Stylus 라는 preprocessor를 만들었는데, 이 Stylus에서는 #logo를 body{} 안에 넣기만 하면 앞에 body라고 언급해 주지 않아도 된다.

이럴 때, Stylus preprocessor를 이용해서 간단하게 코드를 작성하고, 그 다음에 해당 Stylus 파일을 그대로 웹브라우저에 적용할 수 없으므로, 그때 다시 CSS형식으로 컴파일 해 주면 된다.

1. 에디터에서 preprocessor 이용해서 코드 간단히 작성하기

1. 해당 Stylus를 editor에서 사용할 수 있게 하기 위해서, 확장 프로그램을 설치해야 한다.

-> [확장 프로그램 아이콘] 누르고, 'stylus' 검색해서 "Stylus Auto Compiler" 설치하기.

=> 그러면 이제 editor에서 stylus 형태의 파일을 저장하고 사용할 수 있다.

2. Stylus의 확장자는 styl임. => 파일이름.styl 으로 html editor에 파일을 하나 만든다.

(1번 없이 2번 작업이 불가능)

3. 해당 stylus의 간단한 문법을 사용해서 코드를 작성한다.

2. preprocessor을 이용해서 작성한 코드를 다시 컴파일하기

컴파일(compile) : 하나의 언어로 쓰여진 문서를 다른 언어로 옮기는 것.

(여기서는 Stylus로 쓰인 문서를 CSS 형식으로 옮긴다.) 두 가지 방법이 있다.

방법1) 에디터(editor)를 이용해서 컴파일

1. 해당 파일이름.styl 파일을 저장하면, 저장하면서 동시에 파일이름.css 이라는 파일이 하나 더 생긴다.

2. 그 파일은 stylus로 작성된 코드를 css형식으로 컴파일시킨 파일이다.

3. 웹브라우저에 해당 코드를 적용시키려면 2번 파일(css형식)을 사용해야 한다.

: html>head>link^body 에서, link href = "파일이름.css" 라고 명시해 준다.

-> 실행시키면 Stylus preprocessor로 작성해서, css 형식으로 변환된 파일이 html 웹브라우저에 나타난다.

 

** 사실 Stylus 기능은 유용하다고 생각하지만, 지금 나의 입장에서는 크게 사용할 일이 없을 것 같다... 

=> 나중에 필요할 때 다시 보기로 하고, 우선 넘어가자-->>

---

3. fontello

1. 소개

: 웹페이지에 아이콘을 삽입할 수 있게 해 주는 기능/사이트

: Fontello - icon fonts generator

Fontello - icon fonts generator

↑ 여기 가면 여러 아이콘들을 다운로드 받을 수 있다. 

fontello는 여러 아이콘 개발자들이 만든 아이콘을 한 군데에 모아 놓은 라이브러리 느낌으로 보면 된다.

스크롤을 내리면 각 섹션별로 이름이 있는데, 각 아이콘들을 만든 제작자를 기준으로 구분해 놓았다.

1-2. 아이콘 다운로드 받기

1) 원하는 아이콘 여러 개를 동시에 선택하고, 우상단의 Download 버튼을 누른다.

2) 다운로드 된 파일을 열면 demo.html 파일이 있는데, 열어보면 내가 다운로드 받은 아이콘들이 웹페이지에 사용될 경우 어떤 모양인지를 볼 수 있고, + show codes를 누르면 각 아이콘들이 html 파일에서 사용될 때 쓸 수 있는 코드도 볼 수 있다.

3) 다운로드 된 파일을 열면 css 파일 안에 fontello.css 또는 fontello-embedded.css 파일이 있는데, 후에 이 파일을 html파일의 link 태그를 이용해서 불러올 것이다.

-> 그러므로 이 css파일 전체를 복사해서 내가 사용하는 에디터의 디렉토리 파일로 옮겨 준다!

(*강의에서는 fontello.css 주소를 link 태그에 넣었는데 나는 그렇게 하면 안 되고 fontello-embedded.css 파일을 넣어야 아이콘이 떴다. 하나 해서 안 되면 다른 파일로 시도하면 될 것 같다.)

 

2. 사용법

css파일을 내가 사용하는 에디터의 현재 디렉토리 파일에 넣은 상태에서 작업을 시작한다.

* 모든 과정은 에디터에서 다 이뤄진다!

* 두 가지 방법이 있다.

방법 1.

1) head 태그 안에 link 태그를 만들고, href 안에 "css/fontello.css" 또는 "css/fontello-embedded.css" 를 입력.

= 아이콘이 있는 css파일을 불러오는 과정.

2) head 태그 안에 style 태그를 만들고, body{ } 안에 font-family: "fontello"; 를 입력한다.

3) demo.html 파일로 가서, show codes를 클릭한 후 넣고 싶은 아이콘의 코드번호를 복사해서 body 태그에 복사.

4) 이때 코드의 맨 앞에 '0'이 있는데, 이 0을 대신 '&#' 로 바꿔 주고 맨 끝에 세미콜론!

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        body{
            font-family: "fontello";
        }
    </style>
</head>
<body>
    &#xf09e;   // 해당 아이콘의 코드 이름
</body>
</html>

이러면 아이콘이 보인다!

방법 2.

1) head 태그 안에 link 태그를 만들고, href 안에 "css/fontello.css" 또는 "css/fontello-embedded.css" 를 입력.

= 아이콘이 있는 css파일을 불러오는 과정.

* 이 과정은 위와 똑같다.

2) i 태그를 사용한다.

: i 태그 안에 class를 정의하고, class의 이름으로는 demo.html에서 show codes를 체크 해제하면 나오는 각 아이콘의 이름을 입력한다.

* i 태그는 원래 기울임꼴 글씨 표시에 쓰이는데, link 태그로 fontello css파일을 불러오고 + class로 해당 아이콘 이름을 지정할 경우 아이콘도 나타낼 수 있다!

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
</head>
<body>
    <i class="icon-rss"></i>   // 해당 아이콘의 이름
</body>
</html>

이러면 아이콘이 보인다!

2-2. 아이콘 +a

당연하겠지만, 아이콘을 불러올 수 있다면 해당 아이콘에게도 우리가 기존에 알고 있던 css서식을 적용할 수 있다.

ex1) 아이콘에서 color 속성을 지정한다면, 해당 아이콘의 색이 바뀌어서 나온다.

ex2) 아이콘에서 font-size도 지정할 수 있다. 아이콘도 font의 일종으로 취급하는 것 같다.

(그래서 아이콘 라이브러리 사이트 이름이 fontello인듯)

=> 그 외의 text-align 등, 일반 글자에 적용되는 서식이라면 다 아이콘에 적용된다고 해도 무방할 것 같다.

---

3. fontello 기본 원리와 확장

3-1. 작동 원리

복잡한 설정을 하지 않았는데 어떻게 fontello가 잘 작동할까? fontello를 사용하는 데 쓴 코드들 중 크게 두 가지 부분에서 fontello의 작동원리를 알아보자.

* 원리는 모두 위에서 불러온 css/fontello.css 또는 css/fontello-embedded.css 파일에 있다.

 

1) font-family: "fontello";

불러온 fontello-embedded.css 파일을 열어보면, 맨 위의 @font-face 라는 선택자가 { } 로 묶여져 있다.

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?56489907');
  src: url('../font/fontello.eot?56489907#iefix') format('embedded-opentype'),
       url('../font/fontello.svg?56489907#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

즉 이 @font-face를 사용하려면 font-family를 font-family: "fontello"; 로 지정해야 하는 것이다.

아래의 src url은, 각 웹 브라우저마다 폰트를 처리하는 규격 등이 달라서 각각을 정의해 준 것이다.

 

2) <i class="아이콘 이름"></i>

마찬가지로 fontello-embedded.css 파일에 들어가서 해당 아이콘 이름을 Ctrl + F로 검색해 보면,

.icon-rss:before { content: '\f09e'; } /* '' */

이런 식으로 다운로드 받은 아이콘마다 서식 지정이 되어 있다.

위 코드는 해당 i태그를 사용하고 content라는 속성 값으로 "\f09e"를 지정한다면 icon-rss라는 이름의 아이콘을 지정하는 것과 같은 효과를 낸다는 말이 된다.

 

그렇다면 이 뒤에 붙은 :before는 무엇일까?

해당 css파일의 앞 부분을 보면 이런 코드가 있다.

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

^은 문자열의 앞/뒤 부분을 나타낸다.

1) "문자열"^ : "문자열"로 시작하는 모든 문자열을 의미

2) ^"문자열" : "문자열"로 끝나는 모든 문자열을 의미

그러므로 class^="icon-" 의 의미는 class가 "icon-"으로 시작하는 모든 선택자에 해당하는 사항이라는 의미이다.

뒷 줄에는 font-family: "fontello"; 라고 되어 있는데, 즉 윗 줄의 조건을 만족하면 font-family: "fontello"; 서식을 적용하겠다, 즉 해당 코드를 아이콘으로 나타내게 하겠다는 의미이다.

=> 그러므로 i 태그의 class를 사용해서 아이콘을 나타낼 때, 아이콘 이름은 다 icon-으로 시작하므로 이름을 맞게만 입력한다면 font-family: "fontello"; 서식이 자동 적용되는 것이다.

 

3-2. 확장편

fontello의 아이콘들을 이용해서 할 수 있는 더 다양한 것들을 알아보자.

1) :before , :after => 특정 선택자/텍스트의 앞/뒤에 css서식 적용하기

:hover 처럼 style 태그 안의 선택자 뒤에 :before 또는 :after를 입력하고 { }를 열어서 CSS 서식을 작성하면 된다.

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        #now{
            font-size : 100px;
            text-align : center;
            margin-top : 30px;
            color : limegreen;
            background-color : black;
        }
        #back:before{
            font-family: "fontello";
            content: "AB";
            font-size : 100px;
            color : deeppink;
        }
    </style>
</head>
<body>
    <i class="icon-rss" id="now"></i>
    <i class="icon-videocam"></i>
    <i class="icon-user-plus"></i>
    <i class="icon-flight"></i>
    <i class="icon-home"></i>
    <div id="back">CSS</div>
</body>
</html>

만약 이렇게 작성한다면, 

이런 결과가 나올 것이다!

 

2) animation 효과

: 아이콘을 넣었는데, 이 아이콘이 움직이게 하고 싶다면 사용하는 효과.

 

방법

1) link 태그를 하나 더 만들고, href 안에 "css/animation.css" 라고 입력한다.

= css 폴더 안의 animation css 파일을 불러온다.

2) 효과를 적용하고 싶은 선택자의 class명에 animation-(적용하고 싶은 효과)를 입력한다.

: 이때, 어떤 효과를 적용할지는 animation.css 파일을 보고 효과명을 그대로 입력해야 적용된다.

<link rel="stylesheet" href="css/animation.css">

<i class="icon-home animate-spin"></i>

이렇게 class명의 icon 이름 적용한 코드 바로 뒤에 이어서 효과명을 쓴다.

해당 animate-spin 효과는 회전 효과로, 적용하면 아이콘이 빙글빙글 도는 효과를 낼 수 있다. (로딩 이미지에 적합할듯)

---

4. fontello 폰트 만들기

: 정확히는 다른 이미지를 아이콘으로 만드는 방법.

* 이 방법 역시 fontello 웹사이트를 이용해야 가능하다.

* 아무 이미지나 아이콘으로 바꿀 수 없고, 벡터 이미지를 바꿀 수 있다!

+ 벡터 이미지는 Noun Project: Free Icons & Stock Photos for Everything (thenounproject.com) 여기서 받을 수 있다.

Noun Project: Free Icons & Stock Photos for Everything

 

<방법>

1. thenounproject 사이트에서 원하는 벡터 이미지를 다운로드 받는다.

2. 다운로드 받은 이미지를 fontello의 아이콘들이 나오는 페이지에서 'Custom Icons' 영역에 드래그한다.

3. 그러면 해당 벡터 이미지를 아이콘 형식으로 다운 받아서 사용할 수 있다.

 

만약 fontello에서 기존에 다운로드 받았던 아이콘들을 알 수 없다면?

1. Download webfont 버튼 왼쪽으로 두 칸 옆의 연장 버튼 클릭하고 Import 버튼 누르기

2. 파일 선택창에서 config.json 파일을 불러오면, 그동안 내가 선택했던 아이콘들을 모두 볼 수 있다.