4월28일 TIL (instagram 클론만들기)

오늘은 인스타그램의 화면을 직접 구현을 해보기로 했다!!

듣자마자 제일 먼저 시작한 것은 목업을 그리기였다.

어떠한 화면으로 구성을 할건지 (div의 순서, 상하관계 등)

위치는 어떻게 할 것인지 등등

 

오늘은 홈페이지의 뼈대와, 메세지창의 뼈대만을 구성 해 보았다!!

index의 뼈대

index를 구성하면서 구현했던 코드들

제일먼저 header부분을 고정하기로 하였다.

position: fixed;
top: 0;
left: 0;
right: 0;

상단바에 헤더를 구성을 하였다면, fixed를 주어 부모로부터 독립하는 개체로 지정을 해준다.

top, left, right로 위치까지 구성

 

사실 아직은 뼈대만을 구현했기에, 어려웠던 것은 코드 구현이 아닌 div를 만드는 절차였다.

앞으로 더욱 더 목업을 신중하게 작업하도록 해야겠다.

direct 창의 뼈대

그 후 다이렉트 메세지의 뼈대를 작성 해 보았다!!.

인스타에 클론이라서 이것저것 넣어야 할 이미지가 많지만

모두 다 보류하고 뼈대부터 구성하기로 한다.

 

왼쪽에 스크롤 바가 나와있는 코드는

overflow: auto;

이다. 만약에 창밖을 빠져나오는 구성들이 있다면, 그것들에 대한 값들이다!!.

hidden을 주게된다면, 그냥 틀을 벗어난 얘들은 보이지 않게 처리해준다