카페24 베스트 쇼핑몰 디자인 클론 코딩

💁‍♀️프롤로그

자격증, 제 2외국어 공부 등 여러가지 이유로 미루거나 공부 시간이 적었던 코딩 공부. 그러다 취업 준비를 위해 포트폴리오를 제작하는 와중 잘한다고 생각했던 css에서 막힘이 생겼다. 강의를 듣고 혼자 다시 해보고.. 그럼에도 강의의 도움을 계속해서 받아야했다. 프론트엔드가 되기 위해 노력했것만 난 이 길이 아닌가 하던 와중,

 

당신의 클론 코딩은 왜 실패하는가?

 

이 글을 보고 머리가 울렸다고 해야하나? 단순히 따라친다고, 듣는다고 되는게 아니였다는 것을 알게됐다. 딸랑 한번 들은 강의로 다 알았다고 자만했다니... 그래서 이번엔 같은 강의를 한번 더 들으면서 배운건 기록하고, git과 git hub도 이용해보고, 나와 같은 상황인 사람들을 위해(나또한 포함) 클론코딩의 과정을 기록해보고자 한다. 말이 길었지만 아무튼 시작!

 

 

☕카페24

내가 강의를 들으며 클론코딩할 대상은 바로 카페24 베스트 쇼핑몰이다. 완강을 하면서 완성했던,(어찌보면 따라쳤던) 다시 해볼 이번 목표 디자인은 아래 사진이다. 다시 차근차근 레이아웃부터 시작해보자.

이미지 왜 로딩이 완되어있지^^;;

💡header 영역

먼저 header 영역이다. header 태그를 이용해 큰 테두리를 설정하고, 경계선을 기준으로 2개의 div태그를 만든다. (편의상 위의 div를 top, 아래를 bottom이라고 부르기로하자.)

<header class="header">
      <div class="header__top">
      </div>
      <div class="header__bottom">
      </div>
    </header>

 

top의 경우 메뉴, 쇼핑몰 이름, 네비게이션 총 3가지 구역으로 나뉜다. 메뉴는 nav태그, 이름은 h1태그, 네비게이션은 ul 태그를 사용했다. 3개의 태그는 나란히 배치되었으므로 flex 속성을 이용하고, top을 기준으로 중앙에 위치해있으니 align-items: center을 적용했다.

<header class="header">
      <div class="header__top">
        <nav class="header__nav-box">
        </nav>
        <h1 class="header__title">ANOTEHR</h1>
        <ul class="header__menu">
          <li class="header__content">
          <li class="header__content header__user-badge--box">
          </li>
          <li class="header__content header__cart-badge--box">
          </li>
          <li class="header__content">
          </li>
        </ul>
      </div>
    </header>

 

여기서 잠깐! 이렇게 되면 각각의 div가 가지는 크기가 달라 쇼핑몰 제목이 중앙에 오질 않는다..(이거 못고쳐서 짜증났었음)  이럴땐 3개의 태그 너비를 동일하게 하면 제목을 중앙에 배치할 수 있다.

 

여기서 잠깐! 너비를 동일하게 적용 후, 제목 div 안에 있는 글자를 가운데로 정렬해야 화면상에 쇼핑몰 이름이 중앙에 배치된다. 이때 flex 속성을 사용할 수도 있지만, 단순이 메인축 정렬'만' 한다면, text-align 속성을 사용해도 나쁘지 않다! 본인도 수업을 다시 들으면서 알게됐고, 유용하게 쓸 것 같아 적어봤다.

 

메뉴와 네비게이션은 리스트 형식을 띄고 있으므로 div 태그 안에 ul, li태그를 넣었고 각각의 요소 모두 나란히 배치되었기 때문에 flex 속성을 이용해줬다. 이후 padidng 혹은 margin을 주어 간격을 조절하면 top부분은 완성!

 

bottom 영역은 top보다 훨씬 수월하다. 메뉴와 네비게이션처럼 리스트이므로 ul, li태그를 작성하고, 나란히 배치되어있으므로 flex 속성을 이용한다. 각각의 li들을 메인축과 교차축을 기준으로 중앙에 위치해있으므로 justify, align-items 모두 center로 정렬한다. 이후 li태그에 margin을 주면 된다.

<header>
     <div class="header__bottom">
        <ul class="header__menu-box">
          <li class="header__content">BSET</li>
          <li class="header__content">NEW5%</li>
          <li class="header__content">1+1</li>
          <li class="header__content">OUTER</li>
          <li class="header__content">TOP</li>
          <li class="header__content">SHIRTS</li>
          <li class="header__content">DRESS</li>
          <li class="header__content">PANTS</li>
          <li class="header__content">ACC</li>
        </ul>
      </div>
    </header>

 

💡 header 아이콘

사진에 보이는 +2000, 2같은 부분을 클론코딩하기 위해선 position 속성을 이용해야한다. 메뉴인 li 태그를 감싸고 있는 top박스에 position을 relative로 주고, 메뉴의 아이콘에 position을 absolute를 주어 위치를 조정하면 된다.

 

