본문 바로가기
말하는나무 PR. Mahannamu/맞춤제작 견적서 Customization Quote Request

전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2

by Mr.코딩 2023. 7. 28.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구획과 포지션 연습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="total">
      <div class="content">
        <div class="request">
          <header class="header">
            <div class="header1">
              <img src="malhannamu.png" alt="말하는나무 아이콘" />
            </div>

            <div class="header2">
              <label for="type-select"></label>
              <select class="type-select" name="type-select" id="type-select">
                <option value="option" selected>종류 선택</option>
                <option value="table">테이블,탁자</option>
                <option value="desk">책상</option>
                <option value="shelf-Bookcase">책장,책꽂이</option>
                <option value="chest-Drawers">수납장,서랍장</option>
                <option value="chair-bench">의자,벤치</option>
                <option value="bed">침대</option>
                <option value="for-camping">캠핑용</option>
                <option value="etc">기타</option>
              </select>
            </div>

            <div class="header3">
              <button class="style-choice">스타일 선택</button>
            </div>

            <div class="header4">
              <div class="docu-name">맞춤제작 견적의뢰서</div>
            </div>
          </header>

          <main class="main">
            <div class="main1">메인1</div>
            <div class="main2">메인2</div>
            <div class="main3">메인3</div>
            <div class="main4">메인4</div>
            <div class="main5">메인5</div>
          </main>
          <article class="article">
            <section class="design">디자인</section>
            <nav class="detail-list">디자인 상세</nav>
          </article>
          <botton class="button">버튼들</botton>
        </div>
        <footer class="footer">
          <div class="footer1">푸터1</div>
          <div class="footer2">푸터2</div>
          <div class="footer3">푸터3</div>
        </footer>
      </div>
      <aside class="ad">
        <div class="ad1">광고1</div>
        <div class="ad2">광고2</div>
        <div class="ad3">광고3</div>
        <div class="ad4">광고4</div>
        <div class="ad5">광고5</div>
      </aside>
    </div>
  </body>
</html>

 

chatGTP

평가를 드리자면 주어진 HTML 코드의 구조는 잘 짜여진 것으로 보입니다. 각 요소들이 적절한 계층 구조 안에 있고, 클래스를 사용하여 각각의 역할과 스타일을 잘 분리하고 있습니다. 이렇게 구조적으로 잘 정리된 코드는 가독성과 유지 보수성을 향상시키며, 웹 페이지를 개발하거나 유지 관리하는 데 도움이 될 것입니다.

body {
  background-color: rgb(221, 230, 221);
}
.total {
  display: flex;
}

.content {
  display: grid;
  width: 75vw; /* 주요 컨텐트 사이즈를 뷰포트의 75%로 줄임 */
}

.request {
  border: 1px solid gray;
}

header {
  display: flex;
}
.header1 {
  border: 1px solid gray;
}

.header2 {
  border: 1px solid gray;
}

.header3 {
  border: 1px solid gray;
}

.header4 {
  border: 1px solid gray;
}

main {
  /*.main 으로 적어도 됨 */
  /*이렇게 그리드를 선언하는 것만으로는 적용이 안  된다*/
  display: grid;
  /*grid-template-columns: repeat(5, 1fr);
  이렇게 가상 세로 몇 칸인지 혹은 세로 몇 칸인지 선언해야 grid가 적용된다 */
  /* 한데, 나는 비율까지 적용하려고 한다. 이렇게 */
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr;

  background-color: rgb(220, 228, 191);
}

.main1 {
  border: 1px solid gray;
}

.main2 {
  border: 1px solid gray;
}

.main3 {
  border: 1px solid gray;
}

.main4 {
  border: 1px solid gray;
}

.main5 {
  border: 1px solid gray;
}

article {
  display: grid;
  grid-template-columns: 7.5fr 2.5fr;
}

.design {
  border: 1px solid gray;
}

.detail-list {
  border: 1px solid gray;
}

 

컨테이너 안에 컨텐츠를 중앙으로 (예쁘게) 배치하려면,

일단 컨테이너(부모)에 flexbox를 선언해야 하고, (빨간 표시)

align-item과 justify-content 속성으로 "가운데"에 위치시키도록 한다.

 

그리고 해당 이미지의 최대 크기를 조절해줄 필요가 있는데, 안 그러면 원래 사이즈가 반영되어 버린다. (파란 표시)

그리고,

object-fit: contain; 속성값을 부여한다.

[flexbox] 

object-fit: 속성에 대해 간단히 쉽게 설명해 줘.

 

Bard

네, `object-fit` 속성은 이미지나 비디오의 크기와 위치를 조정하는 데 사용됩니다. `object-fit` 속성은 다음과 같은 값을 사용할 수 있습니다.

