Work Log - 4주차

Day 16 -  '클론코딩 ing'

• 클론코딩 ing
• MXDS  팀 교육

 
 

---

 
 
Review
 
 

 

 

 

 

 

 

 

 

• 클론코딩 ing

 

 

: 오늘은 헤더 영역에 HTML, CSS, jQuery까지 끝냈다. 완벽히는 아니지만 일부분은 끝냈다,,

addClass 해놓으신 부분에서 아직 모든 클래스를 파악하지 못해서 그것때문에 조금 더뎌지고 있다.

작업을 하다보니 transform이나 position 속성의 개념이 아직 부족하다는 것을 느꼈다.

 

그리고 li에 padding으로 영역을 정해주고 ul에서 margin으로 음수 값을 주어 다시 당겨준다는 것도 어제 처음 알게 되었다 ! 

margin-right 같은 것으로 일일이 영역을 지정해주다보면 이후에 유지보수를 하면서 li가 추가되면 일일이 CSS에서 li:last-child { margin-right: 0; } 이런 식으로 변경해줘야 하는 번거로운 일이 생긴다.

그러니 유동성을 위해서 padding으로 영역을 지정해주는 것도 아주 좋은 방법인 것 같당 -

 

 

.header #gnb .gnb .depth-list > ul {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: -1.75rem; 
  /* 밑에 li에서 padding 줘서 영역을 잡아주는데 상하좌우 다 들어가니까 영역이 뒤틀리니 
  동일한 영역을 margin으로 다시 당겨줌 */
}

.header #gnb .gnb .depth-list > ul > li {
  position: relative;
  padding: 1.75rem;
}

 

이런 식으로 !

 

 

사수님의 코딩 스타일을 따라해보면서 배우는 것이 많아서 좋다 !

 

파이팅 -

 

 

 

 

 

• MXDS  팀 교육

 

 

: MXDS(MX-Design System)는 디자이너와 퍼블리셔, 개발자, 기획자가 일관성 있고 시각적으로 균형잡인 사용자 인터페이스를 구현할 수 있도록 디자인 가이드 라인과 구성 요소를 공유하기 위해 설계된 프로젝트이다.

 

이 프로젝트의 핵심은 디자인 통일 및 작업 시간 단축이다. 작업자들 간에 소통을 원활하게 하기 위해서 시스템을 구축해놓는 것인데 잘 진행되고 있는 것 같다.

회의를 하면서 더 보완했으면 하는 것이나 개선해야 할 것들을 자유롭게 논의하고 사용법에 대해 배웠다.

아직은 이런 것도 있구나 이런 부분까지 세세하게 신경쓰고 계시는구나 감탄만 하고 있지만 이제 나도 서서히 배워가겠지,,? 너무 유익한 시간이었당 !

 

 

---

 

 

 

Day 17  -  '클론코딩 ing'

• 클론코딩 ing

 
 

---

 
 
Review
 

 

 

 

 

 

 
 
 

 

• 클론코딩 ing

 

 

: 오늘은 헤더와 섹션1 영역 끝냈다.

JS에서 질문 양이 방대한데 멘토님께서 정말 차근차근 잘 알려주셔서 98% 이해 완료했다,,

은혜를 어찌 갚아야 할지 흐읍

업무하느라 바쁘고 짜증내실 법도 한데 늘 친절하신 엔젤 멘토님을 만나서 느무 다행이다,,

 

swiper JS 작성할 때 클래스명을 ' . '부터 적어야 하는데 이걸 자꾸 빼먹어서 작동이 안된다 !!!! 콘솔 창에 오류도 안나니까 뭐가 문제인지 알 수가 있어야지 크흠... 여튼 이거 원인 찾는 데 엄청 시간을 오래 끌었다. 

콘솔에 안 뜨면 점 누락을 의심해보자 -

 

또 swiper pagination이나 시작, 중단 버튼 커스텀한 것을 처음 사용해보기 때문에 그 개념을 파악하는 것도 꽤 어려웠다. 

