Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다.
이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다.
체크박스와 라벨 만들기
체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/all.css">
<style>
div {
margin: 30px;
font-size: 32px;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="aa">
<label for="aa" class="bb"></label>
<label for="aa" class="cc">Lorem Ipsum Dolor</label>
</div>
</body>
</html>
아이콘 찾기
Font Awesome에서 체크박스로 사용할 아이콘을 선택하고, 유니코드를 복사합니다. 체크하기 전과 체크한 후 보여줄 두 개의 아이콘이 필요합니다.
라벨 앞에 아이콘 넣고 체크박스 보이지 않게 하기
첫 번째 라벨 앞에 체크하기 전에 보여줄 아이콘을 넣습니다. 그리고 체크박스를 체크했을 때 체크한 후 보여줄 아이콘으로 변경되도록 만듭니다. 유니코드 앞에 \를 붙여야 한다는 것에 주의합니다.
label.bb:before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
}
input#aa:checked + label.bb:before {
content: "\f14a";
}
체크하기 전의 모습니다.
작은 체크박스, 큰 사각형 아이콘, 라벨, 셋 중 하나를 클릭하면 다음과 같이 변합니다.
이제 체크박스를 보이지 않게 합니다.
input#aa {
display: none;
}
전체 코드
다음은 전체 코드입니다. 체크박스를 토글로 만든 것을 추가했고, 약간 모양을 바꾸었습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/all.css">
<style>
div {
margin: 30px;
font-size: 32px;
}
label.bb:before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
margin-right: 10px;
color: #cccccc;
font-size: 24px;
}
input#aa:checked + label.bb:before {
content: "\f14a";
color: #000000;
}
input#aa {
display: none;
}
label.ee:before {
content: "\f204";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
color: #cccccc;
position: relative;
top: 3px;
}
input#dd:checked + label.ee:before {
content: "\f205";
color: #448aff;
}
input#dd {
display: none;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="aa">
<label for="aa" class="bb"></label>
<label for="aa" class="cc">Lorem Ipsum Dolor</label>
</div>
<div>
<input type="checkbox" id="dd">
<label for="dd" class="ee"></label>
<label for="dd" class="ff">Lorem Ipsum Dolor</label>
</div>
</body>
</html>
Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법
사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...
개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS 파일 가져오기 SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다. inc.scss h1 { margin: ...
Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...
윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전
인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...
SASS / 문법 / 조건문 - @if, @else if, @else
SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다. 문법 @if condition1 { A } @else if condition2 { B } @else { C } condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 ...
CSS에서 주석은 /*와 */로 만듭니다. SASS에서는 CSS 주석 외에 한 줄 주석인 //를 지원합니다. 컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라집니다. SASS /* CSS Comment */ // Line Commnet p { color: red; /* CSS Comment */ padding: 20px; // Line Comment } CSS /* CSS Comment */ p { color: red; ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...