◾ 인스타그램 메인페이지 클론 HTML
인스타그램 메인페이지 이미지를 따라만드는 과제를 해보았다.
div코드를 많이쓰면 안좋다고했는데 아직 실력이 부족해서 그런지 div코드를 너무 남발했다..
📌 HTML , CSS Github 주소
✔ HTML Github
✔ CSS Github
◾ 결과 화면
일단 가장 큰 구역은 두 군데로 네비게이션바있는 상단 고정 부분과 피드 부분 두 부분으로 나누었고
상단 바에서는 또 크게 세구역으로 나누어서 좌측 중간 우측으로 구역을 나누어 작업을 진행했다.
각 구역에서도 또 구역이 나뉘었다.. 너무 <div>를 남발한건 아닌지 ..ㅎㅎ😂
화면 위쪽 네비게이션 바에 인스타그램로고 오른쪽 수직선은 html로 추가할 수도 있었지만 나는
<div> 를 써서 CSS border-right or left 를 주었다.
그리고 피드구역은 우선 큰 컨테이너로 자리를 잡고 피드헤더, 사진, 메뉴, 댓글창 네구역으로 나누어
진행했고 그안에서 서로 또 구역이 많이 나뉘었다. 주말에 시간있을 때 제대로 리팩토링 하면서
코드 간소화 작업을 해야겠다!!!🔥🔥
📌 느낀점
오늘 코드를 작성하면서 느낀 문제점은 큰 틀을 먼저 만들고 시작하긴했으나 진행하면서
중간중간 중복되는 CSS들이 너무 많았던것같다. 리팩토링하면서 다시 고쳐나가겠지만 많이 아쉬운
하루였다. 코딩 배우기 시작한지 한달 조금 지난 시점이지만 잘하고 싶은 욕심이 많아서 항상 아쉽다😢
그래도 CSS flex는 점점 많이 이해가 되는 발전이 있어서 기분이 좋다.
근데 이미지만 보고 그 이미지대로 따라서 클론만 했기 때문에 자바스크립트로 기능이 잘 들어갈지
는 모르겠다. 내일 코드 리뷰를 동기들과 하면서 다른사람들은 어떤식으로 코드를 작성했나 리뷰해보면서
내가 받아들여야 할 좋은 점들은 받아들이면서 하면 좋을 것 같다.
