사용한 것
- HTML
- CSS
- Google Font
- Font Awsome
CSS
linear-gradient
linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n);
사진이 밝아서 위에서 아래로 갈수록 어둡게 만들어주었다.
1로 갈수록 어두워지고 0으로 갈수록 밝아진다.
아래의 코드에서 첫 번째 rgba가 아래를 가리키고 두 번째 rgba가 위를 가리킨다.
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
images/bojnice-castle-1603142898.jpg');
Google Font 추가하기
구글 폰트 링크
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
원하는 폰트를 선택한 후 link를 html 파일 <head> 태그 사이에 넣어준다.
CSS에서 글씨체 이름을 가져와 사용이 가능하다.
* {
font-family: 'Gowun Dodum', sans-serif;
}
전체 코드
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<title>영화 기록하기</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="title">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: 'Gowun Dodum', sans-serif;
box-sizing: border-box;
}
.title {
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
images/bojnice-castle-1603142898.jpg');
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Black Han Sans';
}
h1 {
color: #fff;
}
button {
padding: 10px;
background-color: transparent;
color:#fff;
border-radius: 30px;
padding: 10px 30px;
border: 3px solid #fff;
font-size: 20px;
margin-top: 10px;
}
button:hover {
border: 4px solid #fff;
}
결과
'개발 일지 > Web' 카테고리의 다른 글
| [ 스파르타 / Web ] 웹개발 종합반 2주차_#1 (영화 후기 사이트) (0) | 2022.11.03 |
|---|---|
| [ 스파르타 / Web ] 웹개발 종합반 1주차_#4 (영화 후기 사이트) (0) | 2022.11.03 |
| [ 스파르타 / Web ] 웹개발 종합반 1주차_#3 (영화 후기 사이트) (0) | 2022.11.02 |
| [ 스파르타 / Web ] 웹개발 종합반 1주차_#1 (부트스트랩) (0) | 2022.11.02 |
| [ 스파르타 / WEB ] 웹개발 종합반 1주차 후기 (0) | 2022.11.02 |
댓글