[HTML/CSS] 인스타그램 레이아웃 실습

2023년 프론트엔드 스쿨 첫 실습은 인스타그램 피드 레이아웃을 짜는 것이었다.

그래서 일단 나에게 익숙한 방식으로 하기 위해 인스타그램 화면을 캡처했다.

원래 수업 자체는 피드 1개의 레이아웃을 짜는 것이었는데, 이왕 하는 것이니 캡처된 화면에 있는 것들을 최대한 구성해봐야겠다는 생각이 들었다.

수업도 많은데 괜히 혼자 삽질하는게 아닐까 라는 생각이 들었지만 그래도 일단 하기로 했으니 해본다.

 

시작: 2023.01.06.

끝: 2023.01.08.

---

패스한 부분
1. 스토리 트레이에 스토리 업데이트 시 표시되는 인스타그램 색상의 테두리 구현하는 방법
> 현재는 인스타그램 색상으로 채운 동그라미 위에 프로필 사진을 얹어둠.
> border를 흰색으로 해서 비슷해보이게 구현은 하였으나 원래 인스타그램에는 배경색이 흰색인 프로필 사진을 보면 회색으로 얇은 border가 있는데 이것을 구현할 수 없었다.
2. 아이콘 우상단에 붙은 빨간색 알람 표시 위치 설정.
> 화면 크기가 500px이상이면 가로가 500px로 고정되어있어 크게 문제되지 않았으나 500px이하의 경우에는 조금씩 위치가 달라졌다.
3. 메인피드 여러개 올리면 생성되는 하단의 동그라미 목록? 표시하는 방법
> 아직 방법을 찾지 못했다. 

 

 

 

1일차(2023.01.06.)

퇴근하고 챌린지 과제를 마친후 작업을 하다보니 속도가 많이 나지는 않았다.

일단 오늘의 목표는 스토리 트레이 부분을 작성하는 것.

HTML과 CSS로만 하는 것이니 임의로 스토리 개수도 만들고 유저의 프로필 사진도 임의로 구글에서 검색해서 가지고 왔다.

 

1. 화면 구성 설정

일반적인 휴대폰에서 볼 때는 화면 테두리가 나타나지 않고 큰 화면에서 볼 때는 화면 테두리가 나타나게 하고싶어서 스크린의 가로 길이가 500px이하면 width를 100vw로 하고, 500px이상이면 width를 500px로 고정되게 해두었다.

 

2. 스토리 트레이

개수가 많아지면 옆으로 넘겨가며 볼 수 있게 되어있어 list로 작성하였고 화면 크기를 넘어가면 가로방향으로 스크롤 되게 해두었다.

스토리가 업데이트 되면 생기는 인스타그램 색깔의 동그라미 테두리는 어떻게 해야하는지 잘 몰라서 인스타그램 색깔(그라데이션)을 가진 원형에 유저의 프로필 사진을 얹었다.

 

 

 

 

2일차(2023.01.07.)

블로그에 링크를 올리려고보니 favicon도 없고, meta property도 작성되어있지 않아서 우선 head를 업데이트하고 깃헙 page로 배포했다.

 

1. header

헤더에는 원래의 인스타그램 비스므리하게 만든 로고를 배치하고 fontawesome을 이용해 아이콘들을 배치했다.

 

2. 메인피드

메인피드는 최대한 원래의 인스타그램과 비슷하게 배치하였다. 

원래는 여러 개의 사진을 업로드하면 옆으로 슬라이드해서 넘기고 하단에 . . . 이렇게 표시가 뜨는데 이것은 어떻게 나타내야하는지 잘 모르겠어서 일단 패스하였다.

 

3. user container

유저의 프로필사진+이름이 세트로 계속 사용되기에 아예 div를 user-container로 만들어서 그 안에 사진과 username을 기재하였고, story tray에서 사용할 때는 flex-direction을 column으로 설정하여 위/아래로 배치하였고 메인피드에서 사용할 때는 flex-direction을 row로 설정하여 좌/우로 배치하였다.

 

4. navigation

맨 하단부에는 네비게이션 바를 배치하였고 마무리 하였다.

 

 

 

 

https://kimjisu1106.github.io/instagram_feedClone/

Sootagram

https://github.com/kimjisu1106/instagram_feedClone

GitHub - kimjisu1106/instagram_feedClone