CSS에서도 모르는 속성들이 많아서 오늘은 레퍼런스 찾아보는 데도 시간이 많이 걸렸다. 

특히 svg 사용법?_?  모르는 게 많아서 주석을 일일이 달면서 공부했다.

 

또 햄버거 버튼을 눌렀을 때 X 아이콘으로 바뀌면서 사이트맵이 열리고, 거기서 ESC 버튼을 누르면 다시 햄버그 버튼으로 바뀌면서 사이트맵이 닫히는 것을 JS로 구현하는 법을 알게 되었다.

 

$(document).on('keyup', function (e) {
  const keycode = e.which;
  // console.log(keycode); 키보드 눌렀을 때 콘솔에 뜨나 실험용

  if (keycode == 27) {
    // keycode == 27은 ESC 버튼
    $('html').removeClass('active');
    $('#gnb').show();
    // $btn.removeClass('active'); 밑 코드랑 똑같은데, header에 input 박스나 다른 것들이 더 많을 경우 밑에 것처럼 구체적으로 명시해주는 것이 더 좋음
    $('.header .util-menu > a').removeClass('active'); //
    $header.removeClass('active active3');
  }
});

 

 

내일도 파이팅 !

 

 

 

 

 

 

 

---

 

 

 

Day 18  -  '클론코딩 ing'

• 클론코딩 ing

 
 

---

 
 
Review
 

 

 

 

 

 

• 클론코딩 ing

 

 

: 오늘은 섹션2, 섹션3, 섹션4, 섹션5까지 작업을 끝냈다.

하다보니 JS 해석 실력이 늘고 있는 것 같다. 오늘은 어제보다 질문을 많이 하지 않았다 !

 

 

 

<오늘의 깨달음>

 

 

1. Slider 이미지 영역 잡기

 

: Swiper 플러그인을 사용할 때 이미지 영역 잡는 것인데, 이미지에 height 값을 주면 반응형으로 줄어들 때 높이 값은 고정되고, 가로 값만 줄어들어서 이미지 비율이 깨지게 된다.

이럴 때는 img 태그를 감싸고 있는 div 태그에는 height: 0;을 주고 그 대신 padding-bottom을 주면 되고, 그 하위에 있는 img 태그에는 position: absolute;를 주면 된다.

 

#section02 .business-item-image {
  display: block;
  position: relative;
  overflow: hidden;
  padding-bottom: 74.6153%;
  /* 동일한 크기의 이미지를 쓸 때는 height 값을 고정하지 않고 padding-bottom을 퍼센트 값으로 줌. 
  대신 img 태그에 position: absolute;를 꼭 주어야 함 */
}

#section02 .business-item-image img {
  position: absolute; /* 필슈 */
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none; /* general.css에서 img 태그 max-width: 100%라고 되어 있어서 그거 없앤 거 */
  -o-object-fit: cover;
  object-fit: cover;
}

 

이런 식으로,, 주석 단 건 창피하지만 앞으로 슬라이드 작업을 할 때 이런 식으로 작업하면 될 것 같아서 기억하려고 주석으로 기록했다 !

 

 

 

 

2. Swiper pagination 커스텀

 

 

const bs = new Swiper('.business .swiper', {
      slidesPerView: 'auto',
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 7500,
        disableOnInteraction: false,
      },
      spaceBetween: 40,
      pagination: {
        el: '.business-slider-controller-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          return `<strong>0${current}</strong>` + '<i>｜</i>' + `<span>0${total}</span>`;
        },
      },
      navigation: {
        nextEl: '.business-slider-controller-next',
        prevEl: '.business-slider-controller-prev',
      },
      on: {
        slideChange: function (swiper) {
          const activeSlide = this.realIndex; // 현재 슬라이드 index 확인하는 것

          // console.log('now index :::', activeSlide);
          // 콘솔로 현재 슬라이드 index 확인

          $('.business-link').removeClass('active');
          $(`.business-link[data-slide=${activeSlide}]`).addClass('active');
        },
      },
    });

 

 

