[Publishing]HTML, CSS / 4일차 기록

pair programming - twittler 목업 구현 

 

실습 시간에 부모 요소에 flex-box 사용과 direction 방향까지 설정했지만 원하는 대로 자식 요소가 정렬되지 않았습니다.

페어분과 할당된 시간을 모두 써서 열심히 했지만 끝내 위의 문제는 해결하지 못하고 width, height, margin, padding 등을 사용하여 정렬했습니다. 

 

실습이 끝난 후, 전 날에 배운 내용을 블로깅하다가 왜 작동이 되지 않았는지 깨달았습니다.

align-item은 축의 방향과 수직정렬, justify-content은 축의 방향과 수평정렬입니다.

따라서 flex-direction 방향이  colum인 경우, 요소들의 좌우정렬을 설정하고 싶을 때 align-item를 사용해야 하고

flex-direction 방향이  row인 경우, 요소들의 좌우정렬을 설정하고 싶을 때 justify-content를 사용해야 합니다.

실습 사이트에 다시 들어가서 확인해보니 정렬이 잘 변경되는 걸 확인했습니다.

아마 align-item를 사용해야 하는데 align-content를 사용한 것 같습니다.(align-content 는 두 줄 이상일 때만 정렬이 됩니다.)

 

제 예상과 달리 속성 값의 문제가 아니라 실습 사이트 자체의 불완전함 문제 때문이였을 수도 있습니다.

그래도 라이브 세션에서 태웅님이 말씀하셨던 align-item와 flex-direction: cross axis이 짝이고,

justify- content 와 flex-direction: min axis 짝이라는 걸 제대로 이해할 수 있었습니다.

 

---

순수한 페어프로그래밍 학습 방법에 대한 소감을 말하자면 매우 만족스럽습니다.

이런 학습은 처음이었지만 페어분과 대화를 하면서 코딩을 하니 더 몰입되고 체감상 시간이 빨리 갔습니다. 

제가 아는 것을 설명하기도 하고, 모르는 것을 배우기도 하면서 의사소통 능력을 기를 수 있었습니다.

이번에 만났던 분은 활동 전 준비도 철저히 해 오시고 의사소통도 굉장히 능숙한 분 이셨는데 다음에는 어떤 분과 만날지 상당히 기대중입니다.