흰색 배경이 심심해 보여서
간단히 배경화면 넣어봤다.
.back-ground{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(friends-home1.jpg);
background-size: cover;
}
그리고 CHARACTER 버튼을 누르면
등장인물 소개하는 화면이 나오게 만들어봤다.
매우 허접하지만
나름 재밌게 하고있다.
가운데 있는 Ross에 마우스를 올려봤다.
보이는 것처럼 hover 효과가 들어가서
조금 어두워 지는 효과를 만들어 봤다.
저걸 누르면 새로운 팝업이 뜨면서 등장인물 소개하는 창을 만들고 싶다.
하고 싶은 건 많지만
아직 정말 많이 부족하다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="character.css">
<title>FRIENDS CHARACTER</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.html">
</head>
<body>
<div class="wrapper">
<h1>WE ARE FRIENDS!</h1>
<div class="img-area">
<div class="single-img">
<img src="rachael.jpg" width="400" height="400"></div>
<div class="single-img">
<img src="ross.jpg" width="400" height="400"></div>
<div class="single-img">
<img src="phoebe.jpg" width="400" height="400"></div>
<div class="single-img">
<img src="joey.png" width="400" height="400"></div>
<div class="single-img">
<img src="monica.jpg" width="400" height="400"></div>
<div class="single-img">
<img src="chandler.jpg" width="400" height="400"></div>
</body>
</html>.wrapper h1{
text-align: center;
font-size:40px;
font-family: 'Raleway', sans-serif;
color: #de8a0d;
}
.img-area{
display: flex;
flex-wrap: wrap;
flex-direction: row; /* 행으로 정렬 */
align-items: center;
justify-content: center;
}
.single-img{
padding: 5px 5px;
clip-path: circle(40%); /* 원으로 만들어줌 */
}
img:hover{
opacity: 0.6;
transition: 0.9s;
transform: scale(1.1);
}
body{
background-color: #080807;
}
기능 추가해야 할것
뒤로가기 버튼,
인물 사진 클릭하면 등장인물 설명 나오게 하기,
비디오 공부영상,
방명록 추가.
'나의 첫 웹사이트 만들기' 카테고리의 다른 글
| 비전공자 - 웹사이트 혼자 만들기 (잠시멈춤) (0) | 2020.08.27 |
|---|---|
| 비전공자 - 웹사이트 혼자 만들기 (5. 방명록 만들기) (0) | 2020.08.25 |
| 비전공자 - 웹사이트 혼자 만들기 (4. 동영상 링크) (0) | 2020.08.24 |
| 비전공자 - 웹사이트 혼자 만들기 (2. 기본메뉴바 만들기) (0) | 2020.08.22 |
| 비전공자 - 웹사이트 혼자 만들기 (1. 어떤 사이트를 만들까?) (0) | 2020.08.21 |
