0
  • 로그인

  • 장바구니에 상품이 없습니다.

home2 › 게시판 › HTML/CSS 게시판 › Portfolio 실습 3 : Admin Page 중 질문

Portfolio 실습 3 : Admin Page 중 질문

강의로 돌아가기
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 글쓴이
    글
  • 2024년 3월 30일 20:45 #118351

    박신욱
    참가자
    질문1.
검색 input을 focus 했을 때 해당 자리에서 먼저 양옆으로 커진 후 우측으로 이동합니다..
해당 자리에서 양옆으로 늘어나니까 좌측 sidebar 를 먼저 뚫은 후 바로 제가 원하는 자리로 스륵 이동해서 위치합니다
왜 이런걸까요? 제자리에서 우측으로만 늘어나게는 못하는걸까요

질문2.
그리고 input 을 늘릴 때 width 에 px 말고 %를 주게 되면 해당 자리에서만 양옆으로 늘어나서 sidebar 를 뚫은 후에
질문1의 경우처럼 움직이지 않는 이유가 무엇인가요?

부탁드립니다!! 전체 코드 첨부하겠습니다 ㅠ





html 코드


    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/hw3.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="main-background">
      <div class="main-sidebar">
        <div class="main-sidebar-item">
          <i class="fas fa-home"></i>
        </div>
        <div class="main-sidebar-item">
          <i class="fas fa-headphones"></i>
        </div>
        <div class="main-sidebar-item">
          <i class="fas fa-flag"></i>
        </div>
        <div class="main-sidebar-item">
          <i class="fas fa-spinner"></i>
        </div>
      </div>
          <div class="main-content">
        <div class="main-content-header">
          <div class="main-content-header-left">
            <input
              type="search"
              class="search-input input-animation"
              placeholder="Search"
            />
            <button class="search-button">
              <i class="fas fa-search"></i>
            </button>
          </div>
              <div></div>
              <div class="main-content-header-rigth">
            <i class="fas fa-envelope"></i>
            <i class="fas fa-bell"></i>
            <h5>ShinWook Park</h5>
          </div>
        </div>
            <h1 class="title">Dashboard</h1>
        <div class="main-content-dashBoard">
          <div class="main-content-dashBoard-item">
            <div>
              <p>Earnings (Monthly)</p>
              <p>$400,000</p>
            </div>
            <i class="far fa-calendar"></i>
          </div>
              <div class="main-content-dashBoard-item">
            <div>
              <p>Earnings (Annual)</p>
              <p>$800,000</p>
            </div>
            <i class="fas fa-dollar-sign"></i>
          </div>
              <div class="main-content-dashBoard-item">
            <div>
              <p>Tasks</p>
              <p>13</p>
            </div>
            <i class="fas fa-list"></i>
          </div>
              <div class="main-content-dashBoard-item">
            <div>
              <p>Requests</p>
              <p>26</p>
            </div>
            <i class="fas fa-comment"></i>
          </div>
        </div>
            <div class="main-content-chart">
          <div class="main-content-chart-overview">
            <div><p>Earnings Overview</p></div>
            <canvas id="myChart"></canvas>
          </div>
              <div class="main-content-chart-items">
            <div class="main-content-chart-item">
              <span>Tasks</span>
            </div>
                <div class="main-content-chart-item">
              <span>Borrowed Items</span>
              <span>14</span>
            </div>
                <div class="main-content-chart-item">
              <span>Trello Requests</span>
              <span>2</span>
            </div>
                <div class="main-content-chart-item">
              <span>Marked Comments</span>
              <span>14</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: "rgba(255, 99, 132, 0.2)",
              borderColor: "rgba(255, 99, 132, 1)",
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    </script>
  </body>
</html>
    
css 코드


    div,