* `contain`: 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 초과하지 않도록 조정합니다.
* `cover`: 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 채우도록 조정합니다. 이미지나 비디오의 비율이 부모 요소의 비율과 일치하지 않으면 이미지나 비디오가 잘립니다.
* `fill`: 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 채우도록 조정합니다. 이미지나 비디오의 비율이 부모 요소의 비율과 일치하지 않으면 이미지나 비디오가 늘어납니다.
* `none`: 이미지나 비디오의 크기와 위치를 변경하지 않습니다.

예를 들어, `object-fit: contain;` 속성을 사용하면 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 초과하지 않도록 조정됩니다. `object-fit: cover;` 속성을 사용하면 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 채우도록 조정됩니다. 이미지나 비디오의 비율이 부모 요소의 비율과 일치하지 않으면 이미지나 비디오가 잘립니다. `object-fit: fill;` 속성을 사용하면 이미지나 비디오의 가로와 세로 너비가 부모 요소의 너비와 높이를 채우도록 조정됩니다. 이미지나 비디오의 비율이 부모 요소의 비율과 일치하지 않으면 이미지나 비디오가 늘어납니다. `object-fit: none;` 속성을 사용하면 이미지나 비디오의 크기와 위치를 변경하지 않습니다.

 

아이템 사이에 가로 방향으로 비율적인 간격을 주려면?

 

.클래스이름 > * + * {

    marigin-left: 숫자%;

}

 

이렇게 작성한다.

 

header2의 type-select 텍스트를 중앙에 배치하려면?

 

.header2 .type-select {
  text-align: center;
}

이런 식으로 선택자 및 text-align 속성을 이용한다.

 


.header2 .type-select 이렇게 띄어쓰기를 통해 "~의 하위에 있는"을 의미할 수 있나? [선택자]

 

Bard

네, 띄어쓰기를 통해 "~의 하위에 있는"을 의미할 수 있습니다. 이러한 선택자를 "하위 선택자"라고 합니다.

예를 들어, `.header2 .type-select` 선택자는 `.header2` 요소의 하위 요소 중 `.type-select` 요소를 선택합니다.

하위 선택자를 사용하면 특정 요소의 하위 요소만 선택할 수 있습니다. 이는 CSS를 사용하여 웹 페이지의 디자인을 보다 세밀하게 제어할 수 있습니다.

 

23-07-28. 갈무리.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구획과 포지션 연습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="total">
      <div class="content">
        <div class="request">
          <header class="header">
            <div class="header1">
              <img src="malhannamu.png" alt="말하는나무 아이콘" />
            </div>

            <div class="header2">
              <label for="type-select"></label>
              <select class="type-select" name="type-select" id="type-select">
                <option value="option" selected>종류 선택</option>
                <option value="table">테이블,탁자</option>
                <option value="desk">책상</option>
                <option value="shelf-Bookcase">책장,책꽂이</option>
                <option value="chest-Drawers">수납장,서랍장</option>
                <option value="chair-bench">의자,벤치</option>
                <option value="bed">침대</option>
                <option value="for-camping">캠핑용</option>
                <option value="etc">기타</option>
              </select>
            </div>

            <div class="header3">
              <button class="style-choice">스타일 선택 클릭</button>
            </div>

            <div class="header4">
              <div class="docu-name">맞춤제작 견적의뢰서</div>
              </div>
            </div>
          </header>

          <main class="main">
            <div class="main1">메인1</div>
            <div class="main2">메인2</div>
            <div class="main3">메인3</div>
            <div class="main4">메인4</div>
            <div class="main5">메인5</div>
          </main>
          <article class="article">
            <section class="design">디자인</section>
            <nav class="detail-list">디자인 상세</nav>
          </article>
          <botton class="button">버튼들</botton>
        </div>
        <footer class="footer">
          <div class="footer1">푸터1</div>
          <div class="footer2">푸터2</div>
          <div class="footer3">푸터3</div>
        </footer>
      </div>
      <aside class="ad">
        <div class="ad1">광고1</div>
        <div class="ad2">광고2</div>
        <div class="ad3">광고3</div>
        <div class="ad4">광고4</div>
        <div class="ad5">광고5</div>
      </aside>
    </div>
  </body>
</html>
body {
  background-color: rgb(221, 230, 221);
}
.total {
  display: flex;
}

.content {
  display: grid;
  width: 75vw; /* 주요 컨텐트 사이즈를 뷰포트의 75%로 줄임 */
}

.request {
  border: 1px solid gray;
}

header {
  display: flex;
  height: 10vh;
  font-size: 1.8vw;
}

.header > * + * {
  margin-left: 2%;
}

.header1 {
  border: 1px solid gray;
  height: 100%;
  flex-grow: 0.15;
  display: flex; /* .header1 컨테이너를 flex 컨테이너로 설정합니다. */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
}

