Westagram clone
▶︎ 학습목표
- HTML태그를 이용하여 구조짜기
- CSS 기초 개념을 활용하여 원하는 디자인 짜기
- 개발자도구를 활용하기
- 자바스크립트로 기능 구현하기
✓ Mission1 로그인 페이지 레이아웃
Mission2 id,pw 입력 시 로그인 버튼 활성화
✓ Mission3 메인페이지 레이아웃
Mission4 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
사전스터디 1달 + 학원수강 1주일.
2주차에 프로젝트라니 정말 순간 막막했다.
우선, 프로젝트를 시작하면서 머리속으로 떠올렸다.
월요일 밤부터 시작하여 정말 기적적으로 수요일 오후에 HTML / CSS 를 끝냈다.
제일 먼저 시맨틱 태그를 사용하여, HTML 구조를 짰다.
프로젝트를 하기와 같이 큰 틀로 나누었다.
- 로그인페이지 메인페이지 HTML과 CSS 2일 안에 구현하기.
- 로그인 버튼 활성화 / 댓글 추가 기능 1일 안에 구현하기.
🛎 로그인페이지 HTML
- 첫번째 메인페이지에
제목/id, pw를 입력할 input창/로그인버튼/비밀번호 분실했을 경우로 구조 구현 생각 - 사각형 및 스타일을 주기 위해
<div>를 이용하여 하나의 container로 묶음 - 제목을 나타내기 위해
<h1>/ id, pw 값 입력받을<input>/<button>/<span>
🛎 로그인페이지 CSS
- 각 브라우저마다 요소에 대한 기본값이 있기에 reset 파일로 이용하여 초기화 시키고,
box-sizing을 적용하면 모든 박스 크기가 일정하게 패딩 안쪽으로 값을 정하게 되고, 더 직관적으로 크기가 지정되기에border-box로box-sizing적용 <main>안에 있는 자식들을 세로로 정렬하기 위해 부모요소인<body>에flex를 주고,<main>에flex-direction으로column적용
▶︎ Refactoring
CSS를 적용하겠다고
<div>를 썼는데 오늘 코드 리팩토링하면서<main>으로 바꿨다.
이유는 단순<div>로 묶는 것보다 로그인페이지에 로그인이 메인이기에 시맨틱태그인<main>으로 의미를 부여했다.
🛎 메인페이지 HTML
- 메뉴바 / 피드 & 사이드 구조로 구현 생각
- 최대한 시맨틱 태그를 사용하려고 메뉴바는
<nav>/ 피드 & 사이드는<main> - 메뉴바
- 메뉴바에는 총 3개의
<div>로 구분
- 메뉴바에는 총 3개의
- 피드
- 피드 & 사이드를
<main>으로 묶고 난 다음에 피드 / 사이드로 구분 - 피드는 하나의 글이라고 생각하여
<article>으로 감쌌다. 피드 올린 유저/피드 이미지/좋아요,북마크 등 아이콘/댓글/댓글창으로 구분댓글추가기능구현 시, 댓글 들어갈 공간<div>생성
- 피드 & 사이드를
- 사이드
유저/스토리/추천/바닥글로 구분
🛎 메인페이지 CSS
- 메뉴바를
위스타로고/검색창/아이콘들로 나누어space-evenly로 양쪽 끝부터 안쪽까지 같은 간격을 줬다.space-around은 블럭과 블럭 각각의 간격을 유지하기에 사용하지 않았다.
- 피드 & 사이드는 서로 별개이기에
margin으로 사이 공간을 넓혔다. - 피드는 총 5개로 구분하였다.
피드헤더/피드 메인이미지/피드 아이콘/댓글들/댓글창
- 피드헤더는 올린 유저 아이디 이미지 / 유저 아이디 & 더보기아이콘으로 2개로 나누었고, 아이디 & 더보기 아이콘은
space-between을 주었다.space-between은 양쪽 끝에 약간의 간격을 남겨두고서 벌어지기 때문이다.
- 피드 아이콘들은 2개로 나누어
space-between으로 간격을 두었다. - 댓글들 부분에는
좋아요를 세는 문장과 댓글창 2개로 나누었다. - 댓글창에는
기존댓글/기존댓글/추가될 댓글/댓글창이 들어갈 공간을 만들었다. - 구현하지 않아도 되지만
게시라는 버튼 위에 마우스를 올리면 글씨 색이 바뀌는hover적용했다. - 사이드는 총 4개로 구분하였고,
footer부분에 글씨 사이에 점 찍는 것을 구현하기 위해 구글링 하여,after라는 속성을 적용하였다.
▶︎ Refactoring
메인 페이지에도
<div>적용이 많았고, 가독성 높이고 검색엔진에 최적화 하기 위해 시맨틱 태그로 바꾸었다.
피드의 이미지, 댓글등 연관성이 있기에<section>으로 묶었고,
사이드는 스토리,추천 등 각각 독자적으로 재활용 할 수 있다고 생각하여<artcle>로 적용했다.
flex는 수직 / 수평의 간격을 조절뿐만 아니라 위치까지 조정할 수 있어 많이 쓰였다.
🙋🏻♀️ Today,
삼일동안 모든 것을 끝내는 것이 내 목표였다.
배운지 얼마 안됐지만 목표를 크게 잡았다.
2일은 HTML / CSS 그리고 1일은 Javascript.
고작 사전스터디 때 처음했던 자기소개 웹페이지 이후 두번째인데...쉽지 않았다😭😭
그래도 배웠던 것을 적절히 써가며 구현 해 내는게 신기했다.
역시 바로 눈 앞에 결과물이 보이니까 계속 집중해서 하게됐다.
with 코로나처럼 대상포진 후유증과 함께 살아가고 있다.😣
2일만에 겨우 레이아웃을 다짰다.
모르는 부분이 많아서 구글링 하느라 애먹었다.
도미도처럼 블럭의 간격을 잘 유지하려고 했는데 도미노처럼 쓰러지듯 자꾸 중구난방으로 퍼지는 단락들을 보여 끔찍했다...😨
하나하나 다시 도미노를 세우듯 아이들을 다독이고, 내 정신과 손가락을 다독이며 정렬했고, 깔끔하게 정돈되었다.
자기소개 웹페이지 때, 애먹었던 메뉴바 position + flex + background-color.
나름 한 번 실패했었던 기억이었다고 이번엔 수월하게 구현했다.
부모요소인 <body>에 disply: flex을 하고, <header>에 position: fixed 하고, 정렬을 위해 flex, space-evenly를 적용하고, 메인글과 겹치지 않게 하기 위해 background-color 적용까지.!
먼 훗날 다시 뜯어보면 또 수정할 것들이 눈에 보이겠지만 현재 코린이로써,
물론 아직 부족한 게 너무나도 많지만 잘 따라가고 있는 내가 너무 대견스럽고, 결과물도 만족스럽다🤣
말도 안되는 부분도 있겠지만 코드에 정답이 어딨겠는가.
그러나 자바스크립트 문제가 남았다.
로그인 버튼 활성화 구현하는데 하루가 걸렸다... 정말 지독한 녀석이었다.
아직 일주일 조금 밖에 안지났지만 개발자의 매력을 하나 느꼈다.
개발자들은 자유롭다는 부분이 있어 개인주의일 것이라 생각했는데 전혀 아니였다.
모르는 부분을 구글링 할 때, 수많은 질문들에 수많은 댓글들을 볼 수 있었다.
일부 우스갯소리를 남기는 댓글들도 있었겠지만, 내 눈에는 본인들만의 코드를 작성하여 성심성의껏 댓글을 남기는 것들이 많이 보였다.
나도 그들처럼 내가 배운 지식을 가지고 남을 도와줄 수 있는 날이 왔으면 좋겠다.
이 시점에서 문득 내가 현재 만족해 하는 것이 맞는지, 이렇게 공부해 가는 것이 맞는지 걱정되어 멘토님께 처음으로 상담요청을 했다.
잘하고 있다고 멘토님께서 다독여 주시면서 부족한 부분을 체크해 주셨다.
좋은 말씀도 많이많이 해주셔서 꾸준히 열심히 할 힘도 났다.
내짝꿍님도 동기님들도 모두들 감사드려요! ❤️
