사진, 일러스트, 벡터, 비디오 등 다양한 콘텐츠를 저작권 걱정 없이 무료로 이미지를 다운로드하고 사용할 수 있는 사이트입니다. 상업적 용도로도 사용 가능하며, 출처 표기가 필요하지 않습니다. (바로가기)
★ 사용법
1. 검색기능을 이용하여 원하는 이미지를 선택합니다. 2. 다운로드 버튼을 클릭 후 이미지의 크기 & 용량을 선택합니다. 3. 다운로드 버튼을 누르면 끝~~
★ 참고사항
1. 회원가입 없이도 다운로드가 가능하지만, 고해상도 이미지나 추가 기능을 이용하려면 회원가입 및 로그인을 해야 합니다. 2. 픽사베이의 모든 콘텐츠는 상업적 용도로도 무료로 사용 가능하며, 출처를 밝힐 필요는 없지만, 추후 라이선스가 변경될 수 있고, 일부 콘텐츠는 모델 릴리스나 상표권 등의 제한이 있을 수 있으므로 사용 전에 확인하는 것이 좋습니다
더 자세한 이용 방법은 아래 영상을 참고하시기 바랍니다.
※ 언스플래시
고품질의 무료 이미지를 제공하는 플랫폼으로, 개인 및 상업적 용도로 자유롭게 사용할 수 있습니다 . (바로가기)
★ 사용법
1. 검색기능을 이용하여 원하는 이미지를 선택합니다. 2. 다운로드 버튼을 누르면 끝~~
★ 참고사항
1. 언스플래시의 이미지는 무료로 사용 가능하지만, 사진에 등장하는 인물이나 브랜드의 초상권 및 상표권은 별도로 확인해야 합니다. 2. 이미지를 재배포하거나 판매하는 행위는 금지되어 있습니다.
웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해 웹 디자이너와 개발자는 다양한 폰트를 활용하여 웹사이트의 디자인과 가독성을 향상시킬 수 있습니다.
구글 폰트(Google Fonts)는 무료로 제공되는 웹폰트 서비스입니다. 웹사이트에 폰트를 적용하면 디자인과 가독성을 개선할 수 있습니다.
여기서는 구글 폰트(Google Fonts) 사용법에 대해서 알아보려고 합니다.
1. 구글 폰트 웹사이트 접속하기
1) 브라우저에서 "구글웹폰트"를 검색하여 Google Fonts 사이트에 접속합니다. (바로가기) 2) 원하는 폰트를 검색하거나 카테고리, 언어, 글꼴 속성을 기준으로 필터링하여 선택합니다. 3) 여기서는 언어를 korean으로 선택하였습니다.
4) 사용할 수 있는 한글 폰트들이 보이는데 원하는 폰트를 선택합니다. 여기서는 가장 많이 사용하는 Noto Sans Korean를 선택합니다. 5) Get font를 선택합니다.
6) Get embed code를 선택합니다.
7) link방식과 import방식 둘 중 원하는 방식을 선택하여 원하는 코드를 복사해서 이용하시면 됩니다.
※ 사용예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS 스타일 정의 -->
<style>
/* Google Fonts에서 세 가지 글꼴을 가져옵니다. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');
body {
font-weight: 300; /* 기본 글꼴 두께를 설정 */
}
/* Noto Sans KR 글꼴을 적용한 클래스 */
p.font1 {
font-family: "Noto Sans KR", sans-serif;
}
/* Nanum Gothic 글꼴을 적용한 클래스 */
p.font2 {
font-family: "Nanum Gothic", sans-serif;
}
/* Nanum Brush Script 글꼴을 적용한 클래스 */
p.font3 {
font-family: "Nanum Brush Script", sans-serif;
}
</style>
</head>
<body>
<h3>Noto Sans Korean</h3>
<p class="font1">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
<h3>Nanum Gothic</h3>
<p class="font2">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
<h3>Nanum Brush Script</h3>
<p class="font3">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
</body>
</html>
a {
color: inherit; /* 부모 요소의 텍스트 색상 상속 */
text-decoration: none; /* 밑줄 제거 */
cursor: auto; /* 포인터 모양 변경 */
}
>>> 결과 <<<
※ 버튼 스타일 만들기
css속성을 주면 버튼처럼 만들 수 있어요
a {
display: inline-block; /* 링크를 인라인 블록으로 설정하여 크기와 여백을 설정 가능하게 함 */
padding: 10px 20px; /* 내부 여백: 위아래 10px, 좌우 20px */
background-color: #007BFF; /* 배경색을 파란색 계열로 설정 */
color: white; /* 텍스트 색상을 흰색으로 설정 */
text-decoration: none; /* 링크의 밑줄을 제거 */
border-radius: 5px; /* 버튼의 모서리를 둥글게 설정 (5px 반지름) */
transition: background-color 0.3s; /* 배경색 변경에 0.3초의 전환 효과를 추가 */
}
a:hover {
background-color: #0056b3; /* 마우스를 올렸을 때 배경색을 더 어두운 파란색으로 변경 */
}
>>> 결과 <<<
둥글고 입체감 있는 버튼도 만들 수 있어요
a {
display: inline-block; /* 버튼 크기 지정 가능 */
padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
background-color: #28a745; /* 녹색 배경 */
color: white; /* 흰색 텍스트 */
text-decoration: none; /* 밑줄 제거 */
border-radius: 50px; /* 둥근 버튼 모양 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 */
transition: transform 0.2s, box-shadow 0.2s; /* 클릭 시 애니메이션 효과 */
}
a:hover {
background-color: #218838; /* 호버 시 더 진한 녹색 */
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
}
a:active {
transform: scale(0.95); /* 클릭 시 버튼이 살짝 작아짐 */
}
>>> 결과 <<<
그라데이션 버튼도 만들 수 있어요
a {
display: inline-block; /* 버튼 크기 설정 */
padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
background: linear-gradient(45deg, #ff6f61, #d84e2a); /* 45도 각도로 그라데이션 배경 */
color: white; /* 흰색 텍스트 */
text-decoration: none; /* 밑줄 제거 */
border: none; /* 테두리 제거 */
border-radius: 8px; /* 둥근 모서리 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 주는 그림자 */
font-weight: bold; /* 굵은 글씨 */
cursor: pointer; /* 마우스 포인터가 손 모양으로 변경 */
transition: transform 0.2s, box-shadow 0.2s, background 0.3s; /* 클릭, 그림자 및 배경 변화에 애니메이션 추가 */
}
a:hover {
background: linear-gradient(45deg, #d84e2a, #ff6f61); /* 호버 시 그라데이션 방향 반전 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 강조 */
}
a:active {
transform: scale(0.98); /* 클릭 시 버튼이 살짝 작아짐 */
}
