TIL(211224): 인스타그램 클론코딩

• 오늘은 인스타그램 클론 코딩을 진행하면서 px사용을 금지하셔서 한개도 쓰면 안돼는줄알고 고군분투를 했다. 아직 기초 단계이긴 하지만 백엔드쪽을 진행하다가 프론트쪽을 진행해보니 해결못하는 문제를 찾아보는 과정도 흥미롭게 느껴진다.
• 팀원의 풀리지 않는 문제를 함께 봐주며 느낀 점은 <div>로 정리를 하는 방법과 id와 class명의 정리의 중요성이다. 코드는 최대한 보기 쉽고 간결하게! 그래야 다른 사람이 나의 코드를 보더라도 어디가 어디인지 알 수 있다.
• 반응형CSS를 사용하기 위해서 뷰포트메타태그를 넣어줘야한다는 것을, 한참 헤매고서야 강사님의 코드를 하나하나 차근히 보며 알아냈다. 배신감과 바보같은 무지한 나에 대한 원망의 연속.
• justify-content 와 align-content or items 의 차이점에 대해서도 의문이 생겼다. 정확히 어떤 것이다 하고 사용한 건 아니라서 그냥 정렬해준다는 의미로 아무거나 생각나는데로 적었는데 가르키는 방향이 다르기때문에 귀찮아도 알고 넘어가자!
• 페이지가 지정된 사이즈 안에서 넘어가면 안보이는 기능은 overflow다. 가로 세로 어느 방향이든 사용할 수 있다. 한참동안 슬라이드, 수동슬라이드, 카드슬라이드 등의 키워드를 검색하면 시간을 허비했다. 이렇게 명령이 심플하다니!

 

 

*뷰포트 메타태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

:뷰포트는 웹이냐 모바일이냐에 따라 다르고 기기마다도 각각 다른 뷰포트를 가지고 있다. 그래서 반응형CSS가 필요한고, px 단위보다는 vw, vh, em, rem, % 등의 상대적 단위를 사용한다.

 

*justify-content, align-content, align-items

justify-content: flex 방향의 주축 정렬

align-content: flex방향의 교차축 줄 정렬

align-items: flex방향의 교차축 컨텐츠 정렬

justify-content의 명령어는 space-around, space-between, space-evenly 등으로 입력한다.

align의 명령어는 center, left, right 등으로 입력한다.

 

*overflow: hidden

오버플로우는 지정된 상자안에서 넘어가는 내용이 가려지게 할 수 있는 기능이다.

overflow에 hiddend을 입력하면 넘어가는 내용이 보이지 않는다.