Vue.js/Way Home
[11/9] 과제
Judith Hopps
2022. 11. 9. 14:46
반응형
A. 헤더
1. 로고 사진 반응형으로 width 수정
.image-wrapper{
width:50%;
}
.logo {
max-width: 100%;
height: auto;
}
2. 로그인 시 프로필 사진 표시 후 드롭다운 설정하기
<div class="dropdown dropstart ">
<img src="https://img.icons8.com/material-sharp/2x/user.png" data-bs-toggle="dropdown" class="profile" aria-expanded="false">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">My page</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">닉네임 수정</a></li>
<li><a class="dropdown-item" href="#">프로필 사진 수정</a></li>
<li><hr class="dropdown-divider"></li>
<li class="dropdown-item" @click="logout()">로그아웃</li>
</ul>
</div>
3. 헤더 화면 줄일 시 아이콘 밑으로 내려오는 것 수정
.headerDesign {
max-width: 100%;
margin: 0 auto;
max-height:100%;
}
B. 헤더& 푸터 상관관계
1. 헤더 디자인 - 푸터 디자인 위치 맞추기
class="d-flex align-items-lg-center me-4"
C. 푸터
1. 푸터 바닥으로 붙이기
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 4em;
}
반응형