API 실습 질문

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2023년 6월 17일 20:53 #87364

참가자

1. 아래 카드 박스들을 한 화면에 다 보여지게 하려면 어떻게 해야하나요 ㅠㅠ
   flex박스 주고 width 잘 준것 같은데.....(아래 html과 css 남겨 드리겠습니다.)

2. 그리고 차트도 반응형처럼 하려면 어떻게 해야하나요?



<html>

<div class="main_container">
    <h2>Dashboard</h2>
    <div class="row">
        <div class="col">
            <div>
            <p>Earning(Monthly)</p>
            <p>$400,000</p>
            </div>
            <i class="fas fa-calendar"></i>
        </div>
            <div class="col">
            <div>
             <p>Earning(Annual)</p>
            <p>$800,000</p>
            </div>
            <i class="fas fa-dollar-sign"></i>
        </div>

        <div class="col">
            <div>
            <p>Tasks</p>
            <p>13</p>
            </div>
            <i class="fas fa-tasks"></i>
        </div>
        <div class="col">
            <div>
            <p>Requests</p>
            <p>26</p>
            </div>
            <i class="fas fa-comments"></i>
        </div>
    </div>
</div>
--------------------------------------------
<CSS>

.main_container {
    position: absolute;
    left: 70px;
    top: 100px;
    width: 100%;
}
.row {
    display: flex;
    
    justify-content: center;
    align-items: center;
}

.col {
    border: 0.5px solid black;
    border-radius: 5px;
    margin-left: 10px;
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px;
}
.col i {
    font-size: 30px;
    color: rgb(126, 126, 126);
    line-height: 300%;
    text-align: center;
    margin-right: 20px;
}

.col p {
    font-size: 18px;
    line-height: 10px;
    margin-left: 10px;
}
.chart_container {
    position: absolute;
    background-color: rgb(214, 214, 214);
    top: 300px;
    left: 70px;
    width: 60%;
    box-shadow: 1px 1px 5px rgb(170, 170, 170);
    border: 0px;
}
.chart_box {
    background-color: white;
    border: 0px;
}

2023년 6월 17일 21:08 #87365

codingapple

키 마스터

일단 main_container 박스는 position으로 공중에 띄우지맙시다 차트도요

2023년 6월 19일 17:07 #87593

김승혁

참가자

아예 position 속성을 사용하지 말라는 말씀이시죠?
그럼 position없이 데쉬보드를 사이드바와 안겹치겠끔 하려면 마진주는 방법밖에 없나요?...

2023년 6월 19일 19:10 #87608

codingapple

키 마스터

넴 쓸 이유없으면 쓰지맙시다 
파란빠는 position주고 main-container는 왼쪽마진 주면 될듯요

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

API 실습 질문

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png