CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정

 요즘 계속 군대에 있는 누군가와 프로젝트를 하고 있다. 근데 생각해보니 내 계정도 아니라서 깃허브에도 기록이 안남는데다가 나중에 가면 내가 이러한 포트폴리오를 했다고 증명할 방법이 안 남는다는 사실을 알았다. 물론 경험은 남는다. 지금도 CSS를 다루는데 기본적인 레이아웃 짜는 방법을  어느정도 알게 되었고, React프로젝트를 할때 밑거름이 되어 줄 것이다. 하지만 역시 명시적으로 내가 뭘해왔는지 남기는 것은 좋다.

 

 마침 오늘 개발하려는 페이지는 쉬운 페이지이다. 카카오톡의 리스트 페이지와 비슷하게, 메시지 방을 세로로 된 리스트에 띄우는 페이지이다. 웹페이지를 만드는데 제일 필요한 것이 단순하게 레이아웃의 가로정렬, 세로정렬 법이다. 지금도 똑같이 작업을 진행하고 있는지는 모르겠지만, Andriod Studio에서 앱을 만들때도 xml내부에 LinearLayout이라는 것을 이용해서 대부분의 레이아웃을 짤 수 있었다. 여기서도 똑같은 기법 겸 방법으로 해당 레이아웃을 짤 수 있을 것이다.

 

해당 페이지를 구축해 봅시다.

 

** 일단 여기서는 display : flex를 써서 정렬한다고 가정.

 전체적인 화면의 리스트는 당연히 세로로 정렬되어야한다. css적인 관점에서 보면 flex-direction : column을 이용하면, 위와 같은 결과를 얻을 수 있을 것이다. 근데 item 내부에서 보면, 전체적인 레이아웃은 썸네일 -> 이름 / 마지막 채팅 -> 날짜 와같은 식으로 가로로 정렬이 되어있음을 알 수 있다. 그래서 여기서는 flex-direction : row를 쓰면 될 것이다. 반대로, 이름과 마지막 채팅은 세로로 정렬되어있다. 또 다시 flex-direction: column을 써야할 것이다.

 

그럼 item의 정렬 까지만 대강 정리를 해보자 대충 pesudo code를 짜면 다음과 같다 : 

const MessageRoomList = styled.div`

display: flex;
flex-direction: column;

.item {
	display: flex;
	flex-direction: row;
}

`;

const ListPage = () => {
  return (
    <div>
    	<MobTopBar/>
        <MessageRoomList>
			<div className="item">
				<img className="item-thumb" src="아무거나 이미지" />
			</div>
		</MessageRoomList>    
    	<BottomTabBar/>
    </div>
  );
};

export default ListPage;

이렇게 react component 안에 리스트를 정렬할 수 있을 것이다.

 

* 23 . 08 . 30

 

 언젠간 이 글을 수정하려고 했는데, 오늘이 되었다. 플렉스 박스에 대해서 제대로 된 설명을 책을 통해서 학습하게 되니까 좀 더 머리에 들어오게 되었는데, 알고보니 내가 여태까지 알고 있었던 많은 것이 잘못된 듯하다.

 

 우선 Flex 컨테이너에 단순히 주축(기본적으로 정렬하는 방향)만 존재하는 줄 알았는데, 그게 아니고 주축과, 교차축, 2개의 축에 대한 스타일을 모두 짜주어야만 한다. flex를 쓰고 싶은 영역의 최상단에 flex 컨테이너(부모 박스)를 만들고, 그 1개의 박스 안에서 굳이 줄을 나눌 필요 없이 다른 요소를 넣어주면 되는 것이었다.(물론 필요할 수도...)

 

 내가 가운데 정렬이나 양쪽정렬을 위해 기존에 마구잡이로 쓰고 있던 CSS 속성도 알고 보니 정확히 이런 역할을 맡고 있었다.

종류	설명
justify-content	주축 방향의 정렬 방법을 정한다.
align-items	교차축 방향의 정렬 방법을 정한다.
align-self	교차축에 있는 개별 항목의 정렬 방법을 정한다.
align-content	교차축에서 여러줄로 표시된 항목의 정렬 방법을 정한다.

  그러니, 좀 더 정확히 지정하고 싶다면

 

const MessageRoomList = styled.div`

display: flex;
flex-direction: column;
justify-content: ~~~~/* 주축 정렬 */;
align-items: ~~~~/* 교차축 정렬 */;

.item {
	display: flex;
	flex-direction: row;
}

`;

const ListPage = () => {
  return (
    <div>
    	<MobTopBar/>
        //부모 박스
        <MessageRoomList>
        	//플렉스 항목
			<div className="item">
				<img className="item-thumb" src="아무거나 이미지" />
			</div>
		</MessageRoomList>    
    	<BottomTabBar/>
    </div>
  );
};

export default ListPage;

이런 식으로 이용해야한다.