20230824(목)_ 최종프로젝트 진행

금일 달성 항목

1)  jobposting, subpage, 수정,추가 팝업, footer css 추가

2) S3 front 이미지 등록 기능 구현 중

---

문제 해결 과정 1 - row, col 구역 분할

[문제]

한 행에 두가지의 요소가 모두 들어가야하는 상황이었는데 자꾸만 어긋나서 원하는 형태가 잘 나오지 않는 이슈가 있었습니다.

 

[시도 및 해결]

부트스트랩의 col 의 최대 넓이는 12 이므로 해당 넓이에 맞게 화면을 분할해서 표현해주었습니다.

이와 같은 방식으로 다른 여러 페이지들을 제작하였습니다.

 <!-- 회사 정보 영역 -->
    <div class="container text-center">
      <div class="row">
        <div class="col-2">
          <p class="text-start fs-5 fw-semibold" style="margin-top: 20px">
            회사 정보
          </p>
        </div>

        <div class="col-8">
          <div class="row">
            <div class="col-8" id="resumeBox">
              <p
                class="fs-2 fw-semibold text-start information"
                style="margin: 10px"
              >
                스파르타 주식회사
              </p>
              <p class="text-start">
                2023 브랜드 대상 코딩교육 부문 1위! 코딩 왕초보를 위한 코딩 강의
              </p>
            </div>
          </div>
          <!-- 웹사이트 -->
          <div class="row">
            <div class="col-2">
              <p class="text-start text-body-secondary">웹사이트</p>
            </div>
            <div class="col-8">
              <p class="text-start">https://www.amazon.com/</p>
            </div>
          </div>
          <!-- 웹사이트 -->

          <!-- 업계 -->
          <div class="row">
            <div class="col-2">
              <p class="text-start text-body-secondary">업계</p>
            </div>
            <div class="col-8">
              <p class="text-start">IT</p>
            </div>
          </div>
          <!-- 업계 -->

          <!-- 직원수 -->
          <div class="row">
            <div class="col-2">
              <p class="text-start text-body-secondary">직원 수</p>
            </div>
            <div class="col-8">
              <p class="text-start">829,381</p>
            </div>
          </div>
          <!-- 직원수 -->
          <!-- 본사 주소 -->
          <div class="row">
            <div class="col-2">
              <p class="text-start text-body-secondary">본사 주소</p>
            </div>
            <div class="col-8">
              <p class="text-start">경기도 성남시 분당고 불정로</p>
            </div>
          </div>
          <!-- 지도 카카오 API 영역 -->
          <div class="row">
            <img
              src="https://velog.velcdn.com/images/ljs7463/post/744d448c-ba31-4263-8c6b-b4001d1e1a84/image.png"
              class="img-fluid rounded-3"
              style="width: 800px"
              alt="..."
            />
          </div>
        </div>
        <div class="col-2">
          <!-- 수정 모달 -->
          <button
            type="button"
            class="btn btn-primary fa-solid fa-pen"
            data-bs-toggle="modal"
            data-bs-target="#company"
            style="margin-top: 20px"
          >
            수정
          </button>
          <%- include('includes/company') %>
          <!-- 수정 모달 -->
        </div>
      </div>
      <hr />
    </div>

 

[알게된 점]

CSS를 제대로 해보기는 처음인데 큰 틀을 잡고 해야한다는 것을 깨달았습니다.