Project/축구모임 홈페이지개발
[축구모임 홈페이지개발] 12/26 개발일지 Nodejs css / 홈화면 경기결과 탭 배치 수정
한33
2023. 12. 28. 23:48
어제 홈 화면에 경기결과를 나타내는 탭에 배치를 잘못 구성한 것 같아서 오늘 처음부터 다시 배치하고있다.
오늘은 접근방식을 완전히 바꾸어서
큰 구역마다 영역을 확실히 만들고 % 를 이용해서 애초에 영역을 고정시켜보고 그 안에서 사이즈를 변동해보기로 했다.
다음 색상과 같이 영역을 나누었고 여기서 이제 미세하게 조절해볼 계획이다.
.home-lastmatch-logo-area {
margin-left: 1%;
width: 13%;
}
.sharklogo {
width: 85%;
}
.home-lastmatch-info-area {
margin-left: 1%;
width: 52%;
}
.home-lastmatch-awayname {
font-size: 200%;
}
.home-lastmatch-date {
font-size: 120%;
}
.home-lastmatch-score-area {
width: 35%;
display: flex;
}
.home-lastmatch-score {
width: 60%;
font-size: 330%;
text-align: center;
}
.home-lastmatch-result-logo-area {
width: 40%;
text-align: center;
}
.home-lastmatch-result-logo {
width: 50%;
margin-top: 18%;
}
<div class="home-lastmatch-matcharea">
<div class="home-lastmatch-logo-area">
<img class="sharklogo"
alt="logo">
</div>
<div class="home-lastmatch-info-area">
<div class="home-lastmatch-awayname">
<%=result[0].awayname%>
</div>
<div class="home-lastmatch-date">
23.<%=result[0].month%>.<%=result[0].day%>
</div>
</div>
<div class="home-lastmatch-score-area">
<div class="home-lastmatch-score">
<%=result[0].homescore%>-<%=result[0].awayscore%>
</div>
<div class="home-lastmatch-result-logo-area">
<%-result[0].home_resultlogo%>
</div>
</div>
</div>
이렇게 영역을 크게 나누어서 감싸주고 그에 맞게 css 로 사이즈를 맞춰줄 때 반응형으로 % 를 이용해서 다 해주니까
잘 되었다.
폴드 유저를 위해서
@media only screen and (max-width: 400px) {
.home-lastmatch-score {
font-size: 140%;
}
}
다음 코드도 추가해주었다.