728x90
종강 이후로 다시 하려고 codedamn 30 days of html css 챌린지를 들어갔더니 챌린지 Day16밖에 안보인다..뭔가 변해있다. 그래서 다시 재가입을 해도 Day16 밖에 없지만 그냥 하려고 한다.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Bar Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,0"
/>
</head>
<body>
<nav>
<!-- Write your code here -->
<div class="codedamnLogo">
<img src="logo.svg" alt="Codedamn logo" width="20" height="30" />
<a href="codedamn.com"><h2>Codedamn</h2></a>
</div>
<ul class="navBarMenu">
<li>
<a href="#">Learn</a>
<span class="material-symbols-outlined"> stat_minus_1 </span>
</li>
<li>
<a href="#">Practice</a>
<span class="material-symbols-outlined"> stat_minus_1 </span>
</li>
<li>
<a href="#">Company</a>
<span class="material-symbols-outlined"> stat_minus_1 </span>
</li>
<li><a href="#">Pricing</a></li>
</ul>
<ul class="navBarIcons">
<li><a href="#">Login</a></li>
<li><button>Get started</button></li>
</ul>
<!-- It is recommended that you copy paste the svg instead of importing it as a file in this html document -->
<!-- Copy/paste codedamn Logo from the designs/logo.svg file -->
</nav>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;600;&display=swap");
/* #18181b - NavBar Background Color */
/* #a1a1aa - Text Color */
/* Get Started Button Bg color - #5046e5 */
body {
font-family: "Inter", sans-serif;
}
nav {
display: flex;
background-color: #18181b;
}
h2 {
font-weight: 600;
font-family: "Inter", sans-serif;
color: white;
font-size: 20px;
}
a {
text-decoration: none;
color: #a1a1aa;
}
li {
list-style-type: none;
align-items: center;
}
.navBarMenu {
display: flex;
align-items: center;
color: #a1a1aa;
gap: 20px;
margin-right: 20px;
}
.material-symbols-outlined {
display: flex;
align-items: center;
}
.navBarMenu li {
display: flex;
align-items: center;
}
.codedamnLogo {
margin-left: 10px;
margin-right: auto;
display: flex;
align-items: center;
}
.navBarIcons {
display: flex;
align-items: center;
color: #a1a1aa;
gap: 10px;
margin-left: auto;
margin-right: 10px;
}
button {
background-color: #5045e5;
border-radius: 5px;
color: white;
border: 0;
padding: 4px 10px 0px;
align-items: center;
}
<어려웠던 점 및 해결>
- navBarIcons을 오른쪽으로 옮기고 싶었는다. 방법이 뭐가 있을까 구글링을 해보다가 margin-left를 이용해 해결하면 되는 것이었다. 아직 css에서 margin이나 padding 부분이 정리가 안된거 같은데 정리가 필요하다는 것을 느꼈다.
- 글자에 회색 컬러(#a1a1aa)를 지정하고 싶은데 color: #a1a1aa를 입력해도 적용이 안되는 것이었다. 그럴때는 a태그에 컬러를 적용해서 덮어 씌우는 방법을 해야한다. 왜 그렇게 덮어 씌어야 하냐면 브라우저의기본스타일이 링크에 대해 우선시 한다고 하기때문이다.
- 아래를 향하는 방향키 아이콘을 Learn, Practice, Company 옆에 위치하게 하고 싶었다. 아이콘을 글자 옆에 두면 아이콘보다 글자가 밑을 향해 있고 중앙 정렬이 안맞춰졌다. 그럴때의 해결 방법은 아이콘의 클래스에 dispalay:flex와 align-items:center를 추가해 아이콘과 텍스트를 중앙 정렬로 오도록 위치했다. 그리고 .navBarMenu li에 display:flex와 align:center를 추가해 리스트 항목 전체가 수직으로 중앙 정렬 되도록 하니까 문제가 해결되었다.
728x90
'30Days of HTML CSS' 카테고리의 다른 글
| [30 Days of HTML CSS] Day 08 | Grid Template Rows and Columns (0) | 2023.11.24 |
|---|---|
| [30 Days of HTML CSS] Day 07 | Codedamn CSS Text Shadow Lab (0) | 2023.11.23 |
| [30Days of HTML CSS] Day 06 | Text-Overflow Property Lab (0) | 2023.11.22 |
| [30Days of HTML CSS] Day 05 | Figure Tag Lab (0) | 2023.11.21 |
| [30Days of HTML CSS] Day 04 | Position Property Lab (0) | 2023.11.20 |