[축구모임 홈페이지개발] 12/26 개발일지 Nodejs css / 홈화면 경기결과 탭 배치 수정

어제 홈 화면에 경기결과를 나타내는 탭에 배치를 잘못 구성한 것 같아서 오늘 처음부터 다시 배치하고있다.

오늘은 접근방식을 완전히 바꾸어서

 

 

큰 구역마다 영역을 확실히 만들고 % 를 이용해서 애초에 영역을 고정시켜보고 그 안에서 사이즈를 변동해보기로 했다.

다음 색상과 같이 영역을 나누었고 여기서 이제 미세하게 조절해볼 계획이다.

 

.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"

              src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/Home/2.%20%EC%95%84%EA%B8%B0%EC%83%81%EC%96%B4.png?updatedAt=1703502072933"

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

  }

}

 

다음 코드도 추가해주었다.