221227 html/css, layout clone coding I

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

 

html/css수업을 들으면서 1차 과제를 진행하게 되었다

그것은 바로 레이아웃 클론코딩.

 

 

웹 랜딩페이지를 봤을 때 짜여져있는 구조를 그대로 따라해 보는 것인데,

강사님의 조언으론 화려한 기술구현이 돋보이는 웹사이트 보다는

정적이고 단순하면서도, 레이아웃이 여러개 나뉘어있는 사이트로 도전하는 것을 추천한다고 하셨다.

 

 

그 말씀의 이유는 프론트엔드 개발자로서 화려한 기술을 먼저 쫒기 보다는 기본에 충실하고 

Sementic Tags를 잘 활용할 수 있어야 하기 때문인 것이라는 생각이 든다.

 

 

여기서 Sementic Tags란 html안에서 뜻이없는 div태그를 남발하지 않고도

정확히 어떤위치에서 무슨 역할을 하고있는 태그 라는 것을 알려주는 태그들인데

예를들자면 아래 사진과 같다.

출처: https://medium.com/codex/what-is-semantic-markup-and-why-you-should-use-it-44777543c29c

 

 

왼편에 있는 div태그 들로 이뤄진 웹사이트는 class 속성을 통해 각 div태그가 어떤 역할을 하기 위해

그 위치에 코딩 된건지 알 수 도 있지만, 계속해서 class속성에 어떻게 적혀있는지 살펴봐야한다는 단점이 있다.

그 말은 협업 시, 팀원이 잘 알아보지 못할 수도 있고, 가독성에 영향을 줄 수 있다.

(물론 속성 안에 다 적혀있는데 뭔 상관이냐 싶기도 하겠지만)

 

 

또 다른 이유 중 하나는 웹 접근의 편의성도 있다. 내가 잘 알아보기 위함도 있지만,

타인이 내 사이트에 접근 할 때 어떤방법으로 구조를 짰는지 편하게 알아보게하기 위함이다.

사진으로만 봐도, Sementic Tags를 통해 각 위치에 태그들이 어떤 역할을 하는지 알 수 있다.

 

 

대강 Sementic Tags에 대해 파악하고 난 후 클론코딩 할 사이트를 물색해 보았다

여러 후보를 뽑아봤지만 다들 구조는 비슷한 것 같았고,

그 중에 가장 깔끔해보였고, 클론 하고 싶었던 사이트는 바로 '오늘의집'

 

사실 핸드폰하다가 어플들 중에서도 웹사이트 운영하는 곳이 있지않나?라는 생각에

사용하고있는 어플들을 살펴 보다 확정을 하게 되었다.

 

 

아래는 단순 '구조'로만 잡아 놓은 오늘의집 html틀이다.

 

html는 구조만 짜는 역할

 

 

html코드 내에서 style이란 태그를 활용해 그 안에서 즉각적으로 css를 진행하는 방법도 있다.

하지만, 코드가 길어지는 단점이 있기도하고, html의 역할이 사이트의 구조를 담는 것이기 때문에

위 처럼 틀을 만들어 놓고 최대한 Sementic Tags로 구성한 태그를 이용해 css작업을 진행하고 있다.

 

 

---

 

 

 

레이아웃 클론코딩은 2주간 진행하는 과제인데, 

html/css를 너어어어무 오래전에 그것도 대충 배우고 넘겼던지라

이렇게까지 기억이 안나고 못할 줄 몰랐다.

 

 

현재 작업 상황은 과제 기한 5일이 남은 시점이고

위 사진에서 좀 더 살이 붙어 있는 상황이다.

좀 더 구축해 나가야하는 상황이기 때문에 시간이 빠듯할 것 같다.

(아마 2탄같은 개념으로 비슷한 내용의 글을 쓸예정이다.)

 

 

작업하면서 느낀거는 옛날이나 지금이나 내 작업 속도에 발목을 잡는건

flex...아예 개념을 모르겠다기보단 계속 헷갈린다.

(그게 모르는거일지도)