styles.css 에서 이어서!
#login-form{ (#ID login-form
display:flex; (#we don't want things next to each other)
flex-direction: column; (#we want things under each other)
margin: 0px 30px; (top and bottom zero, rt/lt 30 px)
#login-form input { (#ID login-form, all the input)
border: none;
padding:15px 0px;
font-size: 18px;
border-bottom: 1px solid rgba(0,0,0,0.3);
margin-bottom: 25px;
transition: border-color 0.3s ease-in-out;
#login-form input::placeholder{ (#pseudo element를 사용할 때는 ::를 사용해야함)
color: rgba(0,0,0,0.4);
내비게이션 개발은 메뉴 목록을 나열하기 위해
목록태그요소 ul, li태그를 사용하고, a 태그요소로 하이퍼링크를 설정
<nav>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</nav>
nav>ul>li*4>a + enter
reset.css에서 하이퍼링크의 파란 글자, 밑줄 없애놓기
a {
color :inherit;
text-decoration: none;
}
nav 하단에 고정 / status-bar 상단 고정
.nav {
position :fixed;
bottom: 0;
width: 100%;
.status-bar {
display: flex;
justify-content: center;
padding: 5px 3px;
position: fixed;
width: 100%;}
* width 지정 꼭 해야함!
Border box
.nav__notification {
background-color: tomato;
display: block;
height: 20px;
width: 20px;
border-radius: 100px;
}
* If you want to make square to circle -> border-radius : 1/2 of width ( in this case 10px)
.nav__a {
color: #2F363E;
position: relative;
}
.nav__notification {
background-color: tomato;
display: block;
height: 20px;
width: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: 600;
position: absolute;
left: 15px;
bottom: 18px;
}
.dot {
height: 5px;
width: 5px;
left: 25px;
bottom: 27px;
}
*position: absolute를 지정할 때는 시작하는 class에 relative를 지정해줘야함
<header class="screen_header">
<h1 class="screen_header__title">Friends</h1>
<div class="screen_header__icons">
<span><i class="fa-solid fa-magnifying-glass fa-lg"></i></span>
<span><i class="fa-solid fa-music fa-lg"></i></span>
<span><i class="fa-solid fa-gear fa-lg"></i></span>
</div>
</header>
.screen_header {
display: flex;
justify-content: space-between;
padding: 40px 25px 25px 25px;
box-sizing: border-box;
align-items: center;}
.screen_header__title {
font-size: 32px;
font-weight: 700;
}
.screen_header__icons span {
margin-left: 25px;
}