Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다.
아이콘 선택하기
마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다.
.fa-angle-right:before {
content: "\f105";
}
기본 마커 없애기
순서 없는 목록 ul의 기본 마커는 동그란 점입니다.
list-style-type 속성으로 마커를 없앱니다.
ul {
list-style-type: none;
}
아이콘 추가하기
:before 선택자와 content 속성을 이용하여 아이콘을 li 요소 앞에 넣습니다.
li:before {
content: "\f105";
font-family: FontAwesome;
}
margin 등을 이용하여 여백을 조정합니다.
li:before {
content: "\f105";
font-family: FontAwesome;
margin-left: -1.0em;
margin-right: 0.5em;
}
전체 코드
다음은 위 내용을 담은 전체 코드입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Coding Factory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body {
font-family: sans-serif;
}
ul {
list-style-type: none;
}
li:before {
content: "\f105";
font-family: FontAwesome;
margin-left: -1.0em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</li>
<li>Aliquam vitae aliquet ipsum.</li>
</ul>
</body>
</html>
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: ...
SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
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 ...
clipboard.js / 클립보드에 복사하게 해주는 스크립트
clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...
개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux
WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다. WebP Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다. 장점 더 작은 파일 크기 JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 ...
크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...