: pagination 부분에서 renderCustom 부분만 보면 된다.

음 페이지 부분을 내가 커스텀해서 만드는 것인데, 저렇게 현재 페이지, 전체 페이지를 내가 원하는 디자인으로 커스텀할 수 있는 것이다.

 

물론 HTML 구조를 짤 때, 저 부분은 따로 영역을 만들어줘야 하고, CSS도 그에 맞게 설정해주긴 해야한다.

 

 

<div class="business-slider">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="business-item">
          <div class="business-item-image">
            <img src="/clone/images/contents/insurance1.jpg" alt="" />
          </div>
          <div class="business-item-desc">
            <strong>전산망 운영</strong>
            <div>
              환경책임보험 전산망 수탁 및 운영 환경책임보험 미가입 및 부실가입
              사업장 관리
            </div>
          </div>
          <a href="#" class="business-item-more"> View<br />more </a>
        </div>
      </div>
    </div>
    <div class="business-slider-controller">
      <button type="button" class="business-slider-controller-prev">
        <i class="xi-long-arrow-left"></i>
      </button>
      <div class="business-slider-controller-pagination"></div>
      <button type="button" class="business-slider-controller-next">
        <i class="xi-long-arrow-right"></i>
      </button>
    </div>
  </div>
</div>

 

 

#section02 .business-slider-controller {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 4rem;
  line-height: 1;
  margin-top: -3rem;
  z-index: 1;
}
#section02 .business-slider-controller-pagination {
  display: flex;
  align-items: center;
  width: auto;
  font-size: 1.6rem;
  margin: 0 1.5rem;
}
#section02 .business-slider-controller-pagination strong {
  font-size: 2.3rem;
  font-weight: 700;
}
#section02 .business-slider-controller-pagination i {
  margin: 0 0.5rem;
  opacity: 0.5;
}
#section02 .business-slider-controller-pagination span {
  opacity: 0.5;
}
#section02 .business-slider-controller-prev i,
#section02 .business-slider-controller-next i {
  color: rgba(0, 0, 0, 0.4);
  font-size: 2.6rem;
  font-weight: 300;
}

 

 

하지만 Swiper 플러그인 자체에 있는 CSS가 있기 때문에 플러그인 없이 작업하는 것보다는 훨씬 간단하다.

이때까지 나는 플러그인 자체에 있는 pagination(?) 동그라미 모양 그것만 사용해봐서 커스텀 하는 방법은 처음 알았다.

 

여튼 이런 식으로 짜면 된다 !

 

 

 

그러면 위처럼 이전 화살표, 다음 화살표가 양 옆에 있고, 그 사이에 페이지 표시하는 부분이 나타나게 된다.

 

 

 

 

3. 말줄임 표시하기

 

display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical; /* 박스 안 내용을 수직으로 나열 */
-webkit-line-clamp: 4; /* 4줄 말줄임 표시 */

 

 

: 이건 알고 있는 것이긴 했지만, 정확히 무슨 의미인지는 모르고 썼다가 이번에 클론코딩을 하면서 제대로 알게 되었다.

게시판이나 공지사항 슬라이더 작업을 할 때 공식처럼 사용하면 될 듯하다 !

 

 

 

 

 

 

---

 

 

 

Day 19  -  '클론코딩 끝'

• 클론코딩 완성

 
 

---

 
 
Review
 

 

 

 

 

 
 
 

 

• 클론코딩 완성

 

 

: 오늘은 섹션6, 푸터 작업을 마쳤고, 메인 페이지를 완성했다 !

 

 

 

 

news 영역을 작업하는데 JS에서 막혀서 시간이 좀 오래 걸렸다.

멘토님께 질문을 했더니 너무 자세하게 잘 알려주셔서 해결되었다. 코드가 완벽하게 이해가 된 건 아니지만 원리는 이해한 것 같다. 