input,
textarea {
  box-sizing: border-box;
}
    body {
  margin: 0px;
}
    $borderColor: 1px solid rgba(128, 128, 128, 0.47);
    .main-background {
  display: grid;
  grid-template-columns: 5vw 95vw;
  grid-template-rows: 1fr;
  // height: 150vh;
  height: auto;
  width: auto;
  background: rgb(225, 225, 225);
}
    .main-sidebar {
  background: rgb(14, 14, 146);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 6fr;
}
    .main-sidebar-item i {
  color: white;
  font-size: 1.5vw;
  display: grid;
  place-items: center;
  height: 100%;
}
    .main-content-header {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  background: white;
  padding: 0.5%;
}
    .main-content-header-left {
  display: grid;
  place-items: center;
  grid-template-columns: 9fr 1fr;
  width: 100%;
  height: 100%;
  margin-left: 5%;
}
    .main-content-header-left input {
  height: 100%;
  width: 100%;
  border-radius: 5px 0 0 5px;
  border: $borderColor;
}
.main-content-header-left button {
  height: 100%;
  width: 150%;
  border-radius: 0 5px 5px 0;
  border: $borderColor;
  background-color: rgb(97, 97, 97);
  color: white;
}
    .main-content-header-left input:focus {
  margin-left: 5%;
  transition: all 1s;
  width: 450px;
  transform-origin: left;
}
    .main-content-header-rigth {
  color: grey;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  place-items: center;
  height: 100%;
}
    .title {
  margin: 2% 0 1% 2%;
}
    .main-content-dashBoard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
    @mixin dashboardItem($dashboardItemColor) {
  border-left: 5px solid $dashboardItemColor;
  background: white;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin: 5%;
}
    .main-content-dashBoard-item:nth-child(1) {
  @include dashboardItem(yellow);
}
    .main-content-dashBoard-item:nth-child(2) {
  @include dashboardItem(green);
}
    .main-content-dashBoard-item:nth-child(3) {
  @include dashboardItem(purple);
}
    .main-content-dashBoard-item:nth-child(4) {
  @include dashboardItem(brown);
}
    .main-content-dashBoard-item p {
  margin-left: 10%;
}
    .main-content-dashBoard-item i {
  display: grid;
  place-items: center;
  font-size: 2vw;
}
    .main-content-chart {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2.5%;
}
    .main-content-chart-overview {
  background-color: white;
  border-radius: 5px;
  margin-left: 2%;
  border: $borderColor;
  display: grid;
  grid-template-rows: 1fr 9fr;
}
    .main-content-chart-overview div {
  border-bottom: $borderColor;
  background: rgb(212, 212, 212);
  font-weight: 600;
}
    .main-content-chart-overview p {
  margin-left: 2%;
}
    .main-content-chart-items {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  background: white;
  margin-right: 4%;
  border-radius: 5px;
  height: 50%;
  border: $borderColor;
}
    .main-content-chart-item:nth-child(1) {
  background: rgb(212, 212, 212);
  font-weight: 600;
}
    .main-content-chart-item {
  display: grid;
  grid-template-columns: 3fr 1fr;
  place-items: center;
  border-bottom: $borderColor;
}
    .main-content-chart-item span:nth-child(1) {
  margin: 0 auto 0 5%;
}
    .main-content-chart-item span:nth-child(2) {
  margin: 0 20% 0 auto;
  background: rgb(22, 109, 231);
  width: 25%;
  height: 50%;
  border-radius: 10px;
  text-align: center;
  color: white;
}
     
    2024년 3월 30일 21:18 #118354

    codingapple
    키 마스터
    width에 100%주면 이미 꽉차있는상태라서 거기서 더 키우면 옆 영역을 침범할 수 밖에 없을듯요
    2024년 3월 30일 23:09 #118364

    박신욱
    참가자
    오메 감사합니다 !!!!
    2024년 3월 31일 00:46 #118367

    박신욱
    참가자
    선생님... 정말 죄송하지만 혹시 답안을 받을수도 있을까요
한참 만지작 댔는데 도저히 원래 하려던대로 되질 않습니다

main-content-header-left:hover 기능으로 비슷하게 보이게는 해보았습니다..
정반대이긴 하지만 margin-left:auto 로도 비슷하게 보이게 해봤습니다..


추가 질문도 있습니다!
1)
margin-right:auto 로 input과 button을 쭉 밀어주는데 좌에 딱 붙게가 안됍니다..
간격이 무조건 생깁니다 (input,button 사이도, sidebar,input 사이도)
왜 그런지 궁금합니다!

margin-left:auto 는 간격없이,겹침없이 착 잘 붙습니다

2)
1번의 margin-right:auto 를 준 상태를 유지한 후 width 를 px로 늘리면 button을 같이 밀어내주는데,
%로 늘리면 button 에 영향을 주지 않고 겹쳐져서 늘어나는건 왜 그런걸까요??


ㅠ 부탁드림다

보기 좋으시게 css 정리 좀 해뒀습니다


    .main-content-header-left {
  display: grid;
  place-items: center;
  grid-template-columns: 8fr 2fr;
  width: 100%;
  height: 100%;
  margin-left: 5%;
      input {
    height: 100%;
    width: 70%;
    border-radius: 5px 0 0 5px;
    border: $borderColor;
  }
      input:focus {
    transition: all 1s;
    width: 100%;
  }
      button {
    height: 100%;
    width: 100%;
    border-radius: 0 5px 5px 0;
    border: $borderColor;
    background-color: rgb(97, 97, 97);
    color: white;
  }
}


또 혹시 몰라 css 전체 코드도 첨부합니다..!


    div,
