1. 코드 경량화(= minify 하기)
: 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리.
경량화 하는 방법도 여러 가지가 있음!
1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기
나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다!
=> 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는 여러 아이콘 개발자들이 만든 아이콘을 한 군데에 모아 놓은 라이브러리 느낌으로 보면 된다.
스크롤을 내리면 각 섹션별로 이름이 있는데, 각 아이콘들을 만든 제작자를 기준으로 구분해 놓았다.
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>
 // 해당 아이콘의 코드 이름
</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) 여기서 받을 수 있다.
<방법>
1. thenounproject 사이트에서 원하는 벡터 이미지를 다운로드 받는다.
2. 다운로드 받은 이미지를 fontello의 아이콘들이 나오는 페이지에서 'Custom Icons' 영역에 드래그한다.
3. 그러면 해당 벡터 이미지를 아이콘 형식으로 다운 받아서 사용할 수 있다.
만약 fontello에서 기존에 다운로드 받았던 아이콘들을 알 수 없다면?
1. Download webfont 버튼 왼쪽으로 두 칸 옆의 연장 버튼 클릭하고 Import 버튼 누르기
2. 파일 선택창에서 config.json 파일을 불러오면, 그동안 내가 선택했던 아이콘들을 모두 볼 수 있다.
'front-side > CSS' 카테고리의 다른 글
Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법 (0) | 2021.05.31 |
---|---|
9. 그래픽 fin ~ 유지보수-link와 import (0) | 2021.04.13 |
8. 그래픽 (0) | 2021.04.12 |
7. 레이아웃 (0) | 2021.04.07 |
6. 레이아웃 추가(심화)내용 (0) | 2021.04.05 |