Flexbox 실습
페이지 레이아웃에 대해 배우고 flexbox를 이용해 홈페이지 구조를 짜는 연습을 했다.
flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 권장되지 않고, 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식이 권장된다.
flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문.
margin: auto 를 사용하면 auto 값을 갖는 방향(왼쪽, 오른쪽 또는 양쪽 모두)으로 빈 공간을 채우게 된다.
flex layout 내부의 요소(items)에는 간단하게 margin: auto 속성을 통해 중앙 정렬을 만들 수 있다.
또는 flex 컨테이너에 justify-content, align-items를 중앙으로 배치하는 방법으로도 가능하다.
인터넷을 참고하여 간단하게 웹사이트 구조를 짜보았다.
하는 데 몇 시간이 걸린 지 모르겠다....수많은 검색과 수정을 반복했다.
그럼에도 불구하고 구현에 실패해 그대로 둔 부분들도 많고, 아직도 flexbox를 완벽히 이해하지 못했다.
px이 아닌 비율을 지정하여 flexbox container의 자체 길이를 늘여 화면 채우기, 화면 확대/축소에 따른 레이아웃의 변화를 구현하기, 상대단위 활용 등 부족한 부분들을 보완해야 할 것 같다.
간단한 웹페이지 구현 실습
웹페이지 구현 실습을 진행했다.
이전보다 수월하게 완성했고, 이제는 CSS로 하나씩 수정하다 보면 결국 모양은 완성하게 되었다.
전체적인 구조와 상대단위에 대한 이해가 부족하다.
백엔드 개발자를 목표로 하고 있지만, 더 팀원과의 원활한 소통과 개발에 대한 이해도를 높이기 위해서는 간단한 웹페이지 구조 정도는 스스로 만들 줄 알아야 할 것 같고, 더하여 javascript 기본 정도는 알면 좋을 것 같다고 생각했다.
