노마드 코더 코코아톡 클론코딩 8일차

노마드 코더 코코아톡 클론코딩 8일차

정리

클론 코딩

1. Screen Header
status-bar와 header가 겹치는 현상 발생. position:sticky를 통해서 해결했다. sticky는 스크롤 박스에 고정하는 속성이다. 스크롤하지 않을 때는 static처럼 동작한다. static은 디폴트값. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

a. icon은 text다. 폰트처럼 생각하기.
b. .~~*2를 하면 해당 클래스 이름을 가진 태그 2개를 자동 완성해줌.
c. 반복해서 사용되는 부분은 component 파일로 만들어서 따로 보관해둔다.

이번 시간 의문점들은 다음과 같다.

1. 아이콘 간격 조정에서 margin-left나 right나 차이는 없지만, right의 경우 padding으로 설정해놓은 위치를 변경 시킬 수 있기 때문에 left로 해놓는 게 안전해 보인다.
2. friends name display 박스에서 난 justify content를 사용했지만 강의에선 text-align과 display:block을 사용함. 차이는 없는 듯.
3. friends name display 의 모든 자식을 선택하기 위해 #friends-display-link > * 을 사용함.
4. img는 inline이라 들었는 데 왜 텍스트와 나란히 놓을 수 없지? 이미지 옆에 텍스트 두는 법?
   user component를 flex로 하면 column 2개를 가로 정렬함. 그러나 우리가 원하는 건 첫번째 column 안에있는 이미지와 텍스트이기 때문에 first-child로 첫 번째 column을 지정해줘야 한다.