221229 html/css, layout clone coding II(feat.회고)

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

---

 

레이아웃클론코딩을 완성하였다.

사실 완성이라고 할 순 없고, 정적인 것들, 배치, 색 정도를 html/css를 통해 비슷하게 만들었다.

 

JS를 활용해서 슬라이드 함수 만들어서 메인섹션 한 쪽에

무한으로 돌아가는 광고 슬라이드?도 만들고싶었는데 작업기간 2주,평일 10일의 반을

css관련 내용을 익히는데 써버려서, 지난 글을 적는 5일차 시점에서야 본격적으로

배치다운배치, 색, 이미지 등을 넣을 수 있게 되었다.

(31일 즘엔가 무한 슬라이드도 추가해서 푸시했당)

 

1차 과제의 필수 조건들 중에 꼭 해내고 싶었던 것이 아래 3가지 인데,

• 시멘틱 태그를 최대한 활용
• CSS Flex 혹은 Grid 등을 활용
• 부분적으로 BEM 방법론을 도입.

다행히도 제출기한 하루를 남겨두고 3가지 조건을 수행해 낼 수 있었다.

아래는 배포를 해본 클론사이트 주소이다.

메인 | 오늘의집

사실 배포라는 것을 gitpage말고는 처음해봤는데, netlify가 개인적으로 훨씬 간편하고 쉬운것  같다.

 

눈에 띄는 실수부터 적어보자면 화면 전체 중앙 배치이다.

전체를 묶고 시작했었어야했는데, 앱을 만드는 "위젯"의 눈으로 바라봤더니 섬세한것에만 

신경을 쓰고 전체를 보지 못하는 기본적인데 가장 큰 실수를 하게되었다.

 

그래서 전체 정렬이 약간 중앙에서 벗어나 있고, 화면비율을 줄여보면 왼쪽으로 치우쳐서 정렬이 유지된다.

(이게 중앙으로 됐었어야 했는데 :(( )

그리고 상위에있는 대문사진? 이라고해야할까 메인섹션이라고 해야할까

아무튼 중앙사진 옆 직사각형으로 오늘의 집 이벤트를 알려주는

캐러셀 슬라이드(무한슬라이드)가 있는데, 라이브러리를 사용하는 방법을 익혀두지않아

구현을 하지 못한 채로 제출하였다.

 

이렇게 부족한 상태로 제출하게된 이유는 당시 절반이상을 해버렸고,

되돌리기엔 시간을 너무 많이 보냈다는 생각과 css 구조를 생각하지 않고

각 클래스에만 포커스를 맞춰버리는 바람에 만들어진 눈덩이였다.

때문에 과제를 일찍 내버린 이유도 여기에 있다.

 

---

 

우선 클론 프로젝트는 private로 되어있기때문에

소스코드를 다시 클론해서 오픈할 수 있는 상태로 업데이트를 해 둘 생각이다.

오픈하고, 캐러셀화면도 적용해 볼 생각이다.(현재는 오픈소스 + 캐러셀 구현되어있습니당!)

오늘의집 클론코딩 오픈소스

GitHub - ronieo/ohnu_clone: Ohouse Clone