슬라이더 & 인트로 영역

💡slider 영역

슬라이더 영역 구분하기

슬라이더를 담을 section을 만들었다. section 안에는 화살표, 메인 이미지가 들어가므로 section 태그 안에 div 요소를 넣었다. 해당 요소들은 수평으로 정렬되어있기 때문에 flex 속성을 이용하고 균일한 간격으로 배치되어있으므로 justify-content:space-between을 지정해줬다. 어느정도의 여백이 필요하다면 padding을 주면 된다.

 

메인 이미지 박스 안에는 2개의 제목과 사진이 들어가므로 메인 이미지 div 안에 요소들을 적고 flex 속성을 이용하여 수직으로 배치시켰다.

 

한편, ANOTHER과 메인 이미지 밑에 있는 상태바의 경우에는 positon 속성을 이용했다. sexction에 positon: relative; 속성을 부여하고 ANOTHER과 상태바에 position: absolute; 속성을 부여했다. 이후 원하는 위치에 맞게 조정하면 된다.

 

💡intro 영역

인트로 영역 구분하기

인트로 역시 flex와 position 속성을 이용하면 된다. intro 안에 요소 들을 담을 큰 section 태그를 만들고 안의 콘텐츠을 담을 div의 박스 4개를 section 태그 안에 넣는다. 후에 flex 속성을 이용하여 수평으로 배치시키면 1차적인 업무는 끝!

 

각각의 콘텐츠 안에는 이미지와 글이 담겨있으므로 div 태그 안에 img 태그와 글자를 표현하는 h1~h6 태그를 입력한다. 이때 이미지의 크기가 콘텐츠의 크기보다 클 경우, overflow 속성을 이용해주면 된다. 글자의 경우 콘텐츠에 position: relative 속성을 주고 글자에 absolute 속성을 부여하면 된다.

 

💡main 영역

메인 영역 구분하기

메인 영역의 경우 일단 메인 요소들을 담을 main 태그를 만들었다. 이후 div 태그를 적어 그 안에 제목과 설명을 적어 넣었다. 제목과 설명의 경우 flex 속성을 이용할 수도 있지만 굳이 사용하지 않아도 배치가 가능했기에 flex 속성은 쓰지 않았다. 상품 아이템의 경우, 디자인이 전부 같기 때문에 하나만 만들고 그대로 복사하면 끝! 코드를 덜 작성해서 좋았다. 

 

아이템 안의 사진과 설명을 담을 큰 div를 만들고 그 안에 이미지를 담을 div와 색상, 상품명, 설명, 가격을 작성할 4개의 span 태그를 만들었다. flex 속성을 이용하여 column으로 배치했다. 이때 색상같은 경우 안의 작은 원이 들어가야 하므로 span 태그 안에 자식 span을 만들어 flex 속성을 주었다.  

 

이렇게 아이템 하나의 아이템 리스트를 만들면 나머지는 이미지만 다를뿐 디자인은 똑같기 때문에 복사해서 붙여넣어주면 된다.

 

💡footer 영역

하단 영역 구분하기

하단 영역의 경우, 요소도 많지 않고 flex 속성만 잘 이용하면 쉽게 만들 수 있다. 일단 footer 태그로 전체 요소를 담을 큰 박스를 만들어 준다. 2개의 div 태그로(회색 경계선) footer 영역을 나누어 준다.

 

왼쪽의 영역은 그 안에 2개의 div 태그를 넣어 수직 정렬을 해주고, 처음 div(검정 경계선)은 안에 span 태그를 넣어 수직정렬을 해준다. 오른쪽 영역의 경우 아이콘을 담을 div 태그를 만들고 그 안의 3개의 div 자식 태그를 만들어 수평정렬해주면 된다.

---

머리로는 다 알지~ 하면서 실제 코드를 작성하지 못했던 나를 반성하고 처음부터 다시 공부하고 작성한 클론코딩. 사실 화면의 크기가 줄어들거나 커지면 레이아웃이 깨진다. 그래서 어찌보면 마음에 들지 않을 때도 있고 다른분들이 한 클론 코딩을 보면 내 웹사이트는 허접(?)하다고 느끼는 경우가 많다.

하지만 이 또한 내가 능력있는 프론트엔드가 되기위한 첫걸음이지 않을까? 클론 코딩을 진행하면서 내가 다 안다고 생각했던 부분이 사실은 몰랐던 영역이고, 코드를 짜면서 스스로 어느 부분을 더 공부해야하는지 깨닫기도 했다. 당장 내일부터 갑자기 눈을 감고도 멋진 코드를 짜는 내가 될 순 없지만, 언젠간 빛을 발휘한다는 생각으로 더 열심히 공부해야겠다는 다짐이 드는 클론코딩이었다.

도움이 될지는 모르지만 그래도! 누군가는 도움이 되길 바라며 깃헙을 올려봅니다..

 

GitHub - dooheeyaa/ratadoohee.github.io: 카페24 베스트 디자인 클론코딩