westagram main 만들기

2일차!
오늘은 인스타그램 메인페이지를 만들어야한다.
얼른 끝내고 DOM이라던가 tag라던가 더 공부하고싶은데 아마 무리겠지..

이페이지를보고 쉽네 이미지 import만 하면되겠지했는데
import하면 그림이깨진다.
벌써부터 걱정이다..

img폴더를 하나만들어서 그안의 파일들을 불러오게하였다.

nav바 만든 과정이 어디갔는지 모르겠지만..
이렇게 만들었다.

.navigation {
  display: flex;
  justify-content: center;
  width: 100vw;
}

.navLogo {
  margin: 1em 0.5em 0.5em 0;
  font-family: "Lobster", cursive;
  font-size: 1.7em;
}

.icon {
  width: 2em;
  height: 2em;
  margin: 1.9em 1em;
}

.userProfile {
  width: 1.6em;
  height: 1.6em;
  margin: 1.8em 1em;
  border: 2px solid;
  padding: 0.2em;
  border-radius: 50%;
}

.searchBar {
  display: flex;
  justify-content: center;
  margin: 2.1em 5em 0 7em;
  width: 18vw;
  height: 3vh;
}

.searchBox {
  width: 25vw;
  text-align: center;
  background-color: rgb(242, 244, 246);
  border: 1px solid rgb(212, 209, 209);
}

당시에는 몰랐지만 지금 글쓰면서보니 align-item:center를 했으면 수직의 가운데로 맞춰질거같다.
그러면 margin-top을 안줘도 되니까 그게 더 편할거같다.

궁금한점 발생 : input 문제?

일단 레이아웃을 만들긴 했는데 input 칸이 튀어나와있는 문제가 발생했다.

부모요소에 넓이를 33vw를 주었고
자식요소인 comment-input에 넓이를 100%로 하면 부모넓이의 100%가 아닌가?

뭐지 대체 뭐지?

시도

1. inherit display:flex로 바꾸고 자식요소에 inherit을 주라는 말을 들었다. 반토막이났다.

2. padding 제거 패딩때문에 그런거 같아서 패딩을 지우니 아주 조금 튀어나왔다.

3. %로 임의의 영역 할당

div.right-main 만들기

프로필이미지와 유저명은 왼쪽에 팔로우는 오른쪽으로 보내야하는데 여기서 헷갈렸다.

완성(한줄 알았던것)

이야 완성했다하고 레이아웃 완성이라고 커밋했는데 포스팅의 내용은 따로있고 댓글도 따로있었다.. 하루종일 급하게 만들면서 정신을 잠시 잃은듯 댓글은 list로 달릴테니 div 태그였던 코멘트들을 ul과 li로 바꾸었다.

음? 저 •은..?

•을 없애니 tab한것마냥 안쪽으로 들어가있었다. ul의 li라서 들어간거같은데..

#

제출