삼천리 기업 웹사이트 클론 코딩

💁‍♀️프롤로그

카페24 클론코딩을 진행한 후, 사실 만족스럽지는 않았습니다. 이해될 때까지 강의를 계속해서 보고, 혼자 스스로 구현할 수 있을 때까지 코드를 짜서 만들었지만, 강의라는 도움을 받았기때문에 스스로 해냈다는 성취감은 별로 안들었습니다. 사이트 하나 클론코딩했다고 실력이 늘었다고 생각도 안했구요.

그래서 이번엔 직접 누구의 도움없이 클론코딩을 해봐야겠다고 생각했습니다. 단순히 html과 css를 이용하는 클론코딩이기 때문에 적응형 웹사이트를 찾다가 삼천리라는 기업 사이트를 발견했습니다.

한 눈에 보기 좋게 레이아웃이 설정되어있어 조금은(?) 자신없는 레이아웃 연습을 할 수 있을 것 같았고 화면 크기가 달라져도 해당 요소의 크기가 변하지 않게 하는게 제 기준에선 정말 너무 어려웠는데 이를 연습할 수 있을 것 같아서 해당 사이트를 클론 코딩하기로 마음먹었습니다.

 

😁완성본

삼천리

삼천리 클론코딩 완성

완성본입니다. 코드를 작성할 때부터 배포까지^^.. 특히 배포할 때....(아래에 설명 예정) 우여곡절이 많았지만 모르는 부분은 구글링도 해보고, 사이트는 코딩을 어떻게 했는지 공부도 해보면서 만들었습니다. 다 만들고 보니 뿌뜻했습니다. 과연 내가 잘 할 수 있을까?라는 의심이 들었는데.. 만들고 나니 그래도 조금 자신감이 생겼던 ㅎㅎ.. 지금은 단순히 정적 구현이지만 조금 더 연습해서 멋진 동적 웹사이트도 만들고 싶다는 생각이 들었습니다.

 

📋코드 작성

1. 레이아웃

제가 어려워했던 레이아웃, 분명 눈으로 볼땐 '아 이렇게 해서~ 이렇게 저렇게 하면 되겠네~'라고 쉽게 생각했는데.. 실제로 코드를 짜보니 어렵더라구요. 물론 제가 각 요소의 특징을 잘 몰라서 그런거겠지만..

그래서 이번엔 코드를 짜기 전에 레이아웃이 어떻게 구성되어있는지 직접 손으로 먼저 그려봤습니다. 웹사이트 골격을 하나하나 보니 그림을 그리면서 어디엔 어떤 태그를 쓰고, 어떤 속성을 쓸지 대충 감이 잡히더군요. 그림을 그려본건 정말 클론코딩을 하는 데있어 많은 도움이 되었습니다. 앞으로 클론 코딩이던, 프로젝트던 그림을 먼저 그리고 시작할정도로요.

삼천리 웹사이트 헤더 영역

삼천리 웹사이트 메인영역

2. 코드 구현

코드 구현을 하기 전 class만을 이용하여 css를 적용하고 BEM을 이용해 이름을 지었습니다. 확실히 BEM을 이용하여 작명하니까 직관적으로 보이기도 하고 한눈에 알아볼 수 있어서 좋았습니다. 아래처럼 이름을 지었습니다.

 <ul class="header__top-menu-list">

          <li class="header__top-menu"><a href="#">로그인</a></li>

          <li class="header__top-menu"><a href="#">회원가입</a></li>

          <li class="header__top-menu"><a href="#">사이트맵</a></li>

          <li class="header__top-menu"><a href="#">Egnlish</a></li>

        </ul>

 

나란히 배치해야하는 경우엔 flex 속성을 이용해 각 요소들을 배치했습니다. 한 요소에 여러 요소가 수직으로 배치되야하는 경우엔 position 속성을 이용했구요.

.header__logo-box {

  position: absolute;

  top: 30px;

  left: 10px;

}

.header__top-menu-list {

  display: flex;

  position: absolute;

  right: 180px;

  top: 16px;

}

 