.header1 img {
  max-height: 100%; /* 이미지의 최대 높이를 .header1 컨테이너의 높이와 같게 설정합니다. */
  max-width: 100%; /* 이미지의 최대 너비를 .header1 컨테이너의 너비와 같게 설정합니다. */
  object-fit: contain; /* 이미지를 가운데로 위치하면서 가로세로 비율을 유지합니다. */
}

.header2 {
  border: 1px solid gray;
  flex-grow: 1.2;
  display: flex; /* .header1 컨테이너를 flex 컨테이너로 설정합니다. */
}

.header2 .type-select {
  text-align: center;
}

.type-select {
  font-size: 1.5vw;
}
.header3 {
  border: 1px solid gray;
  flex-grow: 2.1;
}

.header4 {
  border: 1px solid gray;
  flex-grow: 2;
  display: flex; /* .header4 컨테이너를 flex 컨테이너로 설정합니다. */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
}

.type-select,
.style-choice {
  width: 100%;
  height: 100%;
}

.style-choice {
  font-size: 1.5vw; /* 원하는 비율에 맞는 폰트 사이즈를 설정하세요. */
}

main {
  /*.main 으로 적어도 됨 */
  /*이렇게 그리드를 선언하는 것만으로는 적용이 안  된다*/
  display: grid;
  /*grid-template-columns: repeat(5, 1fr);
  이렇게 가상 세로 몇 칸인지 혹은 세로 몇 칸인지 선언해야 grid가 적용된다 */
  /* 한데, 나는 비율까지 적용하려고 한다. 이렇게 */
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr;

  background-color: rgb(220, 228, 191);
}

.main1 {
  border: 1px solid gray;
}

.main2 {
  border: 1px solid gray;
}

.main3 {
  border: 1px solid gray;
}

.main4 {
  border: 1px solid gray;
}

.main5 {
  border: 1px solid gray;
}

article {
  display: grid;
  grid-template-columns: 7.5fr 2.5fr;
}

.design {
  border: 1px solid gray;
}

.detail-list {
  border: 1px solid gray;
}

다시 시도 중 : 결과 아직 좋지 않음.

더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom-Quote-Request-Form</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="base">
      <div class="subject">
        <div class="require">
          <header id="headerContainer"></header>
        </div>
        <footer class="footer">푸터</footer>
      </div>
      <aside class="ad">광고</aside>
    </div>
    <script>
      // Fetch API를 사용하여 header.html 파일 가져오기
      fetch('header.html')
        .then((response) => response.text()) // 가져온 파일을 텍스트로 변환
        .then((html) => {
          // 변환된 텍스트를 header 요소에 삽입
          const headerContainer = document.getElementById('headerContainer');
          headerContainer.innerHTML = html;
        })
        .catch((error) => {
          console.error('Error fetching header.html:', error);
        });
    </script>
  </body>
</html>

--------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Header</title>
  </head>
  <body>
    <header>
      <div class="logo-area">
        <img src="malhannamu.png" alt="말하는나무 로고" /> </div>
        <select class="type-select" name="type-select" id="type-select">
          <!-- 선택 옵션들 ... -->
          <option value="option" selected>종류 선택</option>
          <option value="table">테이블,탁자</option>
          <option value="desk">책상</option>
          <option value="shelf-Bookcase">책장,책꽂이</option>
          <option value="chest-Drawers">수납장,서랍장</option>
          <option value="chair-bench">의자,벤치</option>
          <option value="bed">침대</option>
          <option value="for-camping">캠핑용</option>
          <option value="etc">기타</option>
        </select>

 

        <div class="stye-choice">
          <button class="style-choice">스타일 선택</button>
        </div>
        <div class="docu-name">
          맞춤제작 견적의뢰서</div>
         
      </div>
    </header>
  </body>
</html>
 
 ---------------
 
.base {
  display: flex;
}
.subject {
}
.require {
  width: 75vw;
  background-color: rgb(209, 209, 204);
}
header {
  display: flex;
  height: 9vh;
  justify-content: center;
  align-items: center;
}
.header > * + * {
  margin-left: 2%;
}
.logo-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

 

'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글

retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용  (0) 2023.07.29
의뢰서 단계별 갈무리 1  (0) 2023.07.28
4-2. 견적 의뢰서 제작 갈무리  (0) 2023.07.25
3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함.  (0) 2023.07.24
2. 로고 이미지를 삽입함  (0) 2023.07.24
1. 덩어리별로 구역을 나눔  (0) 2023.07.24
이 코드만으로 14개의 섹션(구역)이 생성된 거지?  (0) 2023.07.23
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.  (0) 2023.07.23

관련글

티스토리툴바