input,
textarea {
  box-sizing: border-box;
}
    body {
  margin: 0px;
}
    $borderColor: 1px solid rgba(128, 128, 128, 0.47);
    .main-background {
  display: grid;
  grid-template-columns: 5vw 95vw;
  grid-template-rows: 1fr;
  // height: 150vh;
  height: auto;
  width: auto;
  background: rgb(225, 225, 225);
}
    .main-sidebar {
  background: rgb(14, 14, 146);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 8fr;
  padding-top: 25%;
  width: 100%;
  // transform: translateX(-50%);
      color: white;
  font-size: 1.5vw;
  place-items: center;
  text-align: center;
  height: 100%;
  transition: all 1s;
  z-index: 5;
      span {
    opacity: 0;
    color: white;
    font-size: 0.1px;
    transition: all 1s;
  }
}
    .main-sidebar:hover {
  width: 200%;
  z-index: 5;
      div {
    padding-left: 7%;
    margin-right: auto;
  }
  span {
    opacity: 1;
    font-size: 1.5vw;
  }
}
    .main-content-header {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  background: white;
  padding: 0.5%;
}
    .main-content-header-left {
  display: grid;
  place-items: center;
  grid-template-columns: 8fr 2fr;
  width: 100%;
  height: 100%;
  margin-left: 5%;
      input {
    height: 100%;
    width: 70%;
    border-radius: 5px 0 0 5px;
    border: $borderColor;
  }
      input:focus {
    transition: all 1s;
    width: 100%;
  }
      button {
    height: 100%;
    width: 100%;
    border-radius: 0 5px 5px 0;
    border: $borderColor;
    background-color: rgb(97, 97, 97);
    color: white;
  }
}
    .main-content-header-rigth {
  color: grey;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  place-items: center;
  height: 100%;
}
    .title {
  margin: 2% 0 1% 2%;
}
    .main-content-dashBoard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
    @mixin dashboardItem($dashboardItemColor) {
  border-left: 5px solid $dashboardItemColor;
  background: white;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin: 5%;
}
    .main-content-dashBoard-item:nth-child(1) {
  @include dashboardItem(yellow);
}
    .main-content-dashBoard-item:nth-child(2) {
  @include dashboardItem(green);
}
    .main-content-dashBoard-item:nth-child(3) {
  @include dashboardItem(purple);
}
    .main-content-dashBoard-item:nth-child(4) {
  @include dashboardItem(brown);
}
    .main-content-dashBoard-item {
  p {
    margin-left: 10%;
  }
  p:nth-child(2) {
    font-weight: 600;
  }
  i {
    display: grid;
    place-items: center;
    font-size: 2vw;
  }
}
    .main-content-chart {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2.5%;
}
    .main-content-chart-overview {
  background-color: white;
  border-radius: 5px;
  margin-left: 2%;
  border: $borderColor;
  display: grid;
  grid-template-rows: 1fr 9fr;
      div {
    border-bottom: $borderColor;
    background: rgb(212, 212, 212);
    font-weight: 600;
  }
      p {
    margin-left: 2%;
  }
}
    .main-content-chart-items {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  background: white;
  margin-right: 4%;
  border-radius: 5px;
  height: 50%;
  border: $borderColor;
}
    .main-content-chart-item:nth-child(1) {
  background: rgb(212, 212, 212);
  font-weight: 600;
}
    .main-content-chart-item {
  display: grid;
  grid-template-columns: 3fr 1fr;
  place-items: center;
  border-bottom: $borderColor;
}
    .main-content-chart-item span:nth-child(1) {
  margin: 0 auto 0 5%;
}
    .main-content-chart-item span:nth-child(2) {
  margin: 0 20% 0 auto;
  background: rgb(22, 109, 231);
  width: 25%;
  height: 50%;
  border-radius: 10px;
  text-align: center;
  color: white;
}
    @media screen and (max-width: 768px) {
  .main-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3% 3% 3% 3%;
    padding-top: 15%;
  }
  .main-content-dashBoard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
      .main-content-dashBoard-item {
    margin: 1% !important;
    i {
      font-size: 250%;
    }
  }
      .main-content-chart {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
      .main-content-header {
    display: grid;
    grid-template-columns: 4fr 2fr 4fr;
  }
}
     
    2024년 3월 31일 15:55 #118397

    codingapple
    키 마스터
    답은 그 다음강의에 있습니다 
1은 padding margin같은게 어딘가에 있는게 아닐까요 개발자도구 켜서 확인해봅시다
2는 display grid나 flex 빼고 한번 해봅시다
    2024년 3월 31일 23:13 #118434

    박신욱
    참가자
    감사합니다!!
  • 글쓴이
    글
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