이러한 슬라이드를 작업할 땐 각각의 news-box마다 이전, 다음 버튼을 넣어줘야 하고, 그렇게 각각의 news-box를 하나씩 돌려가면서 각각의 swiper를 작동시키는 것이다.

 

 

<!-- section6 -->
<section class="section" id="section06">
  <div class="layout">
    <div class="section-title">
      <div class="section-title-topic">
        <span class="section-title-topic-sub">NEWS</span>
        <h2>새소식</h2>
      </div>
      <div class="section-title-other">
        <div class="section-title-tab">
          <ul class="news-btn">
            <li class="active"><a href="#" data-tab="news1">전체</a></li>
            <li><a href="#" data-tab="news2">공지사항</a></li>
            <li><a href="#" data-tab="news3">보도자료</a></li>
            <li><a href="#" data-tab="news4">자료실</a></li>
            <li><a href="#" data-tab="news5">채용소식</a></li>
          </ul>
        </div>
        <a href="#" class="section-title-more">View more</a>
      </div>
    </div>
    <div class="section-contents">
      <div class="news">
        <!-- 전체 -->
        <div class="news-box active" id="news1">
          <button type="button" class="news-slider-prev">
            <i class="xi-angle-left-thin"></i>
          </button>

          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">보도자료</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <button type="button" class="news-slider-next">
            <i class="xi-angle-right-thin"></i>
          </button>
        </div>

        <!-- 공지사항 -->
        <div class="news-box" id="news2">
          <button type="button" class="news-slider-prev">
            <i class="xi-angle-left-thin"></i>
          </button>

          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">공지사항</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2022년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <button type="button" class="news-slider-next">
            <i class="xi-angle-right-thin"></i>
          </button>
        </div>

        <!-- 보도자료 -->
        <div class="news-box" id="news3">
          <button type="button" class="news-slider-prev">
            <i class="xi-angle-left-thin"></i>
          </button>

          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">보도자료</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">보도자료</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">보도자료</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">보도자료</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <button type="button" class="news-slider-next">
            <i class="xi-angle-right-thin"></i>
          </button>
        </div>

        <!-- 자료실 -->
        <div class="news-box" id="news4">
          <button type="button" class="news-slider-prev">
            <i class="xi-angle-left-thin"></i>
          </button>

          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">자료실</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">자료실</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">자료실</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">자료실</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <button type="button" class="news-slider-next">
            <i class="xi-angle-right-thin"></i>
          </button>
        </div>

        <!-- 채용소식 -->
        <div class="news-box" id="news5">
          <button type="button" class="news-slider-prev">
            <i class="xi-angle-left-thin"></i>
          </button>

          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">채용소식</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">채용소식</span>
                    <span class="news-item-image">
                      <img src="/clone/images/main/sample2.jpg" alt="" />
                    </span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">채용소식</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#" class="news-item">
                  <div class="news-item-info">
                    <span class="news-item-label">채용소식</span>
                    <div class="news-item-text">
                      <strong class="news-item-text-title">2023년도 환경책임보험 인허가 담당자 워크샵</strong>
                      <p class="news-item-text-desc">
                        2023년도 환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다.
                        붙임파일 참고하셔서 작성 후 신청서 제출 부탁드립니다. 2023년도
                        환경책임보험 인허가 담당자 워크샵 계획안 및 신청양식입니다. 붙임파일
                        참고하셔서 작성 후 신청서 제출 부탁드립니다.
                      </p>
                      <span class="news-item-text-date">2023.08.02</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <button type="button" class="news-slider-next">
            <i class="xi-angle-right-thin"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

 

 

  const newsCategorySlider = () => {
    const item = $('.news-box');

    item.each(function () {
      /** each가 for 반복문과 비슷한 원리임.
       * 각각의 탭마다 각각의 Swiper를 작동시켜야 하기 때문에 각각의 .news-box마다 이전, 다음 버튼을 넣어줌
       * 그렇게 각각의 .news-box를 하나씩 돌려가면서 작동시키는 것
       */

      // 자바스크립트 버전
      // const $this = this,
      //   slider = $this.querySelector('.swiper'),
      //   prevArrow = $this.querySelector('.news-slider-prev'),
      //   nextArrow = $this.querySelector('.news-slider-next');

      /**
       * jQeury에서
       * const $this = $(this),
       *      slider = $this.find('.swiper'),
       *      prevArrow = $this.find('.news-slider-prev'),
       *      nextArrow = $this.find('.news-slider-next');
       *
       * 이렇게 작성해주면 작동 안하는 이유는 index[0]부터 지정해서 돌려야 하는데 여기서는 지정하지 않았기 때문
       * querySelector로 작동하는 이유는 맨 첫 번째꺼 딱 1개만 찾아주기 때문
       * 즉, jQuery로 돌리려면 내가 찾는 게 index[0]이라는 걸 꼭 명시해야 함
       */

      // jQuery 버전
      const $this = $(this),
        slider = $this.find('.swiper')[0],
        prevArrow = $this.find('.news-slider-prev')[0],
        nextArrow = $this.find('.news-slider-next')[0];

      const ns = new Swiper(slider, {
        slidesPerView: 1,
        loop: false,
        speed: 1000,
        spaceBetween: 20,
        navigation: {
          nextEl: nextArrow,
          prevEl: prevArrow,
        },
        breakpoints: {
          1280: {
            slidesPerView: 3,
            spaceBetween: 70,
          },
          1024: {
            slidesPerView: 2,
            spaceBetween: 40,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
        },
      });
    });
  };

  newsCategorySlider();

 

 

이런 식으로 짜면 된다 !

아직 조금 어렵긴 하지만 헷갈릴 때 참고하려고 기록해둔당 -

푸터 영역은 큰 어려움 없이 작업했다.

 

내일부터는 유지보수 업무 인수인계가 시작될 것 같다.

내일도 파이팅해야징 -

 

 

 

 

---

 

 

 

Day 20  -  '유지보수 실습'

• 유지보수 실습
• 서브 콘텐츠 영역 연습

 

---

 
 
Review
 

 

 

 

 

 

 
 
 

 

• 유지보수 실습

 

: 현재 진행중인 프로젝트의 유지보수 업무에 투입되었다.

고객의 요청에 빠른 피드백 및 수정 작업을 하는 것이다. 간단한 업무이고 크게 어렵지는 않았다.

webadm을 사용하고 있는데 거기서 해당 콘텐츠를 찾는 것이나 개발 서버에서 해당 폴더를 찾는 것이 조금 어려울 것 같았다. 아직 익숙지 않아서 그런 것 같고 익숙해지면 금방 할 수 있을 것 같았다.

 

오늘 해본 것은 푸터 바로 위쪽에 연계 브랜드(?)들을 나열해놓은 Swiper 영역에서 몇 가지 브랜드를 삭제 및 수정하는 작업이었다. 해당 파일을 빨리 찾지 못해서 리더님께서 도와주시고 알려주셔서 또 하나 배웠다,,

빠르게 업무 연락을 확인하고 대응하는 것이 가장 중요할 것 같다 !

 

파이팅 -

 

 

 

 

 

• 서브 콘텐츠 영역 연습

 

: 리더님께서 클론코딩을 마치고 서브 콘텐츠 영역을 연습해보라고 시안을 보내주셨다.

내가 설명을 제대로 알아듣지 못하고 서브 콘텐츠를 클론코딩하고 있다가 퇴근할 때쯤 돼서야 직접 HTML과 CSS를 짜보며 연습하라고 하신 것을 깨달았다,, 하하

 

 

 

급하게 하나 만들어보고 퇴근했다 !

 

여기서 오른쪽에 박스 3개를 겹쳐놓는 부분에서 조금 헤맸는데, padding과 margin을 이상하게 줘서 그런 것이었다,,

flex로 간편하게 할 수 있는 것이었는데 아마도 빨리 퇴근하고 싶었나보당,,

 

이번주 근무일지 끝 !