HTML 그리고 CSS - 첫 번째 페이지를 만들기.
일단 각 페이지들을 만들어 보려한다.
S GALLERY 라는 문구가 화면 정중앙에 떠야한다.
그 다음 바로 밑에 Entrance 글씨로 만들어진 버튼이 있다.
이걸 누르면 다음 페이지로 넘어가야한다.
여기선 작성해야하는 부분은 간단하다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
font-family: 'Gothic A1', sans-serif;
}
</style>
</head>
<body>
<div class="mainimg">
<div class="Stitle">
<h1>S GALLERY</h1>
<a href="SGhome.html"> Entrance </a>
</div>
</div>
</body>
</html>구글 폰트 설정까지 했다.
여기에 백 그라운드 이미지도 추가했는데
생각보다 컬러가 진하게 나타나기 때문에 흐리게 표현하는 CSS 도 추가했다.
.mainimg {
width: 100%;
height: 100%;
background-image: url(https://images.unsplash.com/photo-1553616040-548049bba792?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80);
background-position: center;
background-size: cover;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
opacity: 0.5;
}
여기서 opacity의 숫자를 0-1 사이에서 원하는 만큼 설정하면 된다.
Entrance 에 이동하고자 하는 링크를 추가 한다.
"cursor: pointer;"
글자에 마우스를 갖다대면
눌리는 버튼인지 쉽게 알아보기 위해 마우스 커서 효과도 넣었다.
그리고 생각보다 심심해 보이는 부분을 위해 마우스 커서를 가져가면
그림자 효과도 나타나게 hover 를 이용해보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S GALLERY main</title>
<style>
* {
font-family: 'Gothic A1', sans-serif;
}
.mainimg {
z-index: 1;
width: 100%;
height: 100%;
background-image: url(https://images.unsplash.com/photo-1553616040-548049bba792?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80);
background-position: center;
background-size: cover;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
opacity: 0.5;
}
.Stitle {
color: rgb(255, 255, 255);
text-align: center;
margin-top: 250px;
margin-bottom: 200px;
}
.Stitle > h1 {
font-size: 150px;
margin-bottom: 0;
}
.Stitle > a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: none;
transition: 0.5s;
background-color: #ffffff00;
border: 0;
outline: 0;
font-size: 50px;
margin-bottom: 0;
cursor: pointer;
}
.Stitle > a:hover {
text-shadow: 5px 5px 10px #ddd;
}
</style>
</head>
<body>
<div class="mainimg">
<div class="Stitle">
<h1>S GALLERY</h1>
<a href="SGhome.html"> Entrance </a>
</div>
</div>
</body>
</html>이 html의 결과물은
이렇게 나온다.
두번째 페이지 만들기
간단하게 내가 각 장소별 버튼을 만든다.
첫번째 페이지 만들때랑 크게 다르지 않다.
각 나라/도시 별 html을 만들어서
버튼을 누르면 해당 html로 이동하게끔 설정한다.
<body>
<div class="homeimg">
<div class="Stitle">
<h1>Which do you wanna go</h1>
</div>
<div class="city">
<a class="c1" href="SGnyc.html">Newyork</a>
<a class="c2" href="SGla.html">Los Angeles</a>
<a class="c3" href="SGsea.html">Seattle</a>
</div>
</div>
</body>a 태그를 이용 href에 이동하고자 하는 페이지를 주었다.
두 번째 페이지의 모습은 이렇게 나오게 된다.
(첫 기획 때와는 좀 다르게 washinhton DC 에서 Seattle 로 바꾸게 되었다.)
여기서 개인적으로 각 나라/도시 페이지로 넘어가기 위해 만들어 놓은 a 태그를 누를 수 있는 부분이라는 것을 표시하기 위해 약간의 효과를 넣어 보았다.
.city>a{
transition: 0.5s;
cursor:pointer;
}
.city>a:hover{
text-shadow: 5px 5px 10px #ddd;
}여기서도 마우스 커서를 갖다대면 포인터가 바뀌는 게 해주었고,
텍스트에 쉐도우도 만들어줬다.
개발일지 모음집