Web 5일차 (선생님과 함께하는 Oven clone page)
2022. 12. 26. 09:54ㆍ코딩배움일지/Web 구현
태그만 써버리면 나중에 필요할때 못 줄 수 도 있다.
class 를 우선 주도록 한다.??
목록은 ul로 잡자
caret 을 font Awsome 에서 다운을 받았다. span을 안해도 적용이 된다.
<i class="fa-solid fa-caret-down"></i> i 는 이텔릭체
1 교시
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<header>
<div class=" container">
<nav class="navbar">
<div class="navbar-brand">
<div class="brand-text"><a href="/">
<span>Oven</span><span>BETA</span>
</a></div>
</div>
<ul class="nav">
<li>
<a href="#">
<img class="profile-image" src="/KakaoOven/images/profile.png">
<span class="name">양진구</span>
<i class="fa-solid fa-caret-down"></i>
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container">
</main>
<footer class="container">
</footer>
</body>
</html>
Css
*{
box-sizing: border-box;
font-size: 14px;
}
body{
margin: 0;
}
.container{
margin: 0px auto;
padding: 0px 15px;
width: 1170px;
}
.navbar{
display: flex;
justify-content: space-between; /* 중앙을 비운다.*/
align-items: center; /*가운데 정렬*/
width: 100%;
}'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 5일차 (CSS 고급 선택자) (0) | 2022.12.26 |
|---|---|
| Web 5일차 2(선생님과 함께하는 Oven clone page) (0) | 2022.12.26 |
| Web 클론 페이지 (선생님 과제 Kakao Oven) (0) | 2022.12.25 |
| Web 4일차 4(반응형 웹) (0) | 2022.12.23 |
| Web 4일차 3(background) (0) | 2022.12.23 |