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;
}

 

 

반응형