아, 그리고 css의 경우 헤더, 메인, 하단 영역을 모두 별도로 만들어서 style.css에 포함시키도록 했습니다. 지금은 당장 쓸 곳이 없지만 추후에 코드를 재사용할 수 있으니까요. 중간중간 git에 저장도 하면서 코드를 작성했습니다.

 

🔒문제

코드를 다 짜고! vscode에서 실행하니 잘 나와서 github에 올리고 배포된 것 봤는데...? 응..?응??!?!? css가 전혀~ 적용이 안되더라구요.. 아래 사진처럼요... 

왜지?? 분명 vscode에선 잘 됐는데... 깃헙에선 404에러라고 뜨더군요. 눈물을 머금고 구글링을 시작. 404에러가 나는 원인은 경로 설정을 잘못해서라고 나오더군요. 경로? 나 잘 설정했는데?? (라고 말한 상대경로/절대경로 모르는 바보^^)

이때만해도 절대 경로, 상대 경로에 대한 정확한 개념이 없어서 혼자 계속 끙끙거렸습니다. 상대 경로로 설정하는 와중에 아무렇게나 ../라고 입력해야하는 곳에 ./로 입력하고 말이져 ㅎㅎ

 

이건 컴터의 문제다. 100%다. 라고 멍청한 확신이 든 순간, 백엔드 친구의 원격 도움으로 어지저찌 css 문제를 해결했습니다. 그 친구가 상대 경로 문제였다고 말해주더군요.

 

상대 경로가 뭔지는 모르지만 일단 해결했다는 안도감이 드는 것도 잠시, 스스로 문제를 해결 못하고 있는 제 자신이 너무 싫더군요. 나중에 실무에 투입되었을 때도 문제가 생기면 다른 분한테 해결해달라고 할 수도 없는거고...

그래서 구글링(체고!)을 통해 상대 경로, 절대 경로에 대해 이해가 될때까지 찾아보고 읽었습니다. 어느정도 이해가 됐다고 생각이 들었을 때 제가 작성한 코드를 보니.. 정말 경로를 아무렇게나 설정했더군요.. 그래놓고 컴퓨터 탓이라 했으니 ㅎㅎ

 

 

🔓해결-절대 경로와 상대 경로

절대 경로란 파일의 root부터 해당 파일까지의 전체 경로(URL)를 의미합니다. 즉, 어느 위치에 있어도 주소가 변하지 않죠. 반면 상대 경로란 현재 파일을 기준으로 연결하려는 파일의 상대적인 경로를 의미합니다. 지금 위치한 파일에 어디있는지에 따라 상대적으로 변하기 때문에 상대 경로라고 합니다.

 

쉽게 말하면 일산동구에 초밥집이 있다고 합시다. 여기서 절대 경로란 경기도 고양시 일산동구 xx로 xxx입니다. 초밥집이 이전을 하지않는 이상 이 주소는 고정되어있죠. 바뀌지도 않고요.

반면 상대경로는 '우리집에서  좌회전해서 신호등 건너면 도착' 혹은 '친구 집에서 버스 xx번을 타고 xx정류장에 내려 우회전하면 도착' 이렇게 출발하려는 위치가 어디냐에 따라 주소가 달라지는 것을 의미합니다.

 

이걸 코드에 적용하면 현재 같은 파일 내에 위치한다면 ./(생략 가능), 상위 폴더는 ../이고 절대 경로의 경우 /로 표현합니다.

 

🚩마무리

이렇게 우여곡절 완성한 클론코딩. 만들땐 힘들었지만 그래도 완성하니 뿌뜻합니다. 여기서 그치지 않고 더 연습하면서 html, css는 마스터하고 싶은 생각도 드네요. 완성된 코드는 깃허브에 올려놨습니다. 시간이 된다면 제 깃허브에 방문해 개선해야 되는 부분을 남겨주시거나  코드를 보고 여러분께 작은 도움이 되었음 좋겠네요.

GitHub - dooheeyaa/samchully.github.io