평소 요리를 잘 하는 편이 아니지만
꼭 필요한 경우에 영상을 보면서 요리하면,
나같은 똥손도 맛있게 요리 할 수 있다는 것을 깨닫곤 했다.
그래서 훗날 요리 페이지를 만들게 될 것 같아서
미리 재미삼아 첫 페이지만 만들어봤다.
https://coder-jason.github.io/Recipe-page
로고 이미지는 미리캔버스에서 조금 수정해서 만들었다.
오늘 중점적으로 다룰 내용은
1. list에 마우스를 대면 밑에 노란선이 생기는 hover 효과.
2. 화면 작아졌을 때 우측 상단 바 클릭 기능.
먼저
1. hover 효과
먼저 밑에 글을 읽어보시길 바람.
https://developer.mozilla.org/ko/docs/Web/CSS/::after
::after (:after)
CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
developer.mozilla.org
::after는 보통 content와 같이 쓰임.
width를 0으로 설정후 마우스대면 100%로 바뀌게 함.
margin: auto; 는 노란선이 가운데부터 양 쪽으로 퍼지게 함.
2. 화면 작아졌을 때 우측 상단 바 클릭 기능.
우선 bar 버튼과 close 버튼 아이콘을 만들기 위해서
i class="fa fa-bars"와 fa fa-close를 이용하여 각각 만들어준다.
그리고 클릭기능을 만들기 위해 onclick 함수 만들어줌.
사실 나도 DOM을 모르는데 이 기능을 넣어보고 싶어서
연습삼아 한 번 따라서 해보았다.
밑에 설명보고 얼추 이해함.
아직 설명할 정도의 실력은 아니어서
밑의 참고내용을 보기바람..
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
전체코드
HTML
<!DOCTYPE html>
<html>
<head>
<title>Magic Recipe</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="background">
<div class="nav-bar">
<div class="nav-logo">
<img src="assets/logo.png">
</div>
<div class="nav-links" id="nav-links">
<i class="fa fa-close" onclick="closeMenu()"></i>
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>RECIPE</li></a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</div>
<div class="banner-title">
<h1>맛있는 음식<br><span>쉽고 간단하게<br></span>만들어요</h1>
<button type="button" class="btn">둘러보기</button>
</div>
<div class="vertical-bar">
<div class="search-icon">
<i class="fa fa-list"></i>
<i class="fa fa-search"></i>
</div>
<div class="social-icon">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
</div>
</div>
</div>
<script>
var show = document.getElementById("nav-links")
function showMenu()
{
show.style.right = "0"
}
function closeMenu()
{
show.style.right = "-200px"
}
</script>
</body>
</html>CSS
*
{
margin: 0;
padding: 0;
}
.background
{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.6)),url(assets/main.jpg);
background-position: center;
background-size: cover;
overflow-x:hidden;
position: relative;
}
.nav-bar
{
display: flex;
padding: 10px 100px;
}
.nav-logo img
{
width: 100px;
}
.nav-links{
flex: 1;
}
.nav-links ul
{
margin-left: 50px;
display: inline;
}
.nav-links ul li
{
list-style: none;
display: inline-block;
padding: 40px 25px;
}
.nav-links ul a
{
text-decoration: none;
color: white;
}
.nav-links ul li::after
{
content: '';
width: 0;
height: 2px;
background: yellow;
display: block;
margin:auto;
transition: .5s;
}
.nav-links ul li:hover::after
{
width: 100%;
}
.btn
{
padding: 5px 15px;
border: 0;
background: yellow;
cursor: pointer;
font-weight: bold;
}
.nav-links .btn
{
float: right;
margin-top: 40px;
}
.banner-title
{
margin: 50px 200px;
}
.banner-title h1
{
font-size: 50px;
color: white;
margin-bottom: 50px;
}
.banner-title span
{
color:yellow;
}
.vertical-bar
{
height: 100%;
width: 80px;
background: black;
top:0;
left:0;
position: absolute;
}
.search-icon
{
height: 60%;
width: 80px;
}
.search-icon .fa
{
margin: 45px 24px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.social-icon
{
height: 35%;
width: 80px;
background: yellow;
text-align: center;
padding-top: 30%;
bottom:0;
position: absolute;
}
.social-icon .fa
{
margin: 15px 23px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 50%;
cursor: pointer;
}
.background .fa-bars
{
display: none;
}
.nav-bar .fa
{
display: none;
}
@media screen and (max-width: 770px)
{
.vertical-bar
{
display: none;
}
.banner-title
{
margin: 80px 40px;
}
.banner-title h1
{
font-size: 30px;
}
.nav-bar
{
padding: 10px 30px;
}
.fa-bars
{
position: absolute;
right: 20px;
top: 50px;
color: white;
}
.nav-bar .fa
{
display: block;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
color: white;
float: right;
}
.nav-links
{
height: 100vh;
width: 200px;
background: black;
top: 0;
right: -200px;
position: absolute;
text-align: left;
z-index: 2;
transition: .5s;
}
.nav-links ul a
{
display: block;
}
.nav-links .btn
{
float: none;
margin-top: 200px;
margin-left: 25px;
}
}'페이지 만들기' 카테고리의 다른 글
| 회원가입 페이지 연습 (0) | 2020.09.01 |
|---|---|
| 카드 뒤집기 연습 (0) | 2020.08.31 |
| 비전공자 - 웹페이지 만들기(ft 토트넘 프로필) (0) | 2020.08.29 |
| 비전공자 - 영화페이지 만들기 (ft 영화 Begin Aagin) (0) | 2020.08